Fixed #495

src/components/Menu/Container.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { View } from 'react-native'
 import { StyleConstants } from '@utils/styles/constants'
 
 export interface Props {
@@ -7,14 +7,16 @@ export interface Props {
 }
 
 const MenuContainer: React.FC<Props> = ({ children }) => {
-  return <View style={styles.base}>{children}</View>
+  return (
+    <View
+      style={{
+        paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
+        marginBottom: StyleConstants.Spacing.Global.PagePadding
+      }}
+    >
+      {children}
+    </View>
+  )
 }
 
-const styles = StyleSheet.create({
-  base: {
-    paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
-    marginBottom: StyleConstants.Spacing.Global.PagePadding
-  }
-})
-
 export default MenuContainer

src/components/Menu/Row.tsx

@@ -5,7 +5,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { ColorDefinitions } from '@utils/styles/themes'
 import React, { useMemo } from 'react'
-import { View } from 'react-native'
+import { Text, View } from 'react-native'
 import { Flow } from 'react-native-animated-spinkit'
 import { State, Switch, TapGestureHandler } from 'react-native-gesture-handler'
 
@@ -65,6 +65,7 @@ const MenuRow: React.FC<Props> = ({
     >
       <TapGestureHandler
         onHandlerStateChange={async ({ nativeEvent }) => {
+          if (typeof iconBack !== 'string') return // Let icon back handles the gesture
           if (nativeEvent.state === State.ACTIVE && !loading) {
             if (screenReaderEnabled && switchOnValueChange) {
               switchOnValueChange()
@@ -79,12 +80,13 @@ const MenuRow: React.FC<Props> = ({
             style={{
               flex: 1,
               flexDirection: 'row',
-              paddingTop: StyleConstants.Spacing.S
+              justifyContent: 'space-between',
+              marginTop: StyleConstants.Spacing.S
             }}
           >
             <View
               style={{
-                flexGrow: 3,
+                flex: 3,
                 flexDirection: 'row',
                 alignItems: 'center'
               }}

src/components/Timeline/Shared/HeaderAndroid.tsx

@@ -28,8 +28,9 @@ const TimelineHeaderAndroid: React.FC<Props> = ({ queryKey, rootQueryKey, status
     url: status.url || status.uri
   })
   const mAccount = menuAccount({
+    type: 'status',
     openChange,
-    id: status.account.id,
+    account: status.account,
     queryKey
   })
   const mStatus = menuStatus({ status, queryKey, rootQueryKey })

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -45,8 +45,9 @@ const TimelineHeaderDefault: React.FC<Props> = ({
     copiableContent
   })
   const mAccount = menuAccount({
+    type: 'status',
     openChange,
-    id: status.account.id,
+    account: status.account,
     queryKey
   })
   const mStatus = menuStatus({ status, queryKey, rootQueryKey })

src/components/Timeline/Shared/HeaderNotification.tsx

@@ -31,8 +31,9 @@ const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
     url: notification.status?.url || notification.status?.uri
   })
   const mAccount = menuAccount({
+    type: 'status',
     openChange,
-    id: notification.status?.account.id,
+    account: notification.status?.account,
     queryKey
   })
   const mStatus = menuStatus({ status: notification.status, queryKey })

src/components/contextMenu/account.tsx

@@ -1,5 +1,8 @@
 import haptics from '@components/haptics'
 import { displayMessage } from '@components/Message'
+import { useNavigation } from '@react-navigation/native'
+import { NativeStackNavigationProp } from '@react-navigation/native-stack'
+import { TabSharedStackParamList } from '@utils/navigation/navigators'
 import {
   QueryKeyRelationship,
   useRelationshipMutation,
@@ -19,25 +22,29 @@ import { useQueryClient } from 'react-query'
 import { useSelector } from 'react-redux'
 
 const menuAccount = ({
+  type,
   openChange,
-  id,
+  account,
   queryKey,
   rootQueryKey
 }: {
+  type: 'status' | 'account' // Where the action is coming from
   openChange: boolean
-  id?: Mastodon.Account['id']
+  account?: Pick<Mastodon.Account, 'id' | 'username'>
   queryKey?: QueryKeyTimeline
   rootQueryKey?: QueryKeyTimeline
 }): ContextMenu[][] => {
-  if (!id) return []
+  if (!account) return []
 
+  const navigation =
+    useNavigation<NativeStackNavigationProp<TabSharedStackParamList, any, undefined>>()
   const { theme } = useTheme()
   const { t } = useTranslation('componentContextMenu')
 
   const menus: ContextMenu[][] = [[]]
 
   const instanceAccount = useSelector(getInstanceAccount, (prev, next) => prev.id === next.id)
-  const ownAccount = instanceAccount?.id === id
+  const ownAccount = instanceAccount?.id === account.id
 
   const [enabled, setEnabled] = useState(openChange)
   useEffect(() => {
@@ -45,12 +52,12 @@ const menuAccount = ({
       setEnabled(true)
     }
   }, [openChange, enabled])
-  const { data, isFetching } = useRelationshipQuery({ id, options: { enabled } })
+  const { data, isFetching } = useRelationshipQuery({ id: account.id, options: { enabled } })
 
   const queryClient = useQueryClient()
   const timelineMutation = useTimelineMutation({
     onSuccess: (_, params) => {
-      queryClient.refetchQueries(['Relationship', { id }])
+      queryClient.refetchQueries(['Relationship', { id: account.id }])
       const theParams = params as MutationVarsTimelineUpdateAccountProperty
       displayMessage({
         theme,
@@ -90,7 +97,7 @@ const menuAccount = ({
       rootQueryKey && queryClient.invalidateQueries(rootQueryKey)
     }
   })
-  const queryKeyRelationship: QueryKeyRelationship = ['Relationship', { id }]
+  const queryKeyRelationship: QueryKeyRelationship = ['Relationship', { id: account.id }]
   const relationshipMutation = useRelationshipMutation({
     onSuccess: (res, { payload: { action } }) => {
       haptics('Success')
@@ -118,14 +125,14 @@ const menuAccount = ({
     }
   })
 
-  if (!ownAccount && Platform.OS !== 'android') {
+  if (!ownAccount && Platform.OS !== 'android' && type !== 'account') {
     menus[0].push({
       key: 'account-following',
       item: {
         onSelect: () =>
           data &&
           relationshipMutation.mutate({
-            id,
+            id: account.id,
             type: 'outgoing',
             payload: { action: 'follow', state: !data?.requested ? data.following : true }
           }),
@@ -146,6 +153,17 @@ const menuAccount = ({
     })
   }
   if (!ownAccount) {
+    menus[0].push({
+      key: 'account-list',
+      item: {
+        onSelect: () => navigation.navigate('Tab-Shared-Account-In-Lists', { account }),
+        disabled: Platform.OS !== 'android' ? !data || isFetching : false,
+        destructive: false,
+        hidden: isFetching ? false : !data?.following
+      },
+      title: t('account.inLists'),
+      icon: 'checklist'
+    })
     menus[0].push({
       key: 'account-mute',
       item: {
@@ -153,7 +171,7 @@ const menuAccount = ({
           timelineMutation.mutate({
             type: 'updateAccountProperty',
             queryKey,
-            id,
+            id: account.id,
             payload: { property: 'mute', currentValue: data?.muting }
           }),
         disabled: Platform.OS !== 'android' ? !data || isFetching : false,
@@ -176,7 +194,7 @@ const menuAccount = ({
             timelineMutation.mutate({
               type: 'updateAccountProperty',
               queryKey,
-              id,
+              id: account.id,
               payload: { property: 'block', currentValue: data?.blocking }
             }),
           disabled: Platform.OS !== 'android' ? !data || isFetching : false,
@@ -195,13 +213,13 @@ const menuAccount = ({
             timelineMutation.mutate({
               type: 'updateAccountProperty',
               queryKey,
-              id,
+              id: account.id,
               payload: { property: 'reports' }
             })
             timelineMutation.mutate({
               type: 'updateAccountProperty',
               queryKey,
-              id,
+              id: account.id,
               payload: { property: 'block', currentValue: false }
             })
           },