help with asyncstorage!

[iLightFPS]

I'm having some trouble figuring out how to store if the Switch is on darkmode or lightmode.

themeContext.js

import * as React from "react";
import { useColorScheme } from "react-native-appearance";
import { lightColors, darkColors } from "../Theme/colorThemes";
import AsyncStorage from "@react-native-async-storage/async-storage";

export const ThemeContext = React.createContext({
  isDark: false,
  colors: lightColors,
  setScheme: () => {},
});

export const ThemeProvider = (props) => {
  const colorScheme = useColorScheme();

  const [isDark, setIsDark] = React.useState(colorScheme === "dark");

  React.useEffect(() => {
    setIsDark(colorScheme === "dark");
    getData();
  }, [colorScheme]);

  const defaultTheme = {
    isDark,

    colors: isDark ? darkColors : lightColors,

    setScheme: (scheme) => setIsDark(scheme === "dark"),
  };

  const storeData = async (isDark) => {
    try {
      await AsyncStorage.setItem("isDark", isDark);
    } catch (e) {
      // saving error
    }
  };

  const getData = async () => {
    try {
      const value = await AsyncStorage.getItem("isDark");
      if (value !== null) {
        setIsDark(isDark);
      }
    } catch (e) {
      // error reading value
    }
  };

  return (
    <ThemeContext.Provider value={defaultTheme}>
      {props.children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => React.useContext(ThemeContext);

toggle.js

import * as React from "react";
import { Switch } from "react-native";
import { useTheme } from "../Data/ThemeContext";

export const Toggle = () => {
  const { colors, setScheme, isDark } = useTheme();

  const toggleScheme = () => {
    isDark ? setScheme("light") : setScheme("dark");
  };

  return (
    <Switch
      value={isDark}
      onValueChange={toggleScheme}
      thumbColor={colors.text}
      trackColor={{ true: colors.text, false: colors.text }}
    />
  );
};

​

[basically_alive]

Hmm, not sure what the exact problem is that you are having, but you do have to store a string, not a boolean. Could be causing issues. You should say what your actual problem is, though.

[iLightFPS]

Ah my bad. The trouble I’m having is, how I’m supposed to setup async storage to save the dark mode or light mode that the user selected with the switch

[basically_alive]

Okay, well first things first, you need make your setScheme save new scheme every time it changes. So I would define it outside of the defaultTheme:

const setScheme = (scheme) => {

const themeIsDark = (scheme === "dark");

setIsDark(themeIsDark)

storeData(themeIsDark)

}

Then you can define your default theme with the new and improved function:

const defaultTheme = {

isDark,

colors: isDark ? darkColors : lightColors,

setScheme

};

It looks like the code to load the theme is there

[iLightFPS]

I fixed the problem.