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