How to store things in asyncstorage?

Question

I'm having some problems setting up asyncstorage. example: if the user has switch to darkmode, darkmode should still be enabled when the user start the app again.

I'm also unsure if this is the right way of doing this.

any help is appreciated.--------------------------------------------------------------------------------

toggle.js

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

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

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

  React.useEffect(() => {
    restoreDarkModeAsync();
  }, []);

  const asyncStorageKey = "@key";

  const storeSetScheme = (isDark) => {
    const stringifiedIsDark = JSON.stringify(isDark);

    AsyncStorage.setItem(asyncStorageKey, stringifiedIsDark).catch((err) => {
      console.log(err);
    });
  };

  const restoreDarkModeAsync = () => {
    AsyncStorage.getItem(asyncStorageKey)
      .then((stringifiedIsDark) => {
        const parsedTodos = JSON.parse(stringifiedIsDark);

        if (!parsedTodos || typeof parsedTodos !== "object") return;

        setScheme(parsedTodos);
      })
      .catch((err) => {
        console.warn(err);
      });
  };

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

ThemeContext.js

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

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");
  }, [colorScheme]);

  const defaultTheme = {
    isDark,

    colors: isDark ? darkColors : lightColors,

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

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

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

Answer 1

useColorScheme() returns string or null . But you have next check in restoreDarkModeAsync

if (!parsedTodos || typeof parsedTodos !== "object") return;

that's why it fails.

And here is more correct and clean way to toggle scheme

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