template_0205

RN_TEMPLATE/app/screens/SecurityScreen.tsx

@@ -0,0 +1,81 @@
+import { FC, useCallback } from "react"
+import { TextStyle, ViewStyle } from "react-native"
+
+import { ListItem } from "@/components/ListItem"
+import { Screen } from "@/components/Screen"
+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 { useHeader } from "@/utils/useHeader"
+
+export const SecurityScreen: FC<AppStackScreenProps<"Security">> = function SecurityScreen({
+  navigation,
+}) {
+  const { themed, theme } = useAppTheme()
+
+  const navigateToChangePassword = useCallback(() => {
+    navigation.navigate("ChangePassword")
+  }, [navigation])
+
+  const navigateToChangeEmail = useCallback(() => {
+    navigation.navigate("ChangeEmail")
+  }, [navigation])
+
+  const navigateToSessionManagement = useCallback(() => {
+    navigation.navigate("SessionManagement")
+  }, [navigation])
+
+  useHeader(
+    {
+      title: translate("securityScreen:title"),
+      leftIcon: "back",
+      onLeftPress: () => navigation.goBack(),
+    },
+    [],
+  )
+
+  return (
+    <Screen
+      preset="scroll"
+      safeAreaEdges={["bottom"]}
+      contentContainerStyle={[$styles.container, themed($container)]}
+    >
+      <ListItem
+        tx="securityScreen:changePassword"
+        textStyle={themed($listItemText)}
+        leftIcon="lock"
+        leftIconColor={theme.colors.tint}
+        rightIcon="caretRight"
+        onPress={navigateToChangePassword}
+      />
+
+      <ListItem
+        tx="securityScreen:changeEmail"
+        textStyle={themed($listItemText)}
+        leftIcon="mail"
+        leftIconColor={theme.colors.tint}
+        rightIcon="caretRight"
+        onPress={navigateToChangeEmail}
+      />
+
+      <ListItem
+        tx="securityScreen:activeSessions"
+        textStyle={themed($listItemText)}
+        leftIcon="smartphone"
+        leftIconColor={theme.colors.tint}
+        rightIcon="caretRight"
+        onPress={navigateToSessionManagement}
+      />
+    </Screen>
+  )
+}
+
+const $container: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  paddingTop: spacing.lg,
+})
+
+const $listItemText: ThemedStyle<TextStyle> = () => ({
+  // Default styling
+})