clean approach for removing shadows in dark mode

[iamhaaamed]

I have created a ThemeContext like this:

type ThemeProps = {
  id: number;
  dark: boolean;
  colors: ColorValues;
};

const STORAGE_ID = 'APP_THEME';

const ThemeContext = React.createContext<{
  theme: ThemeProps;
  changeTheme: (t: ThemeProps) => void;
  toggleTheme: () => void;
}>({
  theme: {
    id: 1,
    dark: false,
    //@ts-ignore
    colors: {},
  },
  changeTheme: () => null,
  toggleTheme: () => null,
});

export const ThemeProvider = React.memo(
  ({ theme, children }: { theme?: ThemeProps; children: ReactElement }) => {
    const colorScheme = Appearance.getColorScheme();

    const systemTheme = useMemo(() => {
      const isDark = colorScheme === 'dark';
      return isDark ? darkTheme : lightTheme;
    }, [colorScheme]);

    const [themeObj, changeTheme] = useState(theme || systemTheme);

    const changeStatusBarColor = React.useCallback(
      (isDark: boolean) => {
        StatusBar.setBarStyle(isDark ? 'light-content' : 'dark-content');
        if (Platform.OS === 'android') {
          StatusBar.setBackgroundColor(themeObj.colors.fullWhite);
        }
      },
      [themeObj.colors.fullWhite],
    );

    const setTheme = (t: ThemeProps) => {
      changeStatusBarColor(t.dark);
      storage.setItem(STORAGE_ID, t.id.toString());
      changeTheme(t);
    };

    React.useEffect(() => {
      (async () => {
        const storedThemeID = await storage.getItem(STORAGE_ID, '1');
        if (storedThemeID !== themeObj.id.toString()) {
          const isLight = storedThemeID === '1';
          changeStatusBarColor(isLight ? false : true);
          changeTheme(isLight ? lightTheme : darkTheme);
        }
      })();
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const contextValue = useMemo(
      () => ({
        theme: themeObj,
        changeTheme: (t: ThemeProps) => setTheme(t),
        toggleTheme: () => {
          if (themeObj.id === 1) {
            setTheme(darkTheme);
          } else {
            setTheme(lightTheme);
          }
        },
      }),
      // eslint-disable-next-line react-hooks/exhaustive-deps
      [themeObj.id],
    );
    return (
      <ThemeContext.Provider value={contextValue}>
        {!!themeObj && children}
      </ThemeContext.Provider>
    );
  },
);

export default ThemeContext;

import ThemeContext from 'context/ThemeProvider';
import { useContext } from 'react';

const useAppTheme = () => {
  return useContext(ThemeContext);
};

export default useAppTheme;

import { ColorValues } from '@types';
import { extendTheme } from 'native-base';

const getStyles = (colors: ColorValues) => {
  return extendTheme({});
};

export default getStyles;

and inject it like this to NativeBaseProvider:

const AppProvider = React.memo(({ children }: GeneralProps) => {
  const { theme } = useAppTheme();
  const nativeBaseTheme = baseStyles(theme.colors);
  return (
    <SafeAreaView style={[{ backgroundColor: theme.colors.fullWhite }]}>
      <NavigationContainer>
        <NativeBaseProvider theme={nativeBaseTheme}>
          <Notifications />
          {children}
        </NativeBaseProvider>
      </NavigationContainer>
    </SafeAreaView>
  );
});

now i want to remove shadows for components in dark mode. how can I do that with a clean approach and not doing it like this in my components:

const useStyles = (colors: ColorValues) => {
  const { theme } = useAppTheme();

  return StyleSheet.create({
    containerStyles: {
      borderRadius: 8,
      ...(!theme.dark && {
        elevation: 2,
        shadowColor: colors.gray['900'],
        shadowOffset: {
          width: 0,
          height: 2,
        },
        shadowOpacity: 0.12,
        shadowRadius: 8,
      }),
    },
  });
};

export default Card;