0.2.2 • Published 2 years ago

react-native-simple-theme v0.2.2

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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

MethodsParamsDescription
useThemeName-returns name of current theme returned from context.getThemeName or value of useColorScheme
useThemeStylestyleFactory - function returned from createThemedStylesreturns styled object with applied theme values
useThemeValuethemePath - path to theme value i.e. text.primaryreturns value from defined theme by path
createThemedStylesfactoryFunction - function which gets theme as first param and returns style objectreturns style factory function which should be provided to useThemeStyle hook
ComponentsPropsDescriptionDefault value
ThemeProvidervaluecontext object containing themes and optional getThemeName function-
-value.themesobject containing themes definition. Required{}
-value.getThemeNameoptional function returning your own theme name based on valuesuseColorScheme 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