This content originally appeared on DEV Community and was authored by Karam Jammal
Good day, everyone! Today we'll talk about theme-csx, a new react native theming library that was created to alleviate the pain that developers may experience when attempting to add dark mode support to mobile apps.
Github Link: https://github.com/KJ-GM/theme-csx
Without further ado, let's get started:
Theme-csx focuses on providing an easy and simple way to add dark mode support to our mobile apps. With three simple steps, your app will be set up and ready to go!
You may wonder what makes this library special than other libraries such as styled-components, react native paper...
1) Similar to standard react native styling
2) Light & Fast
3) Expo & React Native
4) Supports React Navigation
System: changes to the phone appearance preference while the app is running will be applied dynamically. - IOS: changes will be shown immediately without the need to reopen the app
let's go over the steps very briefly:
StyleSheet
- Is similar to the usual styling format, but now you have additional props to make style themeable.
T() Function - Themed
- Apply only your themed styles using the T() function wrapper.
TV() Function - Themed Value
- Is an extra helper function that can be used to theme a specific value. (this becomes helpful with react navigation)
appearanceHook
- Use the appearanceHook to switch theme from anywhere in your app.
Usage ❓
// Styles
import { StyleSheet, T, appearanceHook } from 'theme-csx';
// Components
import { Text, View } from 'react-native';
import { Button } from '@components/atoms';
const DemoComponent = () => {
// Theme switch
const switchTheme = () => {
appearanceHook.switch(
appearanceHook.activeTheme === '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', // backgroundDark prop was added to make it themeable
alignItems: 'center',
justifyContent: 'center',
},
NORMAL_TEXT: {
fontWeight: 'bold',
fontSize: 14,
color: 'green',
},
THEMED_TEXT: {
fontWeight: 'bold',
fontSize: 14,
color: 'black',
colorDark: 'white', // colorDark prop was added to make it themeable
},
});
This content originally appeared on DEV Community and was authored by Karam Jammal
Karam Jammal | Sciencx (2022-03-17T07:06:42+00:00) React Native – Modern theming!!. Retrieved from https://www.scien.cx/2022/03/17/react-native-modern-theming/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.