React native themed tailwind

Highly customizable small size library for providing support for theming along with tailwind and some builtin components!

Motivation for this library

Since there is no library(till its first puslish) available to provide theming support with tailwind

This library provides out of box support for theming.

Getting Started

1$ yarn add rn-themed-tailwind

*or via

1$ npm i rn-themed-tailwind

Usage:

1// wrap your root level component with ThemeContextProvider
2import { ThemeContextProvider, ThemeContext } from 'rn-themed-tailwind';
3
4const RootApp = () => {
5    return (
6        <ThemeContextProvider value={'light'}>>
7                <Landing />
8        </ThemeContextProvider >
9    )
10}
11
12export default Landing = () => {
13
14    // v1.0.3 or earlier version had similar method named getTheme 
15    // getTheme is deprecated in favour of getStyle
16    const { getStyle, changeTheme, theme, getColor } = useContext(ThemeContext);
17
18    return (
19        <View style={{ flex: 1, ...getStyle('bg-primaryColor-100') }}>
20            <Text style={getStyle('p-8 m-8')}>Hey</Text>
21            <Button title="Change theme" onPress={() => changeTheme({ name: theme == 'dark' ? 'light' : 'dark' })}></Button>
22        </View>
23    )
24}

Apis

useContext returns { getStyle, changeTheme, theme, getColor }

• getStyle(styles: string)
• getTheme(style: string) // DEPRECATED, in favour of getStyle

ex

1getStyle('p-8 m-8')
2// getTheme('p-8 m-8')
3

• changeTheme({ name: [themeName] }) ex

1changeTheme({ name: 'dark' }) 
2

• theme // string: enum of available themes

• getColor // Pass the name of a color (e.g. "primaryColor-100") and receive a color value (e.g. "#2a67f4")

light theme file

1theme: {
2    colors: {
3        primaryColor: {
4            100: '#2a67f4',
5            200: '#3700b3'
6        },
7        secondaryColor: {
8            100: '#4f79ff',
9            200: '#018786',
10        },
11    },
12    backgroundColor: (theme) => ({
13        ...theme('colors'),
14        'whiteColor': '#f5f5f5',
15        'darkColor': '#000000',
16        'surfaceColor': '#000000',
17    }),
18    textColor: theme => ({
19        ...theme('colors'),
20        onBackgroundColor: '#000000',
21        onSurfaceColor: '#000000',
22        onPrimaryColor: '#ffffff',
23        onSecondaryColor: '#000000'
24    })
25}

dark theme file

1theme: {
2    colors: {
3        primaryColor: {
4            100: '#568DFE',
5            200: '#3700b3'
6        },
7        secondaryColor: {
8            100: '#03dac6',
9            200: '#03dac6',
10        }
11    },
12    backgroundColor: (theme) => ({
13        ...theme('colors'),
14        'whiteColor': '#121212',
15        'darkColor': '#121212',
16        'surfaceColor': 'rgba(118, 208, 208, 0.3)',
17    }),
18    textColor: theme => ({
19        ...theme('colors'),
20        onBackgroundColor: '#f9aa33',
21        onSurfaceColor: '#fff',
22        onPrimaryColor: '#ffffff',
23        onSecondaryColor: '#ffffff'
24    })
25}

Updating theme file or tailwind configuration

• update theme files then run

1npx create-theme