DEV Community: Karam Jammal

React Native Theming 2025!

Karam Jammal — Wed, 07 May 2025 12:51:17 +0000

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:

✨ Features

⚡️ Light / Dark / System theme support
🍏 Dynamic iOS color adaptation
💾 MMKV-based persistent theme storage
🧠 Memoized themed styles with createThemedStyles
🔐 Type-safe access to theme tokens (with autocomplete)
🚀 Scalable for monorepos and multi-app setups
🧩 Extendable (spacing, typography, shadows, etc.)

✅ iOS: theme changes apply instantly

🔁 Android: theme changes apply on app restart

📦 Installation

# npm
npm install theme-csx

# yarn
yarn add theme-csx

# pnpm
pnpm add theme-csx

🚀 Quick Start

1. Define your own theme

Create your own theme object.

It must include a colors.light and colors.dark object. Everything else (e.g. spacing, typography, radius) is optional and customizable.

// theme/theme.ts

export const theme = {
  colors: {
    light: {
      background: '#ffffff',
      text: '#111111',
    },
    dark: {
      background: '#000000',
      text: '#ffffff',
    },
  },
  spacing: {
    sm: 8,
    md: 16,
    lg: 24,
  },
  // Add any other tokens you want (typography, radius, etc.)
};

2. Create your theme system

Use createAppTheme() to initialize your theming system.

This should be called only once in your app to avoid unexpected behavior.

You can enable persistent theme mode storage (optional) by setting { storage: true }.

⚠️ Requires react-native-mmkv if storage is enabled.

// theme/index.ts

import { createAppTheme } from 'theme-csx';
import { theme } from './theme';

export const {
  AppThemeProvider,
  useTheme,
  useThemeMode,
  useSetThemeMode,
  useResetThemeMode,
  useToggleThemeMode,
  createThemedStyles,
} = createAppTheme(theme, {
  storage: true, // Optional: disables persistence if omitted or set to false
});

3. Wrap your app

Wrap your app with AppThemeProvider and you are all set 🚀.

// App.tsx
import { AppThemeProvider } from '@theme';

export default function App() {
  return (
    <AppThemeProvider>
      {/* your app code */}
    </AppThemeProvider>
  );
}

🎨 Usage

- Access current theme

import { useTheme } from '@theme';

const MyComponent = () => {
  const theme = useTheme();
  return <View style={{ backgroundColor: theme.colors.background }} />;
};

- Themed styles (`Efficient`)

import { createThemedStyles } from '@theme';

const useStyles = createThemedStyles((theme) => ({
  container: {
    flex: 1,
    backgroundColor: theme.colors.background,
    padding: theme.spacing.md,
  },
  text: {
    color: theme.colors.text,
  },
}));

const MyComponent = () => {
  const styles = useStyles();
  return <Text style={styles.text}>Hello</Text>;
};

- Toggle theme mode

import { useToggleThemeMode  } from '@theme';

const ToggleButton = () => {
  const toggleTheme = useToggleThemeMode();

  return <Button title="Toggle Theme" onPress={toggleTheme} />;
};

🔧 Other Utilities

Once you initialize your theme system with createAppTheme(), you get access to the following utilities:

Utility	Description
`useTheme()`	Access the current theme (`colors`, `colorMode`, and custom tokens).
`useThemeMode()`	Get the current theme mode (`light`, `dark`, or `system`).
`useSetThemeMode()`	Change the theme mode programmatically.
`useResetThemeMode()`	Reset to system theme mode (and clear stored preference if `storage: true`).
`useToggleThemeMode()`	Toggle strictly between `light` and `dark` modes.
`useCycleThemeMode()`	Cycle through modes: `light → dark → system → light`.
`createThemedStyles()`	Create memoized themed styles using your theme object.

All of these must be used within your AppThemeProvider tree.

🧩 Best Practices

✅ Always wrap your app in AppThemeProvider

✅ Use useTheme() for direct access to the theme

✅ Use createThemedStyles() to keep styles performant and memoized

✅ Use storage: true only if react-native-mmkv is installed

🚫 Do not call createAppTheme() more than once per app

React Native Theming 2023!

Karam Jammal — Sun, 08 Oct 2023 00:46:38 +0000

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

Network Config

Karam Jammal — Sun, 25 Jun 2023 22:20:30 +0000

Swtich(1):

en
conf t

// HostName
hostname S1

// Vlan Names

vlan 15
name Sales
exit
vlan 25
name Research
exit
vlan 35
name Servers
exit
vlan 88
name Mgt
exit
vlan 98
name Native
exit

// Allowed vlans, and native vlan
int range g0/1-2
switchport mode trunk
switchport trunk native vlan 98
switchport trunk allowed vlan 15,25,35,88,98
exit

// Access switchports with vlans
int ; - Different by Switch
switchport mode access
switchport access vlan <15> - Different by Switch: (Pc1-15, Pc2-25, PcAdmin- 88, Servers-35)
exit

// Shutdown unused switchports
int range - Different by Switch
shutdown
exit

// The management interface vlan 88 with an ip address
int v88
ip address <192.168.88.11 255.255.255.0> - Different by Switch: (Find IP in table Switches)
exit

// Use the planned R1 address 192.168.88.1 as the default gateway
ip default-gateway 192.168.88.1

exit
write

Router(1/3):

en
conf t

// HostName
hostname R1

// Configure interfaces:

// R1 -> S1 interface - Diff(R3)
int g0/0 - Diff(R3)
no shutdown
exit

// R1 -> S1 vlans interfaces - Diff(R3)

int g0/0.15 - Diff(R3)
encapsulation dot1Q 15
ip address 192.168.15.1 255.255.255.0 - Diff(R3)
exit

int g0/0.25 - Diff(R3)
encapsulation dot1Q 25
ip address 192.168.25.1 255.255.255.0 - Diff(R3)
exit

int g0/0.35 - Diff(R3)
encapsulation dot1Q 35
ip address 192.168.35.1 255.255.255.0 - Diff(R3)
exit

int g0/0.88 - Diff(R3)
encapsulation dot1Q 88
ip address 192.168.88.1 255.255.255.0 - Diff(R3)
exit

int g0/0.98 - Diff(R3)
encapsulation dot1Q 98 native
ip address 192.168.98.1 255.255.255.0 - Diff(R3)
exit

// R1 -> R2 vlans interfaces - Diff(R3)

int s0/0/0 - Diff(R3)
ip address 192.168.5.1 255.255.255.252 - Diff(R3)
no shutdown
clock rate 2000000 - Only For specified interfaces
exit;

// Configure RIP dynamic routing - Diff(3)
router rip
version 2
network 192.168.15.0
network 192.168.25.0
network 192.168.35.0
network 192.168.88.0
network 192.168.98.0
network 192.168.5.0 - Diff(3)
exit

// Configure DHCP pool - Only R1

ip dhcp pool POOL15
network 192.168.15.0 255.255.255.0
default-router 192.168.15.1
dns-server 192.168.35.253
exit

ip dhcp pool POOL25
network 192.168.25.0 255.255.255.0
default-router 192.168.25.1
dns-server 192.168.35.253

exit
write

Router(2):

en
conf t

// HostName
hostname R2

// Configure interfaces:

int s0/0/0
ip address 192.168.5.2 255.255.255.252
no shutdown
exit;

int s0/0/1
ip address 192.168.5.5 255.255.255.252
no shutdown
clock rate 128000 - Only For specified interfaces
exit;

int s0/1/0
ip address 209.165.201.66 255.255.255.0
no shutdown
exit;

// Configure RIP dynamic routing

router rip
version 2
network 192.168.5.0
network 192.168.5.4
default-information originate
exit
ip route 0.0.0.0 0.0.0.0 s0/1/0

exit
write

React Native-Theming support!

Karam Jammal — Wed, 04 May 2022 17:39:32 +0000

Hello everyone, this is a follow up article for our new react native theming library, which now has an official YouTube video about it!

Youtube link: https://youtu.be/wW20AkwmGMk
Github link: https://github.com/KJ-GM/theme-csx

Thank you and enjoy!

Example

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

React Native - Modern theming!!

Karam Jammal — Thu, 17 Mar 2022 07:06:42 +0000

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

React Native - Modern theming!

Karam Jammal — Sat, 26 Feb 2022 11:07:03 +0000

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

React Native - Modern theming

Karam Jammal — Tue, 22 Feb 2022 15:43:16 +0000

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

React Native- Responsive UI(2022)

Karam Jammal — Thu, 13 Jan 2022 20:37:26 +0000

After you've built the UI and functionality of your app and tested it on various devices, you'll notice that something is wrong or missing with the layouts you expected. This is a common developer issue that must be addressed from the start of the development process.

In this article we will tackle the responsiveness issues that every developer face in mobile development and specifically in react native. This is part of a library feature that will be made soon as solution.

You can also check the new theming library:
https://dev.to/kjatsx/react-native-theming-made-easy2022-479c

Responsive Problems:

Layouts: Making sure layouts are stable and adaptable in all screen sizes can be done with the following:

Flex-box: Is designed to keep the proportions and consistency of the layout on different screen sizes.

Percentage: Using percentage for width and height will keep layouts responsive relative to their parent elements.

Aspect Ratio: If you know only one dimension of your element (width or height), this is where the Aspect Ratio comes into play, it helps keep proportions of your elements under control by keeping the second dimension in relation to the one you already know.

Images: Making sure images are stable and adaptable in all screen sizes can be done with the following:

Percentage: Images size can be scaled based on their parent container height and width with a percentage value.

ImageArray: A very nice feature of react native Image component is that you can pass an array of sourceImage objects. This array of objects includes source, width, and height. The component will use the size of the container to pick the image from the list that is the best match.

FontSize: Making sure fonts are stable and adaptable in all screen sizes can be done with the following:

Screen window fontScale: Using the ratio of the screen size, fonts in the app can be scaled accordingly.

Responsive Solution:

The Power of mediaQuery

Media query techniques allow different presentation and content to be served depending on the output device, helping ensure that your mobile app renders optimally on all devices and platforms.

How does this help in React Native ?

Layouts - can be changed/scaled dynamically based on devices size.

FontSize - can be scaled dynamically and differently based on devices size.

Images - can be scaled dynamically and differently based on devices size.

Portrait & Landscape - orientation changes style dynamically for Portrait & Landscape mode.

What dose the library bring ?

StyleSheet

This time you have an extra prop called mediaQuery where you can specify all your queries there.

MediaQuery Types:

1) min_w_value - apply these styles in min width value

2) min_h_value - apply these styles in min height value

3) max_w_value - apply these styles in max width value

4) max_h_value - apply these styles in max height value

5) Bw_value1 _ value2 - apply these styles when width between value1 and value2

6) Bh_value1 _ value2 - apply these styles when height between value1 and value2

7) Pm - apply these styles when device in portrait mode.

8) Lm - apply these styles when device in landscape mode.

Dynamic styles

This means that whenever the phone is flipped and changes orientation the mediaQuery will apply the new styles automatically.

How things will look like:


// Responsive Styles 
import { StyleSheet, R} from 'responsive-csx';

// Components 
import { Text, View } from 'react-native';

const DemoComponent = () => {

return (
  <View style={styles.CONTAINER}>

    <Text style={R(styles.TEXT)}>Hey, I responsive text</Text>

    <Image style={R(styles.IMAGE)} source="./assets/profile"/>

  </View>
)}


const styles = StyleSheet.create({
    CONTAINER: {
     flex: 1,
     backgroundColor: 'white',
     alignItems: 'center',
     justifyContent: 'center',
   },
   TEXT: {
     fontWeight: 'bold',
     fontSize: 16,
     color: 'green',
     mediaQuery:{
       min_w_500:{
        fontSize: 12,
       }
     }
   },
   IMAGE:{
    width:250,
    height: 250, 
    mediaQuery:{
       min_w_500:{
        width:120,
        height: 120,
       }
     }
   }
})

This library is currently in progress and will be available in few weeks. Anyone who wishes to contribute for the library, get in touch!

React Native- Theming made easy(2022)

Karam Jammal — Sun, 09 Jan 2022 12:37:28 +0000

GitHub Link:

https://github.com/KJ-GM/theme-csx

A React Native theming framework that makes it easy to create themeable components.

Features

Similar to standard react native styling, but with additional props that can be added to make it themeable.
Can be implemented for Views + Texts + Images + Icons...
Light & Fast
Expo & ReactNative
Typescript & JavaScript

Installation

npm install theme-csx

yarn add theme-csx

Get Started - Three Steps:

StyleSheet

Is used in the usual styling format, but now you have additional props to make style themeable.

T() Function

Apply only your themed styles using the T() function wrapper.

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 porp 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 porp was added to make it themeable
   },
})

Theme 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

appearanceHook.switch():

Has the following options: system, light, dark

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

Apache-2.0 License

React Native- Upcoming Theming library(2022)

Karam Jammal — Wed, 05 Jan 2022 01:20:30 +0000

GitHub Link:

https://github.com/KJA-Tsx/theme-csx

Dev link

https://dev.to/kjacsx/react-native-theming-made-easy2022-479c

Hello everyone. As you might have guessed from the title, nowadays every developer wants to add the theming feature to their mobile apps and is looking for the simplest and most reliable solution that does the job. Let us discuss more about this!

As you get excited to add the theming feature to your app, you will either take one of two ways:

1) Create it by yourself (usually with react native Context)

2) Install a library/package that dose the job!

Problem:

Of course, 90% of developers will choose the second option to save both time and focus. However, when it comes to react native, this becomes a little more complicated because most packages are either outdated or come with unnecessary features that aren't really needed in your project.

For example, NativeBase provides the option of theming; however, the theming feature is shipped with other components that you may not want in your app and can also increase the app's size.

Another example, StyledComponents library, it gives the option for theming; however, you have to adapt to a new way of styling which is just like css.

Solution:

I was able to create a simple and optimized way to do the same job of theming for react native by using MST (mbox state tree) behind the scenes.

Here are some of the features:

1) Similar to standard react native styling, but with additional props that can be added to make it themeable.

2) Behind the scenes, memoization has been optimized for maximum performance.

3) Easy to use + light weight + very clear

4) Can be implemented for Views + Text + Images...

Example of how it works with Text:

Normal way:

const DemoComponent = () => {

<Text style={DEMO_TEXT}>Hey, I am normal text</Text>

}

const DEMO_TEXT: TextStyle = {
  fontWeight: 'bold',
  fontSize: 14,
  color: 'white'
}

Themed way:

const DemoComponent = () => {

<Text style={T(DEMO_TEXT)}>Hey, I am themed text</Text>

}

const DEMO_TEXT: TTextStyle = {
  fontWeight: 'bold',
  fontSize: 14,
  color: 'white',
  colorDark: 'black'
}

As can be seen above, with few simple steps we made our text themed.

Changes:

1) Instead of using the standard TextStyle type, we are using TTextStyle, which is essentially the same but has some additional properties such as colorDark, backgroundDark, and borderDark.

2) We only need to add T method to apply our themed text style.

NOTICE: An option to use styleSheet for this also works!

Finally and most importantly, we need a way to switch between themes globally, this is where the appearanceHook comes in, let's take a look:


// 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 porp 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 porp was added to make it themeable
   },
})

DEV Community: Karam Jammal

React Native Theming 2025!

Without further ado, let's get started:

✨ Features

📦 Installation

🚀 Quick Start

1. Define your own theme

2. Create your theme system

3. Wrap your app

🎨 Usage

- Access current theme

- Themed styles (Efficient)

- Toggle theme mode

🔧 Other Utilities

🧩 Best Practices

React Native Theming 2023!

Without further ado, let's get started:

Usage ❓

Network Config

React Native-Theming support!

Example

React Native - Modern theming!!

Without further ado, let's get started:

Usage ❓

React Native - Modern theming!

Without further ado, let's get started:

Usage ❓

React Native - Modern theming

Without further ado, let's get started:

Usage ❓

React Native- Responsive UI(2022)

Responsive Problems:

Responsive Solution:

How does this help in React Native ?

What dose the library bring ?

How things will look like:

React Native- Theming made easy(2022)

GitHub Link:

Features

Installation

Get Started - Three Steps:

Usage

Theme Types:

Contributing

License

React Native- Upcoming Theming library(2022)

GitHub Link:

Dev link

- Themed styles (`Efficient`)