react-native-theme-style
The problem
You want to:
- Apply styles to your react-native component according to a theme
- not use styled-components because of various reasons (Jest/Flow/etc issues)
- have a fully typed theme (Flow and Typescript support)
- A lightweight solution which is plain React and use the power of Hooks and context
Welcome to react-native-theme-style.
Usage
You must have React-Native 0.59+ installed
- Install
yarn add react-native-theme-style
- Create your theme context
// ./src/theme.jsx import * as React from "react";import configureTheme from "react-native-theme-style"; const defaultTheme = color: "red" ;const ThemeContext = React; const useTheme = ;
- Wrap your app within the theme context
//./App.jsx// ... imports going hereimport ThemeContext from "./src/theme"; //... App class going here { return <ThemeContext.Provider> <App /> </ThemeContext.Provider> ;}
And then in your functional components (on class components it won't work because of hooks running behind the hood) you can do:
// ./src/Foo.component.jsximport Text View from "react-native";import useTheme from "./theme"; const Foo = const stylings = ; return <View> <Text =>Hello React native</Text> <Text =>Hello Theme</Text> </View> ;; const styles = bar: color: "yellow" color: themecolor ;
Optionally, if you want to evaluate the styles according to some value, you can pass a second parameter to useTheme:
// ./src/Foo.component.jsximport Text View from "react-native";import useTheme from "./theme"; const Foo = const stylings = ; return <View> <Text =>Hello React native</Text> <Text =>Hello Theme</Text> </View> ;; const styles = bar: color: "yellow" color: paramsisActive ? themecolor : "brown" ;
Typescript/flow
// ./src/theme.tsx ;; ;; ; // Typings support;
and then:
// ./src/Foo.component.jsx;; ; ;