Theme

Setup

You can control you theme by theme props in ThemeProvider

import {
  CurrentTheme,
  defaultSpaces,
  getShadows,TFontWeight,
  ThemeProvider
} from '@lad-tech/mobydick-core';
import {Navigation} from '@/pages/Navigation';
import {themeColors} from '@/shared/lib/theme';
import { Platform } from 'react-native';

export const fontResolver = (weight: TFontWeight) => {
  const map = {
    [TFontWeight.Bold]: Platform.select({
      android: 'Inter_700Bold',
      ios: 'Inter-Bold',
    }),
    [TFontWeight.SemiBold]: Platform.select({
      android: 'Inter_600SemiBold',
      ios: 'Inter-SemiBold',
    }),
    [TFontWeight.Medium]: Platform.select({
      android: 'Inter_500Medium',
      ios: 'Inter-Medium',
    }),
    [TFontWeight.Regular]: Platform.select({
      android: 'Inter_400Regular',
      ios: 'Inter-Regular',
    }),
  };
  return map[weight];
};

function App() {
  return (
    <ThemeProvider
      theme={{
        currentTheme: CurrentTheme.light,
        colors: themeColors,
        spaces: {
          ...defaultSpaces,
        },
        shadows: getShadows({
          spaces: defaultSpaces,
          currentTheme: CurrentTheme.light,
        }),
        customFontResolver: fontResolver
      }}>
        <Navigation />
    </ThemeProvider>
  );
}

export default App

Props

Required

currentTheme

TYPE
string

Name one of theme

Required

colors

TYPE
colors

All possible colors group by theme

Required

spaces

TYPE
space

All possible spaces

Required

shadows

TYPE
shadow

Map for shadow

customFontResolver

TYPE
(weigth: string) => string)

Custom function for font resolve. (If your app need use another font instead of Inter)