React Native Theming 2023!

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
  },
});