react-native-theme-mk

Package for managing theme in react-native

A simple solution for theme management in react-native, with its help you can use any schemes, with type definitions, with the ability to dynamically update the theme, with access to device data (width, height)

Installation

npm install react-native-safe-area-context react-native-theme-mk

Usage

Usage

ThemeManager

Constructor options

| Option | Description | |---------------------------|--------------------------------------------------| | dimensionsDesignedDevice| Dimensions of the designed device (optional). | | autoScale | Enables auto-scaling (optional). |

Methods and fields

| Method/Field | Description | |---------------------------|--------------------------------------------------| | name | The name of the current theme. | | theme | The current theme object. | | context | The React context for the current theme. | | set | Sets the current theme by name. | | get | Gets a theme by name. | | onChangeName | Registers a callback for theme name changes. | | removeAllListeners | Removes all registered listeners. | | createStyleSheet | Creates a style sheet using the provided styles creator. | | useTheme | Hook to use the current theme. | | useDevice | Hook to use the device information. | | useScale | Hook to use the scale factor. | | device | The device information. | | dimensionsDesignedDevice| The dimensions of the designed device. |

createStyleSheet

| Parameter | Type | Description | |-----------|------|-------------| | params | object | An object containing the following properties: | | params.theme | C[keyof C] | The current theme object. | | params.device | IDevice | The device information. | | params.scale | number | The scale factor. |

Device

| Property | Description | |---------------------------|--------------------------------------------------| | isAndroid | Indicates if the device is running Android. | | isIOS | Indicates if the device is running iOS. | | isTablet | Indicates if the device is a tablet. | | isIphoneX | Indicates if the device is an iPhone X. | | window | Dimensions of the device's window. | | screen | Dimensions of the device's screen. | | orientation | Current orientation of the device. | | isLandscape | Indicates if the device is in landscape mode. | | isPortrait | Indicates if the device is in portrait mode. | | inset | Insets of the device's screen. | | isSmallScreen | Indicates if the device has a small screen. | | isShortScreen | Indicates if the device has a short screen. | | screenAspectRatio | Aspect ratio of the device's screen. |

Example

import { themePrimary } from './primary-theme';
import { ThemeManager as ThemeManagerCreator } from 'react-native-theme-mk';
import { type IThemeManagerSchema } from './types';

const theme = {
    primary: themePrimary,
};

export const ThemeManager = new ThemeManagerCreator(
    'dark',
    {
        light: lightTheme,
        dark: darkTheme,
    },
    {
        autoScale: true,
        //@default designed device dimensions
        dimensionsDesignedDevice: {
            width: 375,
            height: 812,
        }
    },
);

import { HomeScreen } from './screens/Home';
import { ThemeManager } from './styles';

const { ThemeProvider } = ThemeManager;

export default function App() {
    return (
        <ThemeProvider>
            <HomeScreen />
        </ThemeProvider>
    );
}

import { ThemeManager } from '../../styles';

export const useStyles = ThemeManager.createStyleSheet(({ theme }) => ({
    container: {
        flex: 1,
        backgroundColor: theme.colors.background,
    },
    text: theme.text.h1,
    button: {
        margin: theme.lineHeight.H1,
        height: 50,
        backgroundColor: theme.colors.accent,
    },
}));

import { View, Text, TouchableOpacity } from 'react-native';
import { useStyles } from './screen.styles';
import { ThemeManager } from '../../styles';

const { useTheme } = ThemeManager;

export const HomeScreen = () => {
    const styles = useStyles({ overrideAutoScale: false, overrideThemeName: 'light' });
    const theme = useTheme();

    return (
        <View style={[styles.container]}>
            <Text style={[styles.text]}>Screen Light Theme</Text>
            <Text style={[styles.text, { color: theme.colors.accent }]}>Light/Dark Theme text</Text>
            <TouchableOpacity style={styles.button}>
                <Text style={styles.text}>Button</Text>
            </TouchableOpacity>
        </View>
    );
};

Contributing

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

License

MIT

Made with create-react-native-library