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 (
...
);
};