Change language working partially

Not all translatinos are updated

src/components/Menu/Container.tsx

@@ -4,11 +4,24 @@ import { useTheme } from 'src/utils/styles/ThemeManager'
 
 import constants from 'src/utils/styles/constants'
 
-const MenuContainer: React.FC = ({ ...props }) => {
+export interface Props {
+  children: React.ReactNode
+  marginTop?: boolean
+}
+
+const MenuContainer: React.FC<Props> = ({ ...props }) => {
   const { theme } = useTheme()
 
   return (
-    <View style={[styles.base, { borderTopColor: theme.separator }]}>
+    <View
+      style={[
+        styles.base,
+        {
+          borderTopColor: theme.separator,
+          marginTop: props.marginTop ? constants.GLOBAL_PAGE_PADDING : 0
+        }
+      ]}
+    >
       {props.children}
     </View>
   )
@@ -17,7 +30,7 @@ const MenuContainer: React.FC = ({ ...props }) => {
 const styles = StyleSheet.create({
   base: {
     borderTopWidth: 1,
-    marginBottom: constants.SPACING_M
+    marginBottom: constants.GLOBAL_PAGE_PADDING
   }
 })
 

src/components/Menu/Item.tsx

@@ -1,61 +1,82 @@
 import React from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
-import { useNavigation } from '@react-navigation/native'
 import { Feather } from '@expo/vector-icons'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 
 import constants from 'src/utils/styles/constants'
+import { ColorDefinitions } from 'src/utils/styles/themes'
 
 export interface Props {
-  icon?: string
+  iconFront?: string
+  iconFrontColor?: ColorDefinitions
   title: string
-  navigateTo?: string
-  navigateToParams?: {}
+  content?: string
+  iconBack?: 'chevron-right' | 'check'
+  iconBackColor?: ColorDefinitions
+  onPress?: () => void
 }
 
-const Core: React.FC<Props> = ({ icon, title, navigateTo }) => {
+const Core: React.FC<Props> = ({
+  iconFront,
+  iconFrontColor,
+  title,
+  content,
+  iconBack,
+  iconBackColor
+}) => {
   const { theme } = useTheme()
+  iconFrontColor = iconFrontColor || 'primary'
+  iconBackColor = iconBackColor || 'secondary'
 
   return (
     <View style={styles.core}>
-      {icon && (
-        <Feather
-          name={icon}
-          size={constants.FONT_SIZE_M + 2}
-          style={styles.iconLeading}
-          color={theme.primary}
-        />
-      )}
-      <Text style={{ color: theme.primary, fontSize: constants.FONT_SIZE_M }}>
-        {title}
-      </Text>
-      {navigateTo && (
-        <Feather
-          name='chevron-right'
-          size={24}
-          color={theme.secondary}
-          style={styles.iconNavigation}
-        />
-      )}
+      <View style={styles.front}>
+        {iconFront && (
+          <Feather
+            name={iconFront}
+            size={constants.FONT_SIZE_M + 2}
+            color={theme[iconFrontColor]}
+            style={styles.iconFront}
+          />
+        )}
+        <Text style={[styles.text, { color: theme.primary }]} numberOfLines={1}>
+          {title}
+        </Text>
+      </View>
+      <View style={styles.back}>
+        {content && (
+          <Text
+            style={[styles.content, { color: theme.secondary }]}
+            numberOfLines={1}
+          >
+            {content}
+          </Text>
+        )}
+        {iconBack && (
+          <Feather
+            name={iconBack}
+            size={constants.FONT_SIZE_M + 2}
+            color={theme[iconBackColor]}
+            style={styles.iconBack}
+          />
+        )}
+      </View>
     </View>
   )
 }
 
 const MenuItem: React.FC<Props> = ({ ...props }) => {
   const { theme } = useTheme()
-  const navigation = useNavigation()
 
-  return props.navigateTo ? (
+  return props.onPress ? (
     <Pressable
       style={[styles.base, { borderBottomColor: theme.separator }]}
-      onPress={() => {
-        navigation.navigate(props.navigateTo!, props.navigateToParams)
-      }}
+      onPress={props.onPress}
     >
       <Core {...props} />
     </Pressable>
   ) : (
-    <View style={styles.base}>
+    <View style={[styles.base, { borderBottomColor: theme.separator }]}>
       <Core {...props} />
     </View>
   )
@@ -69,15 +90,31 @@ const styles = StyleSheet.create({
   core: {
     flex: 1,
     flexDirection: 'row',
-    alignItems: 'center',
     paddingLeft: constants.GLOBAL_PAGE_PADDING,
     paddingRight: constants.GLOBAL_PAGE_PADDING
   },
-  iconLeading: {
+  front: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  back: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  },
+  iconFront: {
     marginRight: 8
   },
-  iconNavigation: {
-    marginLeft: 'auto'
+  text: {
+    fontSize: constants.FONT_SIZE_M
+  },
+  content: {
+    fontSize: constants.FONT_SIZE_M
+  },
+  iconBack: {
+    marginLeft: 8
   }
 })
 

src/components/Timelines.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { Dimensions, FlatList, StyleSheet, Text, View } from 'react-native'
+import { Dimensions, FlatList, StyleSheet, View } from 'react-native'
 import SegmentedControl from '@react-native-community/segmented-control'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import { useSelector } from 'react-redux'
@@ -7,8 +7,11 @@ import { Feather } from '@expo/vector-icons'
 
 import Timeline from './Timelines/Timeline'
 import sharedScreens from 'src/screens/Shared/sharedScreens'
-import { getRemoteUrl, InstancesState } from 'src/utils/slices/instancesSlice'
-import { RootState, store } from 'src/store'
+import {
+  getLocalUrl,
+  getRemoteUrl,
+  InstancesState
+} from 'src/utils/slices/instancesSlice'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import { useNavigation } from '@react-navigation/native'
 import getCurrentTab from 'src/utils/getCurrentTab'
@@ -42,15 +45,10 @@ export interface Props {
 const Timelines: React.FC<Props> = ({ name, content }) => {
   const navigation = useNavigation()
   const { theme } = useTheme()
-  const localRegistered = useSelector(
-    (state: RootState) => state.instances.local.url
-  )
-  const publicDomain = getRemoteUrl(store.getState())
+  const localRegistered = useSelector(getLocalUrl)
+  const publicDomain = useSelector(getRemoteUrl)
   const [segment, setSegment] = useState(0)
   const [renderHeader, setRenderHeader] = useState(false)
-  const [segmentManuallyTriggered, setSegmentManuallyTriggered] = useState(
-    false
-  )
 
   useEffect(() => {
     const nbr = setTimeout(() => setRenderHeader(true), 50)
@@ -60,8 +58,6 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
   const horizontalPaging = useRef<FlatList>(null!)
 
   const onChangeSegment = useCallback(({ nativeEvent }) => {
-    setSegmentManuallyTriggered(true)
-    setSegment(nativeEvent.selectedSegmentIndex)
     horizontalPaging.current.scrollToIndex({
       index: nativeEvent.selectedSegmentIndex
     })
@@ -90,13 +86,8 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
     },
     [localRegistered]
   )
-  const flOnMomentumScrollEnd = useCallback(
-    () => setSegmentManuallyTriggered(false),
-    []
-  )
   const flOnScroll = useCallback(
     ({ nativeEvent }) =>
-      !segmentManuallyTriggered &&
       setSegment(
         nativeEvent.contentOffset.x <= Dimensions.get('window').width / 2
           ? 0
@@ -114,12 +105,13 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
           ...(renderHeader &&
             localRegistered && {
               headerCenter: () => (
-                <SegmentedControl
-                  values={[content[0].title, content[1].title]}
-                  selectedIndex={segment}
-                  onChange={onChangeSegment}
-                  style={{ width: 150, height: 30 }}
-                />
+                <View style={styles.segmentsContainer}>
+                  <SegmentedControl
+                    values={[content[0].title, content[1].title]}
+                    selectedIndex={segment}
+                    onChange={onChangeSegment}
+                  />
+                </View>
               ),
               headerRight: () => (
                 <Feather
@@ -147,7 +139,6 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
               keyExtractor={flKeyExtrator}
               getItemLayout={flGetItemLayout}
               showsHorizontalScrollIndicator={false}
-              onMomentumScrollEnd={flOnMomentumScrollEnd}
             />
           )
         }}
@@ -159,6 +150,9 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
 }
 
 const styles = StyleSheet.create({
+  segmentsContainer: {
+    flexBasis: '60%'
+  },
   flatList: {
     width: Dimensions.get('window').width,
     height: '100%'

src/components/Timelines/Timeline/Shared/ActionsStatus.tsx

@@ -8,17 +8,15 @@ import {
   Text,
   View
 } from 'react-native'
-import Toast from 'react-native-toast-message'
 import { useMutation, useQueryCache } from 'react-query'
 import { Feather } from '@expo/vector-icons'
-import { findIndex } from 'lodash'
 
 import client from 'src/api/client'
 import { getLocalAccountId } from 'src/utils/slices/instancesSlice'
-import { store } from 'src/store'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import constants from 'src/utils/styles/constants'
 import { toast } from 'src/components/toast'
+import { useSelector } from 'react-redux'
 
 const fireMutation = async ({
   id,
@@ -87,7 +85,7 @@ const ActionsStatus: React.FC<Props> = ({ queryKey, status }) => {
   const iconColorAction = (state: boolean) =>
     state ? theme.primary : theme.secondary
 
-  const localAccountId = getLocalAccountId(store.getState())
+  const localAccountId = useSelector(getLocalAccountId)
   const [bottomSheetVisible, setBottomSheetVisible] = useState(false)
 
   const queryCache = useQueryCache()

src/components/Timelines/Timeline/Shared/Avatar.tsx

@@ -34,7 +34,7 @@ const styles = StyleSheet.create({
   image: {
     width: '100%',
     height: '100%',
-    borderRadius: 8
+    borderRadius: 6
   }
 })
 

src/components/Timelines/Timeline/Shared/HeaderDefault.tsx

@@ -2,19 +2,18 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 import { useNavigation } from '@react-navigation/native'
 import { Feather } from '@expo/vector-icons'
-import Toast from 'react-native-toast-message'
 import { useMutation, useQueryCache } from 'react-query'
 
 import Emojis from './Emojis'
 import relativeTime from 'src/utils/relativeTime'
 import client from 'src/api/client'
 import { getLocalAccountId, getLocalUrl } from 'src/utils/slices/instancesSlice'
-import { store } from 'src/store'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import constants from 'src/utils/styles/constants'
 import BottomSheet from 'src/components/BottomSheet'
 import BottomSheetRow from 'src/components/BottomSheet/Row'
 import { toast } from 'src/components/toast'
+import { useSelector } from 'react-redux'
 
 const fireMutation = async ({
   id,
@@ -115,8 +114,8 @@ const HeaderDefault: React.FC<Props> = ({
   const { theme } = useTheme()
 
   const navigation = useNavigation()
-  const localAccountId = getLocalAccountId(store.getState())
-  const localDomain = getLocalUrl(store.getState())
+  const localAccountId = useSelector(getLocalAccountId)
+  const localDomain = useSelector(getLocalUrl)
   const [since, setSince] = useState(relativeTime(created_at))
   const [modalVisible, setModalVisible] = useState(false)
 

src/i18n/en/_all.ts

@@ -0,0 +1,3 @@
+export default {
+  common: require('./common').default
+}

src/i18n/en/common.ts

@@ -0,0 +1,31 @@
+export default {
+  headers: {
+    local: {
+      segments: {
+        left: 'Following',
+        right: 'Local'
+      }
+    },
+    public: {
+      segments: {
+        left: 'Federated',
+        right: 'Others'
+      }
+    },
+    notifications: 'Notifications',
+    me: {
+      root: 'My Mastodon',
+      conversations: 'Messages',
+      bookmarks: 'Booksmarks',
+      favourites: 'Favourites',
+      lists: {
+        root: 'Lists',
+        list: 'List {{list}}'
+      },
+      settings: {
+        root: 'Settings',
+        language: 'Language'
+      }
+    }
+  }
+}

src/i18n/i18n.ts

@@ -0,0 +1,50 @@
+import i18next from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import * as Localization from 'expo-localization'
+
+import zh from 'src/i18n/zh/_all'
+import en from 'src/i18n/en/_all'
+import {
+  changeLanguage,
+  getSettingsLanguage
+} from 'src/utils/slices/settingsSlice'
+import { store } from 'src/store'
+  console.log(store.getState())
+if (!getSettingsLanguage(store.getState())) {
+  console.log('No default locale of app')
+  const deviceLocal = Localization.locale
+  if (deviceLocal.startsWith('zh')) {
+    store.dispatch(changeLanguage('zh'))
+  } else {
+    store.dispatch(changeLanguage('en'))
+  }
+}
+
+i18next.use(initReactI18next).init({
+  lng: getSettingsLanguage(store.getState()),
+  fallbackLng: 'en',
+  supportedLngs: ['zh', 'en'],
+  nonExplicitSupportedLngs: true,
+
+  ns: ['common'],
+  defaultNS: 'common',
+
+  resources: {
+    zh: zh,
+    en: en
+  },
+
+  saveMissing: true,
+  missingKeyHandler: (lng, ns, key, fallbackValue) => {
+    console.warn('i18n missing: ' + ns + ' : ' + key)
+  },
+
+  // react options
+  interpolation: {
+    escapeValue: false
+  },
+
+  debug: true
+})
+
+export default i18next

src/i18n/zh/_all.ts

@@ -0,0 +1,4 @@
+export default {
+  common: require('./common').default,
+  settings: require('./settings').default
+}

src/i18n/zh/common.ts

@@ -0,0 +1,31 @@
+export default {
+  headers: {
+    local: {
+      segments: {
+        left: '我的关注',
+        right: '本站嘟嘟'
+      }
+    },
+    public: {
+      segments: {
+        left: '跨站关注',
+        right: '外站嘟嘟'
+      }
+    },
+    notifications: '我的通知',
+    me: {
+      root: '我的长毛象',
+      conversations: '私信',
+      bookmarks: '书签',
+      favourites: '喜欢',
+      lists: {
+        root: '列表',
+        list: '列表 {{list}}'
+      },
+      settings: {
+        root: '设置',
+        language: '语言'
+      }
+    }
+  }
+}

src/i18n/zh/settings.ts

@@ -0,0 +1,11 @@
+export default {
+  content: {
+    language: {
+      title: '切换语言',
+      options: {
+        zh: '简体中文',
+        en: 'English'
+      }
+    }
+  }
+}

src/screens/Local.tsx

@@ -1,14 +1,17 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 
 import Timelines from 'src/components/Timelines'
 
 const ScreenLocal: React.FC = () => {
+  const { t } = useTranslation()
+
   return (
     <Timelines
       name='Screen-Local-Root'
       content={[
-        { title: '关注', page: 'Following' },
-        { title: '本站', page: 'Local' }
+        { title: t('headers.local.segments.left'), page: 'Following' },
+        { title: t('headers.local.segments.right'), page: 'Local' }
       ]}
     />
   )

src/screens/Me.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
+import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
 import ScreenMeRoot from 'src/screens/Me/Root'
@@ -16,6 +17,7 @@ import { RootState } from 'src/store'
 const Stack = createNativeStackNavigator()
 
 const ScreenMe: React.FC = () => {
+  const { t } = useTranslation()
   const localRegistered = useSelector(
     (state: RootState) => state.instances.local.url
   )
@@ -32,49 +34,49 @@ const ScreenMe: React.FC = () => {
                 headerStyle: { backgroundColor: 'rgba(255, 255, 255, 0)' },
                 headerCenter: () => <></>
               }
-            : { headerTitle: '我的长毛象' }
+            : { headerTitle: t('headers.me.root') }
         }
       />
       <Stack.Screen
         name='Screen-Me-Conversations'
         component={ScreenMeConversations}
         options={{
-          headerTitle: '私信'
+          headerTitle: t('headers.me.conversations')
         }}
       />
       <Stack.Screen
         name='Screen-Me-Bookmarks'
         component={ScreenMeBookmarks}
         options={{
-          headerTitle: '书签'
+          headerTitle: t('headers.me.bookmarks')
         }}
       />
       <Stack.Screen
         name='Screen-Me-Favourites'
         component={ScreenMeFavourites}
         options={{
-          headerTitle: '喜欢'
+          headerTitle: t('headers.me.favourites')
         }}
       />
       <Stack.Screen
         name='Screen-Me-Lists'
         component={ScreenMeLists}
         options={{
-          headerTitle: '列表'
+          headerTitle: t('headers.me.lists.root')
         }}
       />
       <Stack.Screen
         name='Screen-Me-Lists-List'
         component={ScreenMeListsList}
         options={({ route }: any) => ({
-          headerTitle: `列表：${route.params.title}`
+          headerTitle: t('headers.me.lists.list', { list: route.params.title })
         })}
       />
       <Stack.Screen
         name='Screen-Me-Settings'
         component={ScreenMeSettings}
         options={{
-          headerTitle: '设置'
+          headerTitle: t('headers.me.settings.root')
         }}
       />
 

src/screens/Me/Lists.tsx

@@ -1,3 +1,4 @@
+import { useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { ActivityIndicator, Text } from 'react-native'
 import { useQuery } from 'react-query'
@@ -6,6 +7,7 @@ import { MenuContainer, MenuItem } from 'src/components/Menu'
 import { listsFetch } from 'src/utils/fetches/listsFetch'
 
 const ScreenMeLists: React.FC = () => {
+  const navigation = useNavigation()
   const { status, data } = useQuery(['Lists'], listsFetch)
 
   let lists
@@ -20,13 +22,14 @@ const ScreenMeLists: React.FC = () => {
       lists = data?.map((d: Mastodon.List, i: number) => (
         <MenuItem
           key={i}
-          icon='list'
+          iconFront='list'
           title={d.title}
-          navigateTo='Screen-Me-Lists-List'
-          navigateToParams={{
-            list: d.id,
-            title: d.title
-          }}
+          onPress={() =>
+            navigation.navigate('Screen-Me-Lists-List', {
+              list: d.id,
+              title: d.title
+            })
+          }
         />
       ))
       break

src/screens/Me/Root.tsx

@@ -2,8 +2,7 @@ import React from 'react'
 import { ScrollView } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import { RootState, store } from 'src/store'
-import { getLocalAccountId } from 'src/utils/slices/instancesSlice'
+import { getLocalUrl } from 'src/utils/slices/instancesSlice'
 
 import Login from './Root/Login'
 import MyInfo from './Root/MyInfo'
@@ -12,20 +11,12 @@ import Settings from './Root/Settings'
 import Logout from './Root/Logout'
 
 const ScreenMeRoot: React.FC = () => {
-  const localRegistered = useSelector(
-    (state: RootState) => state.instances.local.url
-  )
+  const localRegistered = useSelector(getLocalUrl)
 
   return (
     <ScrollView>
-      {localRegistered ? (
-        <MyInfo id={getLocalAccountId(store.getState())!} />
-      ) : (
-        <Login />
-      )}
-      {localRegistered && (
-        <MyCollections id={getLocalAccountId(store.getState())!} />
-      )}
+      {localRegistered ? <MyInfo /> : <Login />}
+      {localRegistered && <MyCollections />}
       <Settings />
       {localRegistered && <Logout />}
     </ScrollView>

src/screens/Me/Root/MyCollections.tsx

@@ -1,17 +1,35 @@
+import { useNavigation } from '@react-navigation/native'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
+
 import { MenuContainer, MenuItem } from 'src/components/Menu'
 
-export interface Props {
-  id: Mastodon.Account['id']
-}
+const MyInfo: React.FC = () => {
+  const { t } = useTranslation()
+  const navigation = useNavigation()
 
-const MyInfo: React.FC<Props> = ({ id }) => {
   return (
     <MenuContainer>
-      <MenuItem icon='mail' title='私信' navigateTo='Screen-Me-Conversations' />
-      <MenuItem icon='bookmark' title='书签' navigateTo='Screen-Me-Bookmarks' />
-      <MenuItem icon='star' title='喜欢' navigateTo='Screen-Me-Favourites' />
-      <MenuItem icon='list' title='列表' navigateTo='Screen-Me-Lists' />
+      <MenuItem
+        iconFront='mail'
+        title={t('headers.me.conversations')}
+        onPress={() => navigation.navigate('Screen-Me-Conversations')}
+      />
+      <MenuItem
+        iconFront='bookmark'
+        title={t('headers.me.bookmarks')}
+        onPress={() => navigation.navigate('Screen-Me-Bookmarks')}
+      />
+      <MenuItem
+        iconFront='star'
+        title={t('headers.me.favourites')}
+        onPress={() => navigation.navigate('Screen-Me-Favourites')}
+      />
+      <MenuItem
+        iconFront='list'
+        title={t('headers.me.lists.root')}
+        onPress={() => navigation.navigate('Screen-Me-Lists')}
+      />
     </MenuContainer>
   )
 }

src/screens/Me/Root/MyInfo.tsx

@@ -4,13 +4,12 @@ import { useQuery } from 'react-query'
 import { accountFetch } from 'src/utils/fetches/accountFetch'
 import AccountHeader from 'src/screens/Shared/Account/Header'
 import AccountInformation from 'src/screens/Shared/Account/Information'
+import { useSelector } from 'react-redux'
+import { getLocalAccountId } from 'src/utils/slices/instancesSlice'
 
-export interface Props {
-  id: Mastodon.Account['id']
-}
-
-const MyInfo: React.FC<Props> = ({ id }) => {
-  const { data } = useQuery(['Account', { id }], accountFetch)
+const MyInfo: React.FC = () => {
+  const localAccountId = useSelector(getLocalAccountId)
+  const { data } = useQuery(['Account', { id: localAccountId }], accountFetch)
 
   return (
     <>

src/screens/Me/Root/Settings.tsx

@@ -1,10 +1,20 @@
+import { useNavigation } from '@react-navigation/native'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
+
 import { MenuContainer, MenuItem } from 'src/components/Menu'
 
 const Settings: React.FC = () => {
+  const { t } = useTranslation()
+  const navigation = useNavigation()
+
   return (
     <MenuContainer>
-      <MenuItem icon='settings' title='设置' navigateTo='Screen-Me-Settings' />
+      <MenuItem
+        iconFront='settings'
+        title={t('headers.me.settings.root')}
+        onPress={() => navigation.navigate('Screen-Me-Settings')}
+      />
     </MenuContainer>
   )
 }

src/screens/Me/Settings.tsx

@@ -1,9 +1,53 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { ActionSheetIOS } from 'react-native'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { MenuContainer } from 'src/components/Menu'
+import { MenuContainer, MenuItem } from 'src/components/Menu'
+import {
+  changeLanguage,
+  getSettingsLanguage
+} from 'src/utils/slices/settingsSlice'
 
 const ScreenMeSettings: React.FC = () => {
-  return <MenuContainer></MenuContainer>
+  const { t, i18n } = useTranslation('settings')
+  const language = useSelector(getSettingsLanguage)
+  const dispatch = useDispatch()
+  console.log(i18n.language)
+
+  return (
+    <MenuContainer marginTop={true}>
+      <MenuItem
+        title={t('content.language.title')}
+        content={t(`settings:content.language.options.${language}`)}
+        iconBack='chevron-right'
+        onPress={() =>
+          ActionSheetIOS.showActionSheetWithOptions(
+            {
+              options: [
+                t('settings:content.language.options.zh'),
+                t('settings:content.language.options.en'),
+                '取消'
+              ],
+              cancelButtonIndex: 2
+            },
+            buttonIndex => {
+              switch (buttonIndex) {
+                case 0:
+                  dispatch(changeLanguage('zh'))
+                  i18n.changeLanguage('zh')
+                  break
+                case 1:
+                  dispatch(changeLanguage('en'))
+                  i18n.changeLanguage('en')
+                  break
+              }
+            }
+          )
+        }
+      />
+    </MenuContainer>
+  )
 }
 
 export default ScreenMeSettings

src/screens/Notifications.tsx

@@ -6,16 +6,20 @@ import sharedScreens from 'src/screens/Shared/sharedScreens'
 import { useSelector } from 'react-redux'
 import { RootState } from 'src/store'
 import PleaseLogin from 'src/components/PleaseLogin'
+import { useTranslation } from 'react-i18next'
 
 const Stack = createNativeStackNavigator()
 
 const ScreenNotifications: React.FC = () => {
+  const { t } = useTranslation()
   const localRegistered = useSelector(
     (state: RootState) => state.instances.local.url
   )
 
   return (
-    <Stack.Navigator screenOptions={{ headerTitle: '通知' }}>
+    <Stack.Navigator
+      screenOptions={{ headerTitle: t('headers.notifications') }}
+    >
       <Stack.Screen name='Screen-Notifications-Root'>
         {() =>
           localRegistered ? <Timeline page='Notifications' /> : <PleaseLogin />

src/screens/Public.tsx

@@ -1,14 +1,17 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 
 import Timelines from 'src/components/Timelines'
 
 const ScreenPublic: React.FC = () => {
+  const { t } = useTranslation()
+
   return (
     <Timelines
       name='Screen-Public-Root'
       content={[
-        { title: '跨站', page: 'LocalPublic' },
-        { title: '他站', page: 'RemotePublic' }
+        { title: t('headers.public.segments.left'), page: 'LocalPublic' },
+        { title: t('headers.public.segments.right'), page: 'RemotePublic' }
       ]}
     />
   )

src/store.ts

@@ -3,6 +3,7 @@ import { persistReducer, persistStore } from 'redux-persist'
 import createSecureStore from 'redux-persist-expo-securestore'
 
 import instancesSlice from 'src/utils/slices/instancesSlice'
+import settingsSlice from 'src/utils/slices/settingsSlice'
 
 const secureStorage = createSecureStore()
 
@@ -11,9 +12,15 @@ const instancesPersistConfig = {
   storage: secureStorage
 }
 
+const settingsPersistConfig = {
+  key: 'settings',
+  storage: secureStorage
+}
+
 const store = configureStore({
   reducer: {
-    instances: persistReducer(instancesPersistConfig, instancesSlice)
+    instances: persistReducer(instancesPersistConfig, instancesSlice),
+    settings: persistReducer(settingsPersistConfig, settingsSlice)
   },
   middleware: getDefaultMiddleware({
     serializableCheck: {

src/utils/slices/settingsSlice.ts

@@ -0,0 +1,77 @@
+import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import { RootState } from 'src/store'
+// import client from 'src/api/client'
+
+export type SettingsState = {
+  language: 'zh' | 'en' | undefined
+}
+
+const initialState = {
+  language: undefined
+}
+
+// export const updateLocal = createAsyncThunk(
+//   'instances/updateLocal',
+//   async ({
+//     url,
+//     token
+//   }: {
+//     url?: InstancesState['local']['url']
+//     token?: InstancesState['local']['token']
+//   }) => {
+//     if (!url || !token) {
+//       return initialStateLocal
+//     }
+
+//     const {
+//       body: { id }
+//     } = await client({
+//       method: 'get',
+//       instance: 'remote',
+//       instanceUrl: url,
+//       endpoint: `accounts/verify_credentials`,
+//       headers: { Authorization: `Bearer ${token}` }
+//     })
+
+//     const { body: preferences } = await client({
+//       method: 'get',
+//       instance: 'remote',
+//       instanceUrl: url,
+//       endpoint: `preferences`,
+//       headers: { Authorization: `Bearer ${token}` }
+//     })
+
+//     return {
+//       url,
+//       token,
+//       account: {
+//         id,
+//         preferences
+//       }
+//     }
+//   }
+// )
+
+const settingsSlice = createSlice({
+  name: 'settings',
+  initialState: initialState as SettingsState,
+  reducers: {
+    changeLanguage: (
+      state,
+      action: PayloadAction<NonNullable<SettingsState['language']>>
+    ) => {
+      state.language = action.payload
+    }
+  }
+  // extraReducers: builder => {
+  //   builder.addCase(updateLocal.fulfilled, (state, action) => {
+  //     state.local = action.payload
+  //   })
+  // }
+})
+
+export const getSettingsLanguage = (state: RootState) => state.settings.language
+
+export const { changeLanguage } = settingsSlice.actions
+export default settingsSlice.reducer

src/utils/styles/constants.ts

@@ -11,7 +11,7 @@ export default {
   SPACING_L: 24,
   SPACING_XL: 40,
 
-  GLOBAL_PAGE_PADDING: 16, // SPACING_M
+  GLOBAL_PAGE_PADDING: 24, // SPACING_M
   GLOBAL_SPACING_BASE: 8, // SPACING_S
 
   AVATAR_S: 52,