rn-theme-mgr v1.0.2

rn-theme-mgr

Easy to use theme system for react-native

Installation

yarn add rn-theme-mgr

or

npm i -S rn-theme-mgr

Setup on your project

// @defaultTheme.ts
// desc: declares default theme variables here (YOU NEED TO CREATE THIS)
export default {
    primaryColor: "#f0f"
    ...
}

// @theme.tsx
// desc: writing code like below (YOU NEED TO CREATE THIS)
import { initTheme } from "rn-theme-mgr";
import defaultTheme from "./defaultTheme";

const { ThemeProvider, useTheme, StyleSheet: ThemeStyleSheet } = initTheme(
  defaultTheme
);

export { defaultTheme, ThemeProvider, useTheme, ThemeStyleSheet };

// @at your App.tsx
import { ThemeProvider } from "./theme"

...
{
    ...
    <ThemeProvider>
        ... ui codes
    </ThemeProvider>
    ...
}

Usages

1. Usage with hooks

// @at your some components
import { useTheme } from "./theme"

...
    render() {
        const { theme } = useTheme();

        return (
            <View style={{
                backgroundColor: theme.primaryColor
            }}>
                ...
            </View>
        )
    }

2. Usage with stylesheet

// @at your some components
import { ThemeStyleSheet } from "./theme"

...

const styles = ThemeStyleSheet.create((theme) => ({
    container: {
        backgroundColor: theme.primaryColor
    }
}))

3. Usage with default variables (static)

// @at your some components
import { defaultTheme } from "./theme"

...
    render() {
        return (
            <View style={{
                backgroundColor: defaultTheme.primaryColor
            }}>
                ...
            </View>
        )
    }

Changing theme in realtime

// @at your some components
import { useTheme } from "./theme"

...
    render() {
        const { setTheme } = useTheme();

        const newTheme = {
            primaryColor: "red"
        }

        return (
            ...
            <Button onPress={() => {
                setTheme(newTheme);
            }} />
            ...
        )
    }