diligent-react-native/screens/SettingsScreen.jsx

import React, { useEffect, useState } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { useTheme } from "@styles";
import { THEME, LANGUAGE } from "@constants/localStorage";
import { storeObject, getObjectData } from "@service/asyncStorage";
import Layout from "@components/Layout/Layout";
import { useTranslation } from "react-i18next";

const SettingsScreen = ({ navigation }) => {
  const { t, i18n } = useTranslation();
  const { colors, setScheme, isDark } = useTheme();
  const [selectedTheme, setSelectedTheme] = useState({});
  const [selectedLanguage, setSelectedLanguage] = useState({});
  const themes = [
    {
      id: 1,
      name: t("common.light"),
      type: "light",
    },
    {
      id: 2,
      name: t("common.dark"),
      type: "dark",
    },
  ];

  const languages = [
    {
      id: 1,
      name: t("common.serbian"),
      code: "sr",
    },
    {
      id: 2,
      name: t("common.english"),
      code: "en",
    },
  ];

  const handleLanguage = async (language) => {
    setSelectedLanguage(language);
    await i18n.changeLanguage(language.code);
    await storeObject(LANGUAGE, language);
  };

  const handleTheme = async (theme) => {
    setSelectedTheme(theme);
    if (theme.type === "dark") {
      setScheme("dark");
    } else if (theme.type === "light") {
      setScheme("light");
    }
    await storeObject(THEME, theme);
  };

  useEffect(() => {
    async function handleThemeChange() {
      const theme = await getObjectData(THEME);
      if (theme !== null) {
        setSelectedTheme(theme);
      } else if (isDark) {
        setSelectedTheme(themes[1]);
      } else {
        setSelectedTheme(themes[0]);
      }
    }

    handleThemeChange();
  }, []);

  useEffect(() => {
    async function handleLanguageChange() {
      const language = await getObjectData(LANGUAGE);
      if (language !== null) {
        setSelectedLanguage(language);
        //await i18n.changeLanguage(language.code);
      } else {
        setSelectedLanguage(languages[0]);
        //await i18n.changeLanguage(languages[0].code);
      }
    }

    handleLanguageChange();
  }, []);

  return (
    <Layout>
      <Text style={{ color: colors.textPrimary, paddingLeft: 20 }}>
        {t("common.theme")}
      </Text>
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          marginTop: 20,
          marginHorizontal: 20,
          paddingBottom: 20,
          borderBottomWidth: 1,
          borderBottomColor: colors.borderSecondary,
        }}
      >
        {themes.map((theme) => (
          <TouchableOpacity
            key={theme.id}
            style={{ flex: 1 }}
            onPress={() => handleTheme(theme)}
          >
            <View
              style={[
                {
                  alignItems: "center",
                  borderWidth: 1,
                  paddingVertical: 8,
                  borderColor: colors.borderSecondary,
                },
                theme.id === 1 && { marginRight: 18 },
                selectedTheme.id === theme.id && {
                  backgroundColor: "#aa18ea",
                },
              ]}
            >
              <Text style={{ color: colors.textPrimary }}>{theme.name}</Text>
            </View>
          </TouchableOpacity>
        ))}
      </View>
      <Text
        style={{ color: colors.textPrimary, paddingLeft: 20, marginTop: 20 }}
      >
        {t("common.language")}
      </Text>
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          marginTop: 20,
          marginHorizontal: 20,
          paddingBottom: 20,
          borderBottomWidth: 1,
          borderBottomColor: colors.borderSecondary,
        }}
      >
        {languages.map((lang) => (
          <TouchableOpacity
            key={lang.id}
            style={{ flex: 1 }}
            onPress={() => handleLanguage(lang)}
          >
            <View
              style={[
                {
                  alignItems: "center",
                  borderWidth: 1,
                  paddingVertical: 8,
                  borderColor: colors.borderSecondary,
                },
                lang.id === 1 && { marginRight: 18 },
                selectedLanguage.id === lang.id && {
                  backgroundColor: "#aa18ea",
                },
              ]}
            >
              <Text style={{ color: colors.textPrimary }}>{lang.name}</Text>
            </View>
          </TouchableOpacity>
        ))}
      </View>
    </Layout>
  );
};

export default SettingsScreen;