Fix back button

Using customized component, need to get `navigation` from props instead of hooks

app.config.ts

@@ -13,7 +13,7 @@ export default (): ExpoConfig => ({
   developmentClient: { silentLaunch: true },
   scheme: 'mastodonct',
   ios: {
-    bundleIdentifier: 'com.xmflsct.mastodon-app',
+    bundleIdentifier: 'com.xmflsct.mastodon',
     infoPlist: {
       CFBundleAllowMixedLocalizations: true
     },
@@ -23,13 +23,13 @@ export default (): ExpoConfig => ({
       backgroundColor: '#ffffff'
     }
   },
-  locales: {
-    zh: {
-      CFBundleDisplayName: '我的嘟嘟'
-    },
-    en: {
-      CFBundleDisplayName: 'My Toots'
-    }
-  },
+  // locales: {
+  //   zh: {
+  //     CFBundleDisplayName: '我的嘟嘟'
+  //   },
+  //   en: {
+  //     CFBundleDisplayName: 'My Toots'
+  //   }
+  // },
   assetBundlePatterns: ['assets/*']
 })

src/api/client.ts

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { store, RootState } from 'src/store'
+import { store, RootState } from '@root/store'
 
 const client = async ({
   method,

src/components/BottomSheet.tsx

@@ -67,7 +67,7 @@ const BottomSheet: React.FC<Props> = ({ children, visible, handleDismiss }) => {
   return (
     <Modal animated animationType='fade' visible={visible} transparent>
       <View
-        style={[styles.overlay, { backgroundColor: theme.border }]}
+        style={[styles.overlay, { backgroundColor: theme.backgroundOverlay }]}
         {...panResponder.panHandlers}
       >
         <Animated.View
@@ -84,10 +84,12 @@ const BottomSheet: React.FC<Props> = ({ children, visible, handleDismiss }) => {
             style={[styles.handle, { backgroundColor: theme.background }]}
           />
           {children}
-          <ButtonRow
-            onPress={() => closeModal.start(() => handleDismiss())}
-            text='取消'
-          />
+          <View style={styles.button}>
+            <ButtonRow
+              onPress={() => closeModal.start(() => handleDismiss())}
+              text='取消'
+            />
+          </View>
         </Animated.View>
       </View>
     </Modal>
@@ -108,6 +110,10 @@ const styles = StyleSheet.create({
     height: StyleConstants.Spacing.S / 2,
     borderRadius: 100,
     top: -StyleConstants.Spacing.M * 2
+  },
+  button: {
+    paddingLeft: StyleConstants.Spacing.Global.PagePadding * 2,
+    paddingRight: StyleConstants.Spacing.Global.PagePadding * 2
   }
 })
 

src/components/Header/Left.tsx

@@ -5,13 +5,25 @@ import { Pressable, StyleSheet, Text } from 'react-native'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { StyleConstants } from '@utils/styles/constants'
 
-export interface Props {
+type PropsBase = {
   onPress: () => void
-  text?: string
+}
+
+export interface PropsText extends PropsBase {
+  text: string
   icon?: any
 }
 
-const HeaderLeft: React.FC<Props> = ({ onPress, text, icon }) => {
+export interface PropsIcon extends PropsBase {
+  text?: string
+  icon: any
+}
+
+const HeaderLeft: React.FC<PropsText | PropsIcon> = ({
+  onPress,
+  text,
+  icon
+}) => {
   const { theme } = useTheme()
 
   return (
@@ -21,7 +33,7 @@ const HeaderLeft: React.FC<Props> = ({ onPress, text, icon }) => {
         styles.base,
         {
           backgroundColor: theme.backgroundGradientStart,
-          ...(icon && { height: 44, width: 44 })
+          ...(icon && { height: 44, width: 44, marginLeft: -9 })
         }
       ]}
     >

src/components/Header/Right.tsx

@@ -35,7 +35,7 @@ const HeaderRight: React.FC<PropsText | PropsIcon> = ({
         styles.base,
         {
           backgroundColor: theme.backgroundGradientStart,
-          ...(icon && { height: 44, width: 44 })
+          ...(icon && { height: 44, width: 44, marginRight: -9 })
         }
       ]}
     >

src/components/Menu/Header.tsx

@@ -12,7 +12,7 @@ const MenuHeader: React.FC<Props> = ({ heading }) => {
 
   return (
     <View style={[styles.base, { borderBottomColor: theme.separator }]}>
-      <Text>{heading}</Text>
+      <Text style={[styles.text, { color: theme.primary }]}>{heading}</Text>
     </View>
   )
 }
@@ -23,6 +23,9 @@ const styles = StyleSheet.create({
     paddingLeft: StyleConstants.Spacing.Global.PagePadding,
     paddingRight: StyleConstants.Spacing.Global.PagePadding,
     paddingBottom: StyleConstants.Spacing.S
+  },
+  text: {
+    fontSize: StyleConstants.Font.Size.S
   }
 })
 

src/components/Timelines.tsx

@@ -42,7 +42,7 @@ export interface Props {
 
 const Timelines: React.FC<Props> = ({ name, content }) => {
   const navigation = useNavigation()
-  const { mode, theme } = useTheme()
+  const { mode } = useTheme()
   const localRegistered = useSelector(getLocalUrl)
   const publicDomain = useSelector(getRemoteUrl)
   const [segment, setSegment] = useState(0)

src/components/Timelines/Timeline.tsx

@@ -61,14 +61,7 @@ const Timeline: React.FC<Props> = ({
     fetchMore,
     refetch
   } = useInfiniteQuery(queryKey, timelineFetch, {
-    getFetchMore: (last, all) => {
-      const allLastGroup = all[all.length - 1]!
-      return (
-        last?.toots.length > 0 &&
-        allLastGroup.toots[allLastGroup.toots.length - 1].id !==
-          last?.toots[last?.toots.length - 1].id
-      )
-    }
+    getFetchMore: last => last?.toots.length > 0
   })
   const flattenData = data ? data.flatMap(d => [...d?.toots]) : []
   const flattenPointer = data ? data.flatMap(d => [d?.pointer]) : []

src/components/Timelines/Timeline/Conversation.tsx

@@ -53,7 +53,7 @@ const TimelineConversation: React.FC<Props> = ({
   return (
     <View style={styles.conversationView}>
       <View style={styles.header}>
-        <TimelineAvatar account={item.accounts[0]} />
+        <TimelineAvatar queryKey={queryKey} account={item.accounts[0]} />
         <TimelineHeaderConversation
           queryKey={queryKey}
           id={item.id}

src/components/Timelines/Timeline/Default.tsx

@@ -25,6 +25,7 @@ const TimelineDefault: React.FC<Props> = ({
   queryKey,
   highlighted = false
 }) => {
+  const isRemotePublic = queryKey[0] === 'RemotePublic'
   const navigation = useNavigation()
 
   let actualStatus = item.reblog ? item.reblog : item
@@ -38,6 +39,7 @@ const TimelineDefault: React.FC<Props> = ({
 
   const tootOnPress = useCallback(
     () =>
+      !isRemotePublic &&
       navigation.navigate('Screen-Shared-Toot', {
         toot: actualStatus
       }),
@@ -75,20 +77,29 @@ const TimelineDefault: React.FC<Props> = ({
       )}
 
       <View style={styles.header}>
-        <TimelineAvatar account={actualStatus.account} />
-        <TimelineHeaderDefault queryKey={queryKey} status={actualStatus} />
+        <TimelineAvatar
+          {...(!isRemotePublic && { queryKey })}
+          account={actualStatus.account}
+        />
+        <TimelineHeaderDefault
+          {...(!isRemotePublic && { queryKey })}
+          status={actualStatus}
+        />
       </View>
-      
+
       <Pressable onPress={tootOnPress} children={tootChildren} />
-      <View
-        style={{
-          paddingLeft: highlighted
-            ? 0
-            : StyleConstants.Avatar.S + StyleConstants.Spacing.S
-        }}
-      >
-        <TimelineActions queryKey={queryKey} status={actualStatus} />
-      </View>
+
+      {!isRemotePublic && (
+        <View
+          style={{
+            paddingLeft: highlighted
+              ? 0
+              : StyleConstants.Avatar.S + StyleConstants.Spacing.S
+          }}
+        >
+          <TimelineActions queryKey={queryKey} status={actualStatus} />
+        </View>
+      )}
     </View>
   )
 }

src/components/Timelines/Timeline/Notifications.tsx

@@ -86,7 +86,7 @@ const TimelineNotifications: React.FC<Props> = ({
       />
 
       <View style={styles.header}>
-        <TimelineAvatar account={actualAccount} />
+        <TimelineAvatar queryKey={queryKey} account={actualAccount} />
         <TimelineHeaderNotification notification={notification} />
       </View>
 

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

@@ -4,16 +4,18 @@ import { useNavigation } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
 
 export interface Props {
+  queryKey?: App.QueryKey
   account: Mastodon.Account
 }
 
-const TimelineAvatar: React.FC<Props> = ({ account }) => {
+const TimelineAvatar: React.FC<Props> = ({ queryKey, account }) => {
   const navigation = useNavigation()
   // Need to fix go back root
   const onPress = useCallback(() => {
-    navigation.navigate('Screen-Shared-Account', {
-      id: account.id
-    })
+    queryKey &&
+      navigation.navigate('Screen-Shared-Account', {
+        id: account.id
+      })
   }, [])
 
   return (

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

@@ -61,7 +61,7 @@ const TimelineHeaderDefault: React.FC<Props> = ({ queryKey, status }) => {
 
   return (
     <View style={styles.base}>
-      <View style={styles.nameAndMeta}>
+      <View style={queryKey ? { flexBasis: '80%' } : { flexBasis: '100%' }}>
         <View style={styles.name}>
           {emojis?.length ? (
             <Emojis

src/screens/Me.tsx

@@ -12,12 +12,10 @@ import ScreenMeListsList from '@screens/Me/Root/Lists/List'
 import ScreenMeSettings from '@screens/Me/Settings'
 
 import { HeaderLeft } from '@root/components/Header'
-import { useNavigation } from '@react-navigation/native'
 
 const Stack = createNativeStackNavigator()
 
 const ScreenMe: React.FC = () => {
-  const navigation = useNavigation()
   const { t } = useTranslation()
 
   return (
@@ -34,7 +32,7 @@ const ScreenMe: React.FC = () => {
       <Stack.Screen
         name='Screen-Me-Conversations'
         component={ScreenMeConversations}
-        options={{
+        options={({ navigation }: any) => ({
           headerTitle: t('meConversations:heading'),
           headerLeft: () => (
             <HeaderLeft
@@ -42,12 +40,12 @@ const ScreenMe: React.FC = () => {
               onPress={() => navigation.goBack()}
             />
           )
-        }}
+        })}
       />
       <Stack.Screen
         name='Screen-Me-Bookmarks'
         component={ScreenMeBookmarks}
-        options={{
+        options={({ navigation }: any) => ({
           headerTitle: t('meBookmarks:heading'),
           headerLeft: () => (
             <HeaderLeft
@@ -55,12 +53,12 @@ const ScreenMe: React.FC = () => {
               onPress={() => navigation.goBack()}
             />
           )
-        }}
+        })}
       />
       <Stack.Screen
         name='Screen-Me-Favourites'
         component={ScreenMeFavourites}
-        options={{
+        options={({ navigation }: any) => ({
           headerTitle: t('meFavourites:heading'),
           headerLeft: () => (
             <HeaderLeft
@@ -68,12 +66,12 @@ const ScreenMe: React.FC = () => {
               onPress={() => navigation.goBack()}
             />
           )
-        }}
+        })}
       />
       <Stack.Screen
         name='Screen-Me-Lists'
         component={ScreenMeLists}
-        options={{
+        options={({ navigation }: any) => ({
           headerTitle: t('meLists:heading'),
           headerLeft: () => (
             <HeaderLeft
@@ -81,12 +79,12 @@ const ScreenMe: React.FC = () => {
               onPress={() => navigation.goBack()}
             />
           )
-        }}
+        })}
       />
       <Stack.Screen
         name='Screen-Me-Lists-List'
         component={ScreenMeListsList}
-        options={({ route }: any) => ({
+        options={({ route, navigation }: any) => ({
           headerTitle: t('meListsList:heading', { list: route.params.title }),
           headerLeft: () => (
             <HeaderLeft
@@ -99,7 +97,7 @@ const ScreenMe: React.FC = () => {
       <Stack.Screen
         name='Screen-Me-Settings'
         component={ScreenMeSettings}
-        options={{
+        options={({ navigation }: any) => ({
           headerTitle: t('meSettings:heading'),
           headerLeft: () => (
             <HeaderLeft
@@ -107,7 +105,7 @@ const ScreenMe: React.FC = () => {
               onPress={() => navigation.goBack()}
             />
           )
-        }}
+        })}
       />
 
       {sharedScreens(Stack)}

src/screens/Me/Root/Login.tsx

@@ -185,7 +185,6 @@ const Login: React.FC = () => {
             onChangeText={onChangeText}
             autoCapitalize='none'
             autoCorrect={false}
-            autoFocus
             clearButtonMode='never'
             keyboardType='url'
             textContentType='URL'

src/screens/Shared/Compose.tsx

@@ -19,7 +19,6 @@ import {
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
-import { useNavigation } from '@react-navigation/native'
 import sha256 from 'crypto-js/sha256'
 
 import { store } from '@root/store'
@@ -308,10 +307,10 @@ export interface Props {
         }
       | undefined
   }
+  navigation: any
 }
 
-const Compose: React.FC<Props> = ({ route: { params } }) => {
-  const navigation = useNavigation()
+const Compose: React.FC<Props> = ({ route: { params }, navigation }) => {
   const { theme } = useTheme()
 
   const [hasKeyboard, setHasKeyboard] = useState(false)

src/screens/Shared/Compose/EditAttachment.tsx

@@ -1,4 +1,3 @@
-import { useNavigation } from '@react-navigation/native'
 import React, {
   Dispatch,
   useCallback,
@@ -39,15 +38,15 @@ export interface Props {
       composeDispatch: Dispatch<PostAction>
     }
   }
+  navigation: any
 }
 
 const ComposeEditAttachment: React.FC<Props> = ({
   route: {
     params: { attachment, composeDispatch }
-  }
+  },
+  navigation
 }) => {
-  const navigation = useNavigation()
-
   const { theme } = useTheme()
 
   const [altText, setAltText] = useState<string | undefined>(

src/screens/Shared/Webview.tsx

@@ -1,4 +1,3 @@
-import { useNavigation } from '@react-navigation/native'
 import React, { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ActionSheetIOS } from 'react-native'
@@ -24,7 +23,6 @@ const ScreenSharedWebview: React.FC<Props> = ({
     params: { uri }
   }
 }) => {
-  const navigation = useNavigation()
   const { t } = useTranslation('sharedWebview')
   const [title, setTitle] = useState<string>(t('heading.loading'))
   const [bottomSheet, showBottomSheet] = useState(false)
@@ -34,7 +32,7 @@ const ScreenSharedWebview: React.FC<Props> = ({
     <Stack.Navigator>
       <Stack.Screen
         name='Screen-Shared-Webview-Root'
-        options={{
+        options={({ navigation }) => ({
           title,
           headerLeft: () => (
             <HeaderLeft
@@ -48,7 +46,7 @@ const ScreenSharedWebview: React.FC<Props> = ({
               onPress={() => showBottomSheet(true)}
             />
           )
-        }}
+        })}
       >
         {() => (
           <>

src/screens/Shared/sharedScreens.tsx

@@ -8,11 +8,9 @@ import Compose from '@screens/Shared/Compose'
 import ComposeEditAttachment from '@screens/Shared/Compose/EditAttachment'
 import ScreenSharedSearch from '@screens/Shared/Search'
 import { useTranslation } from 'react-i18next'
-import { useNavigation } from '@react-navigation/native'
 import { HeaderLeft } from '@root/components/Header'
 
 const sharedScreens = (Stack: any) => {
-  const navigation = useNavigation()
   const { t } = useTranslation()
 
   return [
@@ -20,20 +18,20 @@ const sharedScreens = (Stack: any) => {
       key='Screen-Shared-Account'
       name='Screen-Shared-Account'
       component={ScreenSharedAccount}
-      options={{
+      options={({ navigation }: any) => ({
         headerTranslucent: true,
         headerStyle: { backgroundColor: 'rgba(255, 255, 255, 0)' },
         headerCenter: () => null,
         headerLeft: () => (
           <HeaderLeft icon='chevron-left' onPress={() => navigation.goBack()} />
         )
-      }}
+      })}
     />,
     <Stack.Screen
       key='Screen-Shared-Hashtag'
       name='Screen-Shared-Hashtag'
       component={ScreenSharedHashtag}
-      options={({ route }: any) => ({
+      options={({ route, navigation }: any) => ({
         title: `#${decodeURIComponent(route.params.hashtag)}`,
         headerLeft: () => (
           <HeaderLeft icon='chevron-left' onPress={() => navigation.goBack()} />
@@ -44,7 +42,7 @@ const sharedScreens = (Stack: any) => {
       key='Screen-Shared-Toot'
       name='Screen-Shared-Toot'
       component={ScreenSharedToot}
-      options={() => ({
+      options={({ navigation }: any) => ({
         title: t('sharedToot:heading'),
         headerLeft: () => (
           <HeaderLeft icon='chevron-left' onPress={() => navigation.goBack()} />