DynamicStyleSheet.js

StyleSheet.js

import { Appearance, StyleSheet } from 'react-native';

function getTheme() {
  return Appearance.getColorScheme(;
}
                                   
function getStyles(styles) {
  return StyleSheet.create(typeof styles === 'function' ? styles(getTheme()) : styles);
}

/**
 * Example of
 *
 * const styles = StyleSheet.create((theme) => ({
 *   base: { color: theme.color }
 * }));
 */
const DynamicStyleSheet = {
  create(styles) {
    const cache = new Map();
    const stylesObject = getStyles(styles);
    const theme = getTheme();
    cache.set(theme, stylesObject);

    const dynamicStyles = {};
    for (let key in stylesObject) {
      if (Object.prototype.hasOwnProperty.call(stylesObject, key)) {
        dynamicStyles[key] = {
          enumerable: true,
          get() {
            const theme = getTheme();
            if (!cache.has(theme)) {
              cache.set(theme, getStyles(styles));
            }
            const styleObject = cache.get(theme) || {};
            return styleObject[key];
          }
        }
      }
    }

    return dynamicStyles;
  }