@applicaster/zapp-react-native-utils/theme/index.ts

Applicaster Zapp React Native utilities package

import React from "react";

import { populateConfigurationValues } from "../configurationUtils";

export const ThemeContext = React.createContext({
  themes: {},
  selectedThemeId: "",
  setSelectedThemeId: () => {},
});

/**
 * React Hook to retrieve the currently selected theme
 */
export function useTheme<
  T extends Record<string, any> =
    | BaseThemePropertiesTV
    | BaseThemePropertiesMobile,
>(): T {
  const { themes, selectedThemeId } = React.useContext(ThemeContext);

  return themes[selectedThemeId];
}

/**
 * React Hook to get the currently selected theme and the setter to select another theme
 */
export function useThemeSelector(): [string, (string) => void] {
  const { selectedThemeId, setSelectedThemeId } =
    React.useContext(ThemeContext);

  return [selectedThemeId, setSelectedThemeId];
}

/**
 * @typedef Theme
 * @param {Boolean} isTheme boolean flag set to true to be able to identify theme plugins
 * @param {String} id of the theme
 * @param {Array<Object>} props properties of the Theme, declared as manifest configuration fields
 */

/**
 * utility function to wrap the declaration of a theme plugin
 * Will inject a getter method which can be used to populate the theme with
 * the data pulled from the configuration, at run time.
 * @param {Object} options
 * @param {String} options.id id of the theme plugin
 * @param {Object} options.props properties of the theme, declared as manifest configuration fields
 * @return {Theme}
 */
export function createTheme(options) {
  const { id, props, decorateFeed } = options;

  return {
    isTheme: true,
    id,
    getProps: populateConfigurationValues(props),
    decorateFeed,
  };
}