expo-app/src/Screens/Settings/index.js

import { useContext, useState } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import Card from "../../Components/Card";
import { AppContext, AppStyles, Constants } from "../../utils";
import { Divider } from "../../Components/Divider";
import { useTranslation } from "react-i18next";
import MySwitch from "../../Components/Switch";
import { MyPickerModal } from "../../Components/Modal";

export default function SettingsScreen() {
  const appContext = useContext(AppContext);
  const { t } = useTranslation();
  const [modalAppColorSchemeVisible, setAppColorSchemeModalVisible] =
    useState(false);
  const [modalAppLanguageVisible, setModalAppLanguageVisible] = useState(false);

  return (
    <View
      style={{
        height: "100%",
        backgroundColor: appContext.appTheme.backgroundColor,
      }}
    >
      <Card>
        <Text
          style={[
            AppStyles.typography20,
            {
              color: appContext.appTheme.text,
              marginBottom: 10,
            },
          ]}
        >
          {t("screens.settings.settingsCardTitle")}
        </Text>

        <TouchableOpacity
          onPress={() => setModalAppLanguageVisible(true)}
          style={{ marginBottom: 6 }}
        >
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <Text
              style={[
                AppStyles.typography14,
                { color: appContext.appTheme.text },
              ]}
            >
              {t("screens.settings.languageText")}
            </Text>
            <Text style={{ color: appContext.appTheme.colors.primary }}>
              {
                Constants.languages.find(
                  (language) => language.name === appContext.appLanguage
                ).label
              }
            </Text>
          </View>
        </TouchableOpacity>

        <TouchableOpacity onPress={() => setAppColorSchemeModalVisible(true)}>
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <Text
              style={[
                AppStyles.typography14,
                { color: appContext.appTheme.text },
              ]}
            >
              {t("screens.settings.appColorSchemeText")}
            </Text>
            <Text style={{ color: appContext.appTheme.colors.primary }}>
              {appContext.appColorScheme === "auto"
                ? t("screens.settings.appColorSchemePicker.auto")
                : appContext.appColorScheme === "dark"
                ? t("screens.settings.appColorSchemePicker.dark")
                : t("screens.settings.appColorSchemePicker.light")}
            </Text>
          </View>
        </TouchableOpacity>

        <Divider />
        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <View style={{ width: "80%" }}>
            <Text
              style={[
                AppStyles.typography16,
                { color: appContext.appTheme.text },
              ]}
            >
              {t("screens.settings.expertModeTitle")}
            </Text>
            <Text
              style={[
                AppStyles.typography14,
                { color: appContext.appTheme.textSecondary },
              ]}
            >
              {t("screens.settings.expertModeDescription")}
            </Text>
          </View>
          <MySwitch
            value={appContext.isUserExpertModeEnabled}
            onValueChange={(e) => appContext.setIsUserExpertModeEnabled(e)}
          />
        </View>
      </Card>

      <Card>
        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <Text style={{ color: appContext.appTheme.text }}>
            Developer Mode
          </Text>
          <MySwitch
            value={appContext.isUserDeveloperModeEnabled}
            onValueChange={(e) => appContext.setUserIsDeveloperModeEnabled(e)}
          />
        </View>

        <MyPickerModal
          isOpen={modalAppColorSchemeVisible}
          setIsOpen={setAppColorSchemeModalVisible}
          items={[
            {
              label: t("screens.settings.appColorSchemePicker.auto"),
              onPress: () => appContext.setAppColorScheme("auto"),
            },
            {
              label: t("screens.settings.appColorSchemePicker.dark"),
              onPress: () => appContext.setAppColorScheme("dark"),
              selected: appContext.appColorScheme === "dark",
            },
            {
              label: t("screens.settings.appColorSchemePicker.light"),
              onPress: () => appContext.setAppColorScheme("light"),
              selected: appContext.appColorScheme === "light",
            },
          ]}
        />

        <MyPickerModal
          isOpen={modalAppLanguageVisible}
          setIsOpen={setModalAppLanguageVisible}
          items={Constants.languages.map((language) => {
            return {
              label: language.label,
              onPress: () => appContext.setAppLanguage(language.name),
              selected: appContext.appLanguage === language.name,
            };
          })}
        />
      </Card>
    </View>
  );
}