react-native-ueno-css-modules
React Native CSS Modules with variables and theme support
yarn add react-native-ueno-css-modules # And optional pre-processors yarn add node-sassyarn add stylusyarn add less
Transformer
const upstreamTransformer = ;const uenoCssModulesTransformer = ; moduleexports { if filename || filename || filename || filename || filename return uenoCssModulesTransformer; return upstreamTransformer;};
Add themes and variables
import setThemeVars setVars from 'react-native-ueno-css-modules'; ; ;
Change theme
import setTheme from 'react-native-ueno-css-modules'; ;
Usage in styles
Refer to the classNames documentation
const styles = ; stylesfoo;;;
How this works
Consider the following
// styles.css .sample
// Component.jsximport setTheme setThemeVars setVar from 'react-native-ueno-css-modules'; // Set two themes: dark and light;; // Set current theme; // Themes have to be allocated before requiring css filesconst styles = ; // console.log(styles) sample: textAlign: 'left' sample__theme__light: color: '#ffffff' sample__theme__dark: color: '#000000' // Set dynamic variable; // console.log(styles.sample) stylessample stylessample__theme__light fontSize: 16 ; // Update dynamic style; // console.log(styles.sample) stylessample stylessample__theme__light fontSize: 21 ; // Change theme; // console.log(styles.sample) stylessample stylessample__theme__dark fontSize: 21 ;