React Native- Theming made easy(2022)

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 additiona…


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


Print Share Comment Cite Upload Translate Updates
APA

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/

MLA
" » React Native- Theming made easy(2022)." Karam | Sciencx - Sunday January 9, 2022, https://www.scien.cx/2022/01/09/react-native-theming-made-easy2022/
HARVARD
Karam | Sciencx Sunday January 9, 2022 » React Native- Theming made easy(2022)., viewed ,<https://www.scien.cx/2022/01/09/react-native-theming-made-easy2022/>
VANCOUVER
Karam | Sciencx - » React Native- Theming made easy(2022). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/09/react-native-theming-made-easy2022/
CHICAGO
" » React Native- Theming made easy(2022)." Karam | Sciencx - Accessed . https://www.scien.cx/2022/01/09/react-native-theming-made-easy2022/
IEEE
" » React Native- Theming made easy(2022)." Karam | Sciencx [Online]. Available: https://www.scien.cx/2022/01/09/react-native-theming-made-easy2022/. [Accessed: ]
rf:citation
» React Native- Theming made easy(2022) | Karam | Sciencx | 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.

You must be logged in to translate posts. Please log in or register.