Wrapper of Context for Theme.

Usage

Note: You must be using React Native 0.60.0 or higher to use the most recent version of @rabiloo/react-native-theme-provider.

Install AsyncStorage first:

Follow react-native-community/async-storage

yarn add @rabiloo/react-native-theme-provider

OR FROM GIT

yarn add https://github.com/rabiloo/react-native-theme-provider.git

- Step 1: Wrapper your App Root 

import {ThemeContainer, DefaultThemeConfig} from '@rabiloo/react-native-theme-provider';

const App = () => (
    <ThemeContainer
      cache={true}
      initialThemeCode={DefaultThemeConfig.dark}
      data={{
        dark: {
          background: 'black',
          text: 'white',
        },
        light: {
          background: 'white',
          text: 'black',
        },
      }}>
        <Demo />
    </ThemeContainer>
)

DefaultThemeConfig : dark, light, base_device (dynamic dark, light based on your phone theme)

- Step 2: use useThemeColor hook to get Colors data

import {useThemeColor, ThemeService} from '@rabiloo/react-native-theme-provider';

const Demo = () => {
  const {Colors, setThemeCode} = useThemeColor();

  return (
      <View
        style={{
          backgroundColor: Colors.background,
          flex:1,
        }}>
        <Text
          style={{color: Colors.text}}
          onPress={() => {
            //get current theme code
            const currentColorScheme = ThemeService.getColorScheme();
            
            // change to what you want
            setThemeCode({
              themeCode: currentColorScheme === 'light' ? 'dark' : 'light',
            });
          }}>
          Change theme
        </Text>
      </View>
  );
};

Properties

data?: object

Source for App Colors.e.g.

data= {{ dark: {
          background: 'black',
          text: 'white',
        },
        light: {
          background: 'white',
          text: 'black',
        }}

cache?: boolean

Save your current theme code to AsyncStorage if initialThemeCode !== DefaultThemeConfig.base_device

Supported React Native Versions

This project only aims to support the latest version of React Native.
This simplifies the development and the testing of the project.

If you require new features or bug fixes for older versions you can fork this project.

Licenses

MIT