react-native-simple-theme

Description

Small and simple theme manager for react-native with out-of-the-box support for dark and light themes based on system settings (via useColorScheme hook from react-native). Fully typed and easy to extend with your own themes.

Installation

yarn add react-native-simple-theme

API

| Methods | Params | Description | | -----------------: | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | useThemeName | - | returns name of current theme returned from context.getThemeName or value of useColorScheme | | useThemeStyle | styleFactory - function returned from createThemedStyles | returns styled object with applied theme values | | useThemeValue | themePath - path to theme value i.e. text.primary | returns value from defined theme by path | | createThemedStyles | factoryFunction - function which gets theme as first param and returns style object | returns style factory function which should be provided to useThemeStyle hook |

| Components | Props | Description | Default value | | ------------: | -------------------- | ------------------------------------------------------------------- | ----------------------------------------- | | ThemeProvider | value | context object containing themes and optional getThemeName function | - | | - | value.themes | object containing themes definition. Required | {} | | - | value.getThemeName | optional function returning your own theme name based on values | useColorScheme hook from react-native |

Typescript

To type the theme object you can use the following code:

const themes = {
  light: {
    first: '#fff',
    second: '#000',
  },
  dark: {
    first: '#000',
    second: '#fff',
  },
};

type ThemePaletteType = typeof themes;

declare global {
  namespace ReactNativeSimpleTheme {
    interface ThemePalette extends ThemePaletteType {}
  }
}

It's recommended to place it inside typings/index.d.ts to work out of the box with TypeScript.

Usage

• Basic useThemeStyle usage:

import { createThemedStyles, ThemeProvider, useThemeStyle } from 'react-native-simple-theme';

const themes = {
  light: {
    primary: '#fff',
    secondary: '#000',
  },
  dark: {
    primary: '#000',
    secondary: '#fff',
  },
};

const AppProvider = ({ children }: { children: React.ReactNode }) => (
  <ThemeProvider value={{ themes }}>{children}</ThemeProvider>
);

const TestComponent = () => {
  const style = useThemeStyle(styles);

  return (
    <View style={style.container}>
      <View style={style.box}>
        <Text style={style.text}>Test theme text</Text>
      </View>
    </View>
  );
};

export default function App() {
  return (
    <AppProvider>
      <TestComponent />
    </AppProvider>
  );
}

const styles = createThemedStyles((palette) => ({
  text: {
    color: palette.primary,
    padding: 10,
  },
  box: {
    height: 100,
    width: 100,
    backgroundColor: palette.secondary,
  },
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
}));

• useThemeValue / useValueBasedOnTheme usage:

// themes passed to ThemeProvider
const themes = {
  light: { icon: { primary: '#aaa' } },
  dark: { icon: { primary: '#999' } },
};

const Example = () => {
  const iconName = useValueBasedOnTheme({ dark: 'chevron', light: 'close' });
  const iconColor = useThemeValue('icon.primary');

  // iconName and iconColor will change along with theme.
  return <Icon color={iconColor} name={iconName} />;
};

• ThemeProvider usage:

const themes = {
  blue: { icon: { primary: '#00f' } },
  red: { icon: { primary: '#f00' } },
};

const Example = () => {
  const getThemeName = useCallback(() => {
    const currentAppTheme = getAppTheme(); // returns 'blue' or 'red'
    return currentAppTheme;
  }, [getAppTheme]);

  return (
    <ThemeProvider value={{ themes, getThemeName }}>
      <ExampleComponent />
    </ThemeProvider>
  );
};

Contributing

Setup

1. yarn

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

TODO:

• [ ] Documentation
• [ ] Optimizations
• [ ] Reduce bundle size to minimum