Skip to main content

Getting started

Introduction

@lad-tech/mobydick-core is core components of mobydick

Installation

npm install @lad-tech/mobydick-core react-native-svg react-native-svg-transformer react-native-safe-area-context

Bare React Native

To use typography font, you must install the font. To do this, in react-native.config.js you need to add the path to it to assets:

module.exports = {
project: {
ios: {},
android: {},
},
assets: [
...,
'node_modules/@expo-google-fonts/inter',
'node_modules/@lad-tech/mobydick-core/src/styles/icons/font/assets/fonts/',

],
};

and run the command

npx react-native-asset

Expo

add new fonts into app.json (app.config.js)

plugins: [
...
[
'expo-font',
{
fonts: [
'node_modules/@lad-tech/mobydick-core/src/styles/icons/font/assets/fonts',
'node_modules/@expo-google-fonts/inter',
],
},
],
],

and load them into _layout.ts

import {useFonts} from 'expo-font';
import {SplashScreen} from 'expo-router';
import {useEffect} from 'react';
import {
Inter_100Thin,
Inter_200ExtraLight,
Inter_300Light,
Inter_400Regular,
Inter_500Medium,
Inter_600SemiBold,
Inter_700Bold,
Inter_800ExtraBold,
Inter_900Black,
} from '@expo-google-fonts/inter';


// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default () => {
const [loaded] = useFonts({
Inter_100Thin,
Inter_200ExtraLight,
Inter_300Light,
Inter_400Regular,
Inter_500Medium,
Inter_600SemiBold,
Inter_700Bold,
Inter_800ExtraBold,
Inter_900Black,
Neotis: require('@lad-tech/mobydick-core/src/styles/icons/font/assets/fonts/Neotis.ttf'),
});

useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
}
}, [loaded]);

if (!loaded) {
return null;
}

return (
...
);
};