rn-custom-style-sheet/lib/module/Core/Provider/ThemeProvider.js

React Native component to select a specific value from a range of values.

import React, { useEffect, useMemo, useReducer } from 'react';
import { breakpointValue, getCurrentBreakpointIndex, sortBreakpointValues } from '../../BreakPoint';
import { getDevice } from '../../MediaQuery';
import { getNewSize } from '../../Scaling';
import { initialThemeState, ThemeContext } from '../Context';
import { getScreenResolution, useDeviceOrientation, useSystemAppearance, getGeneralScreenResolution } from '../Hooks';
import { AppThemeModeEnum, OrientationEnum, ReducerEventEnum, themeReducer } from '../Reducer';
import { StorageKeys } from '../../Theming';
import { Dimensions } from 'react-native';
import { UnitEnum } from '../Utils';
export function ThemeProvider({
  children,
  isSupportedOrientation,
  isUsedBuiltInAspectRatioFunction,
  withPortraitBehaviorInLandscapeMode,
  deviceForMediaQuery,
  guideLineLayout,
  guideLineBreakpoint,
  storage,
  appThemeName,
  baseSizeLayout
}) {
  const [state, dispatch] = useReducer(themeReducer, initialThemeState);
  useSystemAppearance(dispatch, storage);
  const localGuideLineLayout = useMemo(() => ({
    width: guideLineLayout?.width ?? 375,
    height: guideLineLayout?.height ?? 812
  }), [guideLineLayout]);
  useDeviceOrientation(dispatch, isSupportedOrientation, guideLineBreakpoint?.values ?? breakpointValue, withPortraitBehaviorInLandscapeMode, localGuideLineLayout, baseSizeLayout);
  useEffect(() => {
    const localAppThemeName = storage.getStorage(StorageKeys.AppThemeNameKey, '');
    const localAppThemeMode = storage.getStorage(StorageKeys.AppThemeModeKey, AppThemeModeEnum.System);
    const localSystemThemeMode = storage.getStorage(StorageKeys.SystemThemeModeKey, AppThemeModeEnum.System);
    const screenInitConfig = getScreenResolution(Dimensions.get('window'), withPortraitBehaviorInLandscapeMode);
    const generalScreenInitConfig = getGeneralScreenResolution(screenInitConfig.screenResolution, localGuideLineLayout, baseSizeLayout);

    // Trigger first time only
    if (localAppThemeName !== appThemeName && localAppThemeName.length <= 0) {
      storage.setStorage(StorageKeys.AppThemeNameKey, appThemeName);
    }
    dispatch({
      type: ReducerEventEnum.Initial,
      payload: {
        isSupportedOrientation,
        isUsedBuiltInAspectRatioFunction,
        withPortraitBehaviorInLandscapeMode,
        deviceForMediaQuery: getDevice(undefined, deviceForMediaQuery),
        guideLineLayout: localGuideLineLayout,
        guideLineBreakpoint: {
          values: guideLineBreakpoint?.values ?? breakpointValue,
          unit: guideLineBreakpoint?.unit ?? UnitEnum.Px,
          step: guideLineBreakpoint?.step ?? 0,
          keys: Object.keys(sortBreakpointValues(guideLineBreakpoint?.values ?? breakpointValue))
        },
        appThemeName: localAppThemeName || appThemeName,
        appThemeMode: localAppThemeMode,
        systemThemeMode: localSystemThemeMode,
        currentBreakpointIndex: getCurrentBreakpointIndex(guideLineBreakpoint?.values ?? breakpointValue, screenInitConfig.screenResolution.windowWidth),
        orientation: isSupportedOrientation ? screenInitConfig.orientation : OrientationEnum.Portrait,
        screenResolution: screenInitConfig.screenResolution,
        generalScreenResolution: generalScreenInitConfig
      }
    });
  }, [deviceForMediaQuery, guideLineBreakpoint, localGuideLineLayout, isSupportedOrientation, isUsedBuiltInAspectRatioFunction, withPortraitBehaviorInLandscapeMode, storage, appThemeName, baseSizeLayout]);
  const value = useMemo(() => {
    return {
      state: {
        ...state,
        guideLineLayout: {
          ...state.guideLineLayout,
          aspectRatioFunction: guideLineLayout?.aspectRatioFunction ?? (state.isUsedBuiltInAspectRatioFunction ? getNewSize(state.screenResolution) : size => size)
        }
      },
      dispatch,
      storage
    };
  }, [state, storage, guideLineLayout?.aspectRatioFunction]);
  if ((appThemeName?.length ?? 0) > 0 && (state.appThemeName?.length ?? 0) <= 0) {
    return /*#__PURE__*/React.createElement(React.Fragment, null);
  }
  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
    value: value
  }, children);
}
ThemeProvider.defaultProps = {
  appThemeName: '',
  isSupportedOrientation: false,
  isUsedBuiltInAspectRatioFunction: false,
  withPortraitBehaviorInLandscapeMode: false
};
//# sourceMappingURL=ThemeProvider.js.map