Change language working partially

Not all translatinos are updated

App.tsx

@@ -5,7 +5,8 @@ import { Provider } from 'react-redux'
 
 import ThemeManager from 'src/utils/styles/ThemeManager'
 import { Index } from 'src/Index'
-import { store } from 'src/store'
+import { persistor, store } from 'src/store'
+import { PersistGate } from 'redux-persist/integration/react'
 
 const queryCache = new QueryCache()
 
@@ -30,7 +31,16 @@ const App: React.FC = () => {
       <ThemeManager>
         <ReactQueryCacheProvider queryCache={queryCache}>
           <Provider store={store}>
-            <Index />
+            <PersistGate persistor={persistor}>
+              {bootstrapped => {
+                if (bootstrapped) {
+                  require('src/i18n/i18n')
+                  return <Index />
+                } else {
+                  return <></>
+                }
+              }}
+            </PersistGate>
           </Provider>
         </ReactQueryCacheProvider>
       </ThemeManager>

app.config.ts

@@ -13,11 +13,22 @@ export default (): ExpoConfig => ({
   developmentClient: { silentLaunch: true },
   scheme: 'mastodonct',
   ios: {
+    infoPlist: {
+      CFBundleAllowMixedLocalizations: true
+    },
     splash: {
       image: './assets/splash.png',
       resizeMode: 'contain',
       backgroundColor: '#ffffff'
     }
   },
-  assetBundlePatterns: ['**/*']
+  locales: {
+    zh: {
+      CFBundleDisplayName: '我的嘟嘟'
+    },
+    en: {
+      CFBundleDisplayName: 'My Toots'
+    }
+  },
+  assetBundlePatterns: ['assets/*']
 })

package.json

@@ -18,13 +18,16 @@
     "expo-auth-session": "~2.0.0",
     "expo-av": "~8.6.0",
     "expo-image-picker": "~9.1.1",
+    "expo-localization": "^9.0.0",
     "expo-secure-store": "~9.2.0",
     "expo-splash-screen": "~0.6.1",
     "expo-status-bar": "~1.0.2",
+    "i18next": "^19.8.4",
     "ky": "^0.24.0",
     "lodash": "^4.17.20",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "react-i18next": "^11.7.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
     "react-native-appearance": "~0.3.3",
     "react-native-collapsible": "^1.5.3",
@@ -60,4 +63,4 @@
     "typescript": "~3.9.2"
   },
   "private": true
-}
+}

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
+  content?: string
-  navigateToParams?: {}
+  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 && (
+      <View style={styles.front}>
-        <Feather
+        {iconFront && (
-          name={icon}
+          <Feather
-          size={constants.FONT_SIZE_M + 2}
+            name={iconFront}
-          style={styles.iconLeading}
+            size={constants.FONT_SIZE_M + 2}
-          color={theme.primary}
+            color={theme[iconFrontColor]}
-        />
+            style={styles.iconFront}
-      )}
+          />
-      <Text style={{ color: theme.primary, fontSize: constants.FONT_SIZE_M }}>
+        )}
-        {title}
+        <Text style={[styles.text, { color: theme.primary }]} numberOfLines={1}>
-      </Text>
+          {title}
-      {navigateTo && (
+        </Text>
-        <Feather
+      </View>
-          name='chevron-right'
+      <View style={styles.back}>
-          size={24}
+        {content && (
-          color={theme.secondary}
+          <Text
-          style={styles.iconNavigation}
+            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={() => {
+      onPress={props.onPress}
-        navigation.navigate(props.navigateTo!, props.navigateToParams)
-      }}
     >
       <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: {
+  text: {
-    marginLeft: 'auto'
+    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 {
-import { RootState, store } from 'src/store'
+  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(
+  const localRegistered = useSelector(getLocalUrl)
-    (state: RootState) => state.instances.local.url
+  const publicDomain = useSelector(getRemoteUrl)
-  )
-  const publicDomain = getRemoteUrl(store.getState())
   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
+                <View style={styles.segmentsContainer}>
-                  values={[content[0].title, content[1].title]}
+                  <SegmentedControl
-                  selectedIndex={segment}
+                    values={[content[0].title, content[1].title]}
-                  onChange={onChangeSegment}
+                    selectedIndex={segment}
-                  style={{ width: 150, height: 30 }}
+                    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 localAccountId = useSelector(getLocalAccountId)
-  const localDomain = getLocalUrl(store.getState())
+  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: t('headers.local.segments.left'), page: 'Following' },
-        { title: '本站', page: 'Local' }
+        { 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'
+          onPress={() =>
-          navigateToParams={{
+            navigation.navigate('Screen-Me-Lists-List', {
-            list: d.id,
+              list: d.id,
-            title: d.title
+              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 { getLocalUrl } from 'src/utils/slices/instancesSlice'
-import { getLocalAccountId } 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(
+  const localRegistered = useSelector(getLocalUrl)
-    (state: RootState) => state.instances.local.url
-  )
 
   return (
     <ScrollView>
-      {localRegistered ? (
+      {localRegistered ? <MyInfo /> : <Login />}
-        <MyInfo id={getLocalAccountId(store.getState())!} />
+      {localRegistered && <MyCollections />}
-      ) : (
-        <Login />
-      )}
-      {localRegistered && (
-        <MyCollections id={getLocalAccountId(store.getState())!} />
-      )}
       <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 {
+const MyInfo: React.FC = () => {
-  id: Mastodon.Account['id']
+  const { t } = useTranslation()
-}
+  const navigation = useNavigation()
 
-const MyInfo: React.FC<Props> = ({ id }) => {
   return (
     <MenuContainer>
-      <MenuItem icon='mail' title='私信' navigateTo='Screen-Me-Conversations' />
+      <MenuItem
-      <MenuItem icon='bookmark' title='书签' navigateTo='Screen-Me-Bookmarks' />
+        iconFront='mail'
-      <MenuItem icon='star' title='喜欢' navigateTo='Screen-Me-Favourites' />
+        title={t('headers.me.conversations')}
-      <MenuItem icon='list' title='列表' navigateTo='Screen-Me-Lists' />
+        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 {
+const MyInfo: React.FC = () => {
-  id: Mastodon.Account['id']
+  const localAccountId = useSelector(getLocalAccountId)
-}
+  const { data } = useQuery(['Account', { id: localAccountId }], accountFetch)
-
-const MyInfo: React.FC<Props> = ({ id }) => {
-  const { data } = useQuery(['Account', { id }], 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: t('headers.public.segments.left'), page: 'LocalPublic' },
-        { title: '他站', page: 'RemotePublic' }
+        { 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,

yarn.lock

@@ -958,7 +958,7 @@
     pirates "^4.0.0"
     source-map-support "^0.5.16"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -1481,6 +1481,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/webpack-env@^1.16.0":
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.16.0.tgz#8c0a9435dfa7b3b1be76562f3070efb3f92637b4"
+  integrity sha512-Fx+NpfOO0CpeYX2g9bkvX8O5qh9wrU1sOF4g8sft4Mu7z+qfe387YlyY8w8daDyDsKY5vUxM0yxkAYnbkRbZEw==
+
 "@types/yargs-parser@*":
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
@@ -2763,6 +2768,13 @@ expo-linking@~1.0.4:
     qs "^6.5.0"
     url-parse "^1.4.4"
 
+expo-localization@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/expo-localization/-/expo-localization-9.0.0.tgz#1a61582f9ffb3cd28879a917dec347c444bff54e"
+  integrity sha512-jG84LA9yyQpLcSOKvR/WoIm0IHZ4tZQma//AJ9/DgBZC5zSB/aDbcjmCStQvqCePz8EMy1CKxRd+UlKYPLEiVw==
+  dependencies:
+    rtl-detect "^1.0.2"
+
 expo-location@~9.0.0:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/expo-location/-/expo-location-9.0.1.tgz#adf93b8adf5e9dcf9570cba1d66c8e3831329156"
@@ -3261,6 +3273,13 @@ hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   dependencies:
     react-is "^16.7.0"
 
+html-parse-stringify2@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
+  integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
+  dependencies:
+    void-elements "^2.0.1"
+
 htmlparser2-without-node-native@^3.9.2:
   version "3.9.2"
   resolved "https://registry.yarnpkg.com/htmlparser2-without-node-native/-/htmlparser2-without-node-native-3.9.2.tgz#b3ed050d877d0ff3465969e339877b7f9f6631f6"
@@ -3285,6 +3304,13 @@ http-errors@~1.7.2:
     statuses ">= 1.5.0 < 2"
     toidentifier "1.0.0"
 
+i18next@^19.8.4:
+  version "19.8.4"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.8.4.tgz#447718f2a26319b8debdbcc6fbc1a9761be7316b"
+  integrity sha512-FfVPNWv+felJObeZ6DSXZkj9QM1Ivvh7NcFCgA8XPtJWHz0iXVa9BUy+QY8EPrCLE+vWgDfV/sc96BgXVo6HAA==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+
 iconv-lite@^0.4.17:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -4937,6 +4963,14 @@ react-dom@16.13.1:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-i18next@^11.7.3:
+  version "11.7.3"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.7.3.tgz#256461c46baf5b3208c3c6860ca4e569fc7ed053"
+  integrity sha512-7sYZqVZgdaS9Z0ZH6nuJFErCD0zz5wK3jR4/xCrWjZcxHHF3GRu7BXdicbSPprZV4ZYz7LJzxxMHO7dg5Qb70A==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    html-parse-stringify2 "2.0.1"
+
 react-is@^16.12.0, react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -5305,6 +5339,11 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
+rtl-detect@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/rtl-detect/-/rtl-detect-1.0.2.tgz#8eca316f5c6563d54df4e406171dd7819adda67f"
+  integrity sha512-5X1422hvphzg2a/bo4tIDbjFjbJUOaPZwqE6dnyyxqwFqfR+tBcvfqapJr0o0VygATVCGKiODEewhZtKF+90AA==
+
 run-async@^2.2.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -6081,6 +6120,11 @@ vlq@^1.0.0:
   resolved "https://registry.yarnpkg.com/vlq/-/vlq-1.0.1.tgz#c003f6e7c0b4c1edd623fd6ee50bbc0d6a1de468"
   integrity sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==
 
+void-elements@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
+
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"