@nghinv/react-native-theme

React Native Theme manager

Installation

yarn add @nghinv/react-native-theme

or

npm install @nghinv/react-native-theme

Usage

1. Wrapper ThemeProvider with Root Component

import { 
  ThemeProvider, 
  DarkTheme, 
  LightTheme, 
  Colors, 
  ThemeType,
} from '@nghinv/react-native-theme';

const black: ThemeType = {
  ...DarkTheme,
  background: Colors.black,
  drawerBackground: Colors.black,
  card: 'rgba(255, 255, 255, 0.1)',
  shadowColor: 'black',
};

const purple: ThemeType = {
  ...LightTheme,
  background: Colors.deepPurple800,
};

function App() {
  return (
    <ThemeProvider
      themes={{
        purple,
        black,
      }}
      themeMode='dark'
    >
      <RootComponent />
    </ThemeProvider>
  );
}

2. Use hook useTheme

import React from 'react';
import { View, Text, ScrollView } from 'react-native';
import { useTheme, ThemeMode } from '@nghinv/react-native-theme';

function App() {
  const { theme, themeMode, setThemeMode } = useTheme();

  return (
    <View 
      style={[
        styles.container, 
        { backgroundColor: theme.drawerBackground }
      ]}
    >
      <Text 
        style={[
          theme.textStyles.h0, 
          { marginLeft: 16, marginBottom: 8 }
        ]}
      >
      Set theme
      </Text>
      <ScrollView>
        {
          ['Default', 'Light', 'Dark', 'Black', 'Purple'].map(themeKey => (
            <Row
              key={themeKey}
              title={`${themeKey} theme`}
              containerStyle={{ 
                marginBottom: 2, 
                marginHorizontal: 16, 
                borderRadius: 4 
              }}
              backgroundColor={themeMode === themeKey.toLowerCase() ? theme.selected : undefined}
              onPress={() => {
                setThemeMode(themeKey.toLowerCase() as ThemeMode)
              }}
            />
          ))
        }
      </ScrollView>
    </View>
  );
}

Property

• ThemeProvider

| Property | Type | Default | Description | |----------|:----:|:-------:|-------------| | themeMode | String | default | dark, light..., default get theme mode from device | | themes | ThemeType | undefined | Add custom theme |

• useTheme

| Property | Type | Default | Description | |----------|:----:|:-------:|-------------| | themeMode | String | | Current theme mode | | setThemeMode | ThemeType | undefined | Set theme mode | | toggleThemeMode | ThemeType | undefined | Set theme mode to dark or light |

type ThemeType = {
  textStyles: {
    h0: TextStyle;
    h1: TextStyle;
    h2: TextStyle;
    p0: TextStyle;
    p1: TextStyle;
    p2: TextStyle;
    p3: TextStyle;
  };
  alert: {
    textActive: string;
    textNormal: string;
    textDisable: string;
    textError: string;
    separator: string;
    backgroundColor: string;
  };
  actionSheet: {
    titleColor: string;
    messageColor: string;
    bottomTitleColor: string;
    buttonTitleColor: string;
    checkColor: string;
    separator: string;
    backgroundColor: string;
  };
  bottomSheet: {
    titleColor: string;
    titleColorActive: string;
    buttonTitleColor: string;
    separator: string;
    backgroundColor: string;
    iconColor: string;
    checkColor: string;
  };
  textInput: {
    backgroundColor: string;
    placeholderColor: string;
    textInputBackground: string;
    textColor: string;
    selectionColor: string;
    clearIconColor: string;
    searchIconColor: string;
    textButtonColor: string;
  };
  primary: string;
  secondary: string;
  background: string;
  card: string;
  drawerBackground: string;
  selected: string;
  shadowColor: string;
  separator: string;
  disabled: string;
  status: {
    success: string;
    info: string;
    warning: string;
    error: string;
  };
  text: {
    active: string;
    normal: string;
    subTitle: string;
    disable: string;
    error: string;
  };
  icon: {
    active: string;
    normal: string;
    disable: string;
    error: string;
  };
  blurType: string;
  blurView: boolean;
};

Credits

• @Nghi-NV