react-native-themed-stylesheet/index.js

React Native StyleSheets with Theming Support

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useCreateStyles = exports.useThemes = exports.useTheme = exports.useMode = exports.ThemeProvider = void 0;
/* eslint-disable dot-notation */
/* eslint-disable indent */
const react_1 = require("react");
const react_native_1 = require("react-native");
const ts_deepmerge_1 = require("ts-deepmerge");
const themeContext = react_1.createContext({});
const generateTheme = (mode, themes) => {
    if (typeof themes !== 'object' ||
        !themes ||
        typeof themes.light !== 'object' ||
        typeof themes.dark !== 'object' ||
        !themes.light ||
        !themes.dark) {
        return {};
    }
    const constants = ('constants' in themes ? themes['constants'] : {}) || {};
    return ts_deepmerge_1.default(constants, themes[mode]);
};
exports.ThemeProvider = ({ children, mode: initialMode, themes: initialThemes }) => {
    const colorScheme = react_native_1.useColorScheme();
    const [mode, setMode] = react_1.useState(initialMode ?? 'auto');
    const [themes, setThemes] = react_1.useState(initialThemes);
    const [theme, setTheme] = react_1.useState(generateTheme(mode !== 'auto' ? mode : colorScheme || 'light', themes));
    react_1.useEffect(() => {
        mode !== 'auto' && setTheme(generateTheme(mode, themes));
    }, [mode, themes]);
    react_1.useEffect(() => {
        mode === 'auto' && setTheme(generateTheme(colorScheme || 'light', themes));
    }, [colorScheme, mode, themes]);
    return react_1.createElement(themeContext.Provider, {
        value: {
            mode,
            theme,
            themes,
            setMode,
            setThemes
        }
    }, children);
};
exports.useMode = () => {
    const { mode, setMode } = react_1.useContext(themeContext);
    return [mode, setMode];
};
exports.useTheme = () => react_1.useContext(themeContext).theme;
exports.useThemes = () => {
    const { themes, setThemes } = react_1.useContext(themeContext);
    return [themes, setThemes];
};
exports.useCreateStyles = cs => {
    const theme = exports.useTheme();
    return [react_native_1.StyleSheet.create(cs(theme)), theme];
};