rn-themed-tailwind

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

$ yarn add rn-themed-tailwind

*or via

$ npm i rn-themed-tailwind

Usage:

// wrap your root level component with ThemeContextProvider
import { ThemeContextProvider, ThemeContext } from 'rn-themed-tailwind';

const RootApp = () => {
    return (
        <ThemeContextProvider value={'light'}>>
                <Landing />
        </ThemeContextProvider >
    )
}

export default Landing = () => {

    // v1.0.3 or earlier version had similar method named getTheme 
    // getTheme is deprecated in favour of getStyle
    const { getStyle, changeTheme, theme, getColor } = useContext(ThemeContext);

    return (
        <View style={{ flex: 1, ...getStyle('bg-primaryColor-100') }}>
            <Text style={getStyle('p-8 m-8')}>Hey</Text>
            <Button title="Change theme" onPress={() => changeTheme({ name: theme == 'dark' ? 'light' : 'dark' })}></Button>
        </View>
    )
}

Apis

useContext returns { getStyle, changeTheme, theme, getColor }

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

ex

getStyle('p-8 m-8')
// getTheme('p-8 m-8')

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

changeTheme({ name: 'dark' }) 

• 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

theme: {
    colors: {
        primaryColor: {
            100: '#2a67f4',
            200: '#3700b3'
        },
        secondaryColor: {
            100: '#4f79ff',
            200: '#018786',
        },
    },
    backgroundColor: (theme) => ({
        ...theme('colors'),
        'whiteColor': '#f5f5f5',
        'darkColor': '#000000',
        'surfaceColor': '#000000',
    }),
    textColor: theme => ({
        ...theme('colors'),
        onBackgroundColor: '#000000',
        onSurfaceColor: '#000000',
        onPrimaryColor: '#ffffff',
        onSecondaryColor: '#000000'
    })
}

dark theme file

theme: {
    colors: {
        primaryColor: {
            100: '#568DFE',
            200: '#3700b3'
        },
        secondaryColor: {
            100: '#03dac6',
            200: '#03dac6',
        }
    },
    backgroundColor: (theme) => ({
        ...theme('colors'),
        'whiteColor': '#121212',
        'darkColor': '#121212',
        'surfaceColor': 'rgba(118, 208, 208, 0.3)',
    }),
    textColor: theme => ({
        ...theme('colors'),
        onBackgroundColor: '#f9aa33',
        onSurfaceColor: '#fff',
        onPrimaryColor: '#ffffff',
        onSecondaryColor: '#ffffff'
    })
}

Updating theme file or tailwind configuration

• update theme files then run

npx create-theme