This content originally appeared on DEV Community and was authored by Karam
GitHub Link:
https://github.com/KJA-CSX/theme-csx
theme-csx
A utility React Native theming framework for rapidly building themeable components.
Features
- Similar to standard react native styling, but with additional props that can be added to make it themeable.
- Behind the scenes, memoization has been optimized for maximum performance.
- Can be implemented for Views + Texts + Images + Icons...
- Light & Fast
Installation
npm install theme-csx
yarn add theme-csx
Usage
import { useState } from 'react';
// Styles
import { StyleSheet, appearanceHook, t} from "theme-csx";
// Components
import { Text, View } from 'react-native';
import { Button } from '@components/atoms';
const DemoComponent = () => {
// Theme state
const [theme, setTheme] = useState(appearanceHook.activeTheme)
// Theme switch
const switchTheme = () => {
appearanceHook.switch(appearanceHook.activeTheme === 'dark' ? 'light' : 'dark')
setTheme(theme === 'dark' ? 'light' : 'dark')
}
return (
<View style={t(styles.THEMED_CONTAINER)}>
<Text style={styles.NORMAL_TEXT}>Hey, I am normal text</Text>
<Text style={t(styles.THEMED_TEXT)}>Hey, I am themed text</Text>
<Button text={'Switch theme'} onPress={switchTheme} />
</View>
)}
const styles = StyleSheet.create({
THEMED_CONTAINER: {
flex: 1,
backgroundColor: 'white',
backgroundDark: 'gray',
alignItems: 'center',
justifyContent: 'center',
},
NORMAL_TEXT: {
fontWeight: 'bold',
fontSize: 14,
color: 'green',
},
THEMED_TEXT: {
fontWeight: 'bold',
fontSize: 14,
color: 'black',
colorDark: 'white'
},
})
Configuration
Imports Usage:
StyleSheet:
- StyleSheet can be used as the normal styling way, but now you can have extra props to make it themeable if you wish.
t() Function
- t() function should be used to apply themed styles only
appearanceHook
- appearanceHook is used to toggle and switch the theme: system, light, dark
Themed Style types:
TViewStyle:
- Has the following extra props: backgroundDark, borderDark
TTextStyle:
- Has the following extra props: colorDark, backgroundDark, borderDark
TImageStyle:
- Has the following extra props: tintColorDark, backgroundDark, borderDark
This content originally appeared on DEV Community and was authored by Karam

Karam | Sciencx (2022-01-09T12:37:28+00:00) React Native- Theming made easy(2022). Retrieved from https://www.scien.cx/2022/01/09/react-native-theming-made-easy2022/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.