109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
|
import { FC, useCallback } from "react"
|
||
|
|
import { TextStyle, View, ViewStyle } from "react-native"
|
||
|
|
import i18n from "i18next"
|
||
|
|
|
||
|
|
import { Icon } from "@/components/Icon"
|
||
|
|
import { ListItem } from "@/components/ListItem"
|
||
|
|
import { Screen } from "@/components/Screen"
|
||
|
|
import { Text } from "@/components/Text"
|
||
|
|
import { translate } from "@/i18n/translate"
|
||
|
|
import { AppStackScreenProps } from "@/navigators/navigationTypes"
|
||
|
|
import { useAppTheme } from "@/theme/context"
|
||
|
|
import { $styles } from "@/theme/styles"
|
||
|
|
import type { ThemedStyle } from "@/theme/types"
|
||
|
|
import { s } from "@/utils/responsive"
|
||
|
|
import { useHeader } from "@/utils/useHeader"
|
||
|
|
|
||
|
|
// Available languages with their native names
|
||
|
|
const LANGUAGES = [
|
||
|
|
{ code: "en", name: "English", nativeName: "English" },
|
||
|
|
{ code: "zh", name: "Chinese", nativeName: "中文" },
|
||
|
|
{ code: "ja", name: "Japanese", nativeName: "日本語" },
|
||
|
|
{ code: "ko", name: "Korean", nativeName: "한국어" },
|
||
|
|
{ code: "es", name: "Spanish", nativeName: "Español" },
|
||
|
|
{ code: "fr", name: "French", nativeName: "Français" },
|
||
|
|
{ code: "ar", name: "Arabic", nativeName: "العربية" },
|
||
|
|
{ code: "hi", name: "Hindi", nativeName: "हिन्दी" },
|
||
|
|
]
|
||
|
|
|
||
|
|
export const LanguageScreen: FC<AppStackScreenProps<"Language">> = function LanguageScreen({
|
||
|
|
navigation,
|
||
|
|
}) {
|
||
|
|
const { themed, theme } = useAppTheme()
|
||
|
|
|
||
|
|
const currentLanguage = i18n.language?.split("-")[0] || "en"
|
||
|
|
|
||
|
|
const handleSelectLanguage = useCallback(
|
||
|
|
(langCode: string) => {
|
||
|
|
if (langCode !== currentLanguage) {
|
||
|
|
i18n.changeLanguage(langCode)
|
||
|
|
}
|
||
|
|
navigation.goBack()
|
||
|
|
},
|
||
|
|
[currentLanguage, navigation],
|
||
|
|
)
|
||
|
|
|
||
|
|
useHeader(
|
||
|
|
{
|
||
|
|
title: translate("languageScreen:title"),
|
||
|
|
leftIcon: "back",
|
||
|
|
onLeftPress: () => navigation.goBack(),
|
||
|
|
},
|
||
|
|
[],
|
||
|
|
)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Screen
|
||
|
|
preset="scroll"
|
||
|
|
safeAreaEdges={["bottom"]}
|
||
|
|
contentContainerStyle={[$styles.container, themed($container)]}
|
||
|
|
>
|
||
|
|
<Text size="xs" style={themed($hint)}>
|
||
|
|
{translate("languageScreen:selectHint")}
|
||
|
|
</Text>
|
||
|
|
|
||
|
|
<View style={themed($listContainer)}>
|
||
|
|
{LANGUAGES.map((lang) => {
|
||
|
|
const isSelected = currentLanguage === lang.code
|
||
|
|
return (
|
||
|
|
<ListItem
|
||
|
|
key={lang.code}
|
||
|
|
text={lang.nativeName}
|
||
|
|
textStyle={isSelected ? themed($selectedText) : undefined}
|
||
|
|
RightComponent={
|
||
|
|
isSelected ? <Icon icon="check" size={20} color={theme.colors.tint} /> : undefined
|
||
|
|
}
|
||
|
|
onPress={() => handleSelectLanguage(lang.code)}
|
||
|
|
style={themed($listItem)}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</View>
|
||
|
|
</Screen>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const $container: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
||
|
|
paddingTop: spacing.md,
|
||
|
|
})
|
||
|
|
|
||
|
|
const $hint: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
|
||
|
|
color: colors.textDim,
|
||
|
|
marginBottom: spacing.md,
|
||
|
|
})
|
||
|
|
|
||
|
|
const $listContainer: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
||
|
|
backgroundColor: colors.palette.neutral200,
|
||
|
|
borderRadius: s(8),
|
||
|
|
overflow: "hidden",
|
||
|
|
})
|
||
|
|
|
||
|
|
const $listItem: ThemedStyle<ViewStyle> = () => ({
|
||
|
|
// Item styling handled by ListItem
|
||
|
|
})
|
||
|
|
|
||
|
|
const $selectedText: ThemedStyle<TextStyle> = ({ colors }) => ({
|
||
|
|
color: colors.tint,
|
||
|
|
fontWeight: "600",
|
||
|
|
})
|