Now it should finally fix #451

src/components/ContextMenu/account.ts

@@ -131,6 +131,9 @@ const contextMenuAccount = ({ actions, type, queryKey, rootQueryKey, id: account
   }
 
   return (index: number) => {
+    if (typeof index !== 'number' || !actions[index]) {
+      return // For Android
+    }
     if (actions[index].id === 'account-mute') {
       analytics('timeline_shared_headeractions_account_mute_press', {
         page: queryKey && queryKey[1].page

src/components/ContextMenu/instance.ts

@@ -1,9 +1,6 @@
 import analytics from '@components/analytics'
 import { displayMessage } from '@components/Message'
-import {
+import { QueryKeyTimeline, useTimelineMutation } from '@utils/queryHooks/timeline'
-  QueryKeyTimeline,
-  useTimelineMutation
-} from '@utils/queryHooks/timeline'
 import { getInstanceUrl } from '@utils/slices/instancesSlice'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { useTranslation } from 'react-i18next'
@@ -19,12 +16,7 @@ export interface Props {
   rootQueryKey?: QueryKeyTimeline
 }
 
-const contextMenuInstance = ({
+const contextMenuInstance = ({ actions, status, queryKey, rootQueryKey }: Props) => {
-  actions,
-  status,
-  queryKey,
-  rootQueryKey
-}: Props) => {
   const { t } = useTranslation('componentContextMenu')
   const { theme } = useTheme()
 
@@ -72,10 +64,12 @@ const contextMenuInstance = ({
   }
 
   return (index: number) => {
+    if (typeof index !== 'number' || !actions[index]) {
+      return // For Android
+    }
     if (
       actions[index].id === 'instance-block' ||
-      (actions[index].id === 'instance' &&
+      (actions[index].id === 'instance' && actions[index].actions?.[0].id === 'instance-block')
-        actions[index].actions?.[0].id === 'instance-block')
     ) {
       analytics('timeline_shared_headeractions_domain_block_press', {
         page: queryKey[1].page

src/components/ContextMenu/share.ts

@@ -25,7 +25,8 @@ const contextMenuShare = ({ copiableContent, actions, type, url }: Props) => {
     title: t(`share.${type}.action`),
     systemIcon: 'square.and.arrow.up'
   })
-  Platform.OS !== 'android' && type === 'status' &&
+  Platform.OS !== 'android' &&
+    type === 'status' &&
     actions.push({
       id: 'copy',
       title: t(`copy.action`),
@@ -34,6 +35,9 @@ const contextMenuShare = ({ copiableContent, actions, type, url }: Props) => {
     })
 
   return (index: number) => {
+    if (typeof index !== 'number' || !actions[index]) {
+      return // For Android
+    }
     if (actions[index].id === 'copy') {
       analytics('timeline_shared_headeractions_copy_press')
       Clipboard.setString(copiableContent?.current.content || '')

src/components/ContextMenu/status.ts

@@ -9,10 +9,7 @@ import {
   QueryKeyTimeline,
   useTimelineMutation
 } from '@utils/queryHooks/timeline'
-import {
+import { checkInstanceFeature, getInstanceAccount } from '@utils/slices/instancesSlice'
-  checkInstanceFeature,
-  getInstanceAccount
-} from '@utils/slices/instancesSlice'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { useTranslation } from 'react-i18next'
 import { Alert } from 'react-native'
@@ -27,16 +24,8 @@ export interface Props {
   rootQueryKey?: QueryKeyTimeline
 }
 
-const contextMenuStatus = ({
+const contextMenuStatus = ({ actions, status, queryKey, rootQueryKey }: Props) => {
-  actions,
+  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList, 'Screen-Tabs'>>()
-  status,
-  queryKey,
-  rootQueryKey
-}: Props) => {
-  const navigation =
-    useNavigation<
-      NativeStackNavigationProp<RootStackParamList, 'Screen-Tabs'>
-    >()
   const { theme } = useTheme()
   const { t } = useTranslation('componentContextMenu')
 
@@ -44,8 +33,7 @@ const contextMenuStatus = ({
   const mutation = useTimelineMutation({
     onMutate: true,
     onError: (err: any, params, oldData) => {
-      const theFunction = (params as MutationVarsTimelineUpdateStatusProperty)
+      const theFunction = (params as MutationVarsTimelineUpdateStatusProperty).payload
-        .payload
         ? (params as MutationVarsTimelineUpdateStatusProperty).payload.property
         : 'delete'
       displayMessage({
@@ -59,17 +47,14 @@ const contextMenuStatus = ({
           err.data &&
           err.data.error &&
           typeof err.data.error === 'string' && {
-          description: err.data.error
+            description: err.data.error
-        })
+          })
       })
       queryClient.setQueryData(queryKey, oldData)
     }
   })
 
-  const instanceAccount = useSelector(
+  const instanceAccount = useSelector(getInstanceAccount, (prev, next) => prev.id === next.id)
-    getInstanceAccount,
-    (prev, next) => prev.id === next.id
-  )
   const ownAccount = instanceAccount?.id === status?.account?.id
 
   if (ownAccount) {
@@ -118,83 +103,75 @@ const contextMenuStatus = ({
   }
 
   return async (index: number) => {
+    if (typeof index !== 'number' || !actions[index]) {
+      return // For Android
+    }
     if (actions[index].id === 'status-delete') {
       analytics('timeline_shared_headeractions_status_delete_press', {
         page: queryKey && queryKey[1].page
       })
-      Alert.alert(
+      Alert.alert(t('status.delete.alert.title'), t('status.delete.alert.message'), [
-        t('status.delete.alert.title'),
+        {
-        t('status.delete.alert.message'),
+          text: t('status.delete.alert.buttons.confirm'),
-        [
+          style: 'destructive',
-          {
+          onPress: async () => {
-            text: t('status.delete.alert.buttons.confirm'),
+            analytics('timeline_shared_headeractions_status_delete_confirm', {
-            style: 'destructive',
+              page: queryKey && queryKey[1].page
-            onPress: async () => {
+            })
-              analytics('timeline_shared_headeractions_status_delete_confirm', {
+            mutation.mutate({
-                page: queryKey && queryKey[1].page
+              type: 'deleteItem',
-              })
+              source: 'statuses',
-              mutation.mutate({
+              queryKey,
-                type: 'deleteItem',
+              rootQueryKey,
-                source: 'statuses',
+              id: status.id
-                queryKey,
+            })
-                rootQueryKey,
-                id: status.id
-              })
-            }
-          },
-          {
-            text: t('common:buttons.cancel')
           }
-        ]
+        },
-      )
+        {
+          text: t('common:buttons.cancel')
+        }
+      ])
     }
     if (actions[index].id === 'status-delete-edit') {
       analytics('timeline_shared_headeractions_status_deleteedit_press', {
         page: queryKey && queryKey[1].page
       })
-      Alert.alert(
+      Alert.alert(t('status.deleteEdit.alert.title'), t('status.deleteEdit.alert.message'), [
-        t('status.deleteEdit.alert.title'),
+        {
-        t('status.deleteEdit.alert.message'),
+          text: t('status.deleteEdit.alert.buttons.confirm'),
-        [
+          style: 'destructive',
-          {
+          onPress: async () => {
-            text: t('status.deleteEdit.alert.buttons.confirm'),
+            analytics('timeline_shared_headeractions_status_deleteedit_confirm', {
-            style: 'destructive',
+              page: queryKey && queryKey[1].page
-            onPress: async () => {
+            })
-              analytics(
+            let replyToStatus: Mastodon.Status | undefined = undefined
-                'timeline_shared_headeractions_status_deleteedit_confirm',
+            if (status.in_reply_to_id) {
-                {
+              replyToStatus = await apiInstance<Mastodon.Status>({
-                  page: queryKey && queryKey[1].page
+                method: 'get',
-                }
+                url: `statuses/${status.in_reply_to_id}`
-              )
+              }).then(res => res.body)
-              let replyToStatus: Mastodon.Status | undefined = undefined
-              if (status.in_reply_to_id) {
-                replyToStatus = await apiInstance<Mastodon.Status>({
-                  method: 'get',
-                  url: `statuses/${status.in_reply_to_id}`
-                }).then(res => res.body)
-              }
-              mutation
-                .mutateAsync({
-                  type: 'deleteItem',
-                  source: 'statuses',
-                  queryKey,
-                  id: status.id
-                })
-                .then(res => {
-                  navigation.navigate('Screen-Compose', {
-                    type: 'deleteEdit',
-                    incomingStatus: res.body as Mastodon.Status,
-                    ...(replyToStatus && { replyToStatus }),
-                    queryKey
-                  })
-                })
             }
-          },
+            mutation
-          {
+              .mutateAsync({
-            text: t('common:buttons.cancel')
+                type: 'deleteItem',
+                source: 'statuses',
+                queryKey,
+                id: status.id
+              })
+              .then(res => {
+                navigation.navigate('Screen-Compose', {
+                  type: 'deleteEdit',
+                  incomingStatus: res.body as Mastodon.Status,
+                  ...(replyToStatus && { replyToStatus }),
+                  queryKey
+                })
+              })
           }
-        ]
+        },
-      )
+        {
+          text: t('common:buttons.cancel')
+        }
+      ])
     }
     if (actions[index].id === 'status-mute') {
       analytics('timeline_shared_headeractions_status_mute_press', {

src/components/Timeline/Default.tsx

@@ -157,15 +157,6 @@ const TimelineDefault: React.FC<Props> = ({
 
   return disableOnPress ? (
     <View style={mainStyle}>{main()}</View>
-  ) : Platform.OS === 'android' ? (
-    <Pressable
-      accessible={highlighted ? false : true}
-      style={mainStyle}
-      onPress={onPress}
-      onLongPress={() => {}}
-    >
-      {main()}
-    </Pressable>
   ) : (
     <TimelineContextMenu
       copiableContent={copiableContent}

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

@@ -3,13 +3,14 @@ import contextMenuInstance from '@components/ContextMenu/instance'
 import contextMenuShare from '@components/ContextMenu/share'
 import contextMenuStatus from '@components/ContextMenu/status'
 import Icon from '@components/Icon'
+import { useActionSheet } from '@expo/react-native-action-sheet'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, View } from 'react-native'
-import ContextMenu, { ContextMenuAction } from 'react-native-context-menu-view'
+import { ContextMenuAction } from 'react-native-context-menu-view'
 import HeaderSharedAccount from './HeaderShared/Account'
 import HeaderSharedApplication from './HeaderShared/Application'
 import HeaderSharedCreated from './HeaderShared/Created'
@@ -55,6 +56,8 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
     queryKey
   })
 
+  const { showActionSheetWithOptions } = useActionSheet()
+
   return (
     <View style={{ flex: 1, flexDirection: 'row' }}>
       <View style={{ flex: 7 }}>
@@ -82,25 +85,26 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
         <Pressable
           accessibilityHint={t('accessibilityHint')}
           style={{ flex: 1, flexBasis: StyleConstants.Font.Size.L }}
-          onLongPress={() => null}
+          onPress={() =>
-        >
+            showActionSheetWithOptions(
-          <ContextMenu
+              {
-            style={{ flex: 1, alignItems: 'center' }}
+                options: actions.map(action => action.title),
-            dropdownMenuMode
+                cancelButtonIndex: 999,
-            actions={actions}
+                destructiveButtonIndex: actions
-            onPress={({ nativeEvent: { index } }) => {
+                  .map((action, index) => (action.destructive ? index : 999))
-              for (const on of [shareOnPress, statusOnPress, accountOnPress, instanceOnPress]) {
+                  .filter(num => num !== 999)
-                on && on(index)
+              },
+              index => {
+                if (index !== undefined) {
+                  for (const on of [shareOnPress, statusOnPress, accountOnPress, instanceOnPress]) {
+                    on && on(index)
+                  }
+                }
               }
-            }}
+            )
-            children={
+          }
-              <Icon
+        >
-                name='MoreHorizontal'
+          <Icon name='MoreHorizontal' color={colors.secondary} size={StyleConstants.Font.Size.L} />
-                color={colors.secondary}
-                size={StyleConstants.Font.Size.L}
-              />
-            }
-          />
         </Pressable>
       ) : null}
     </View>

src/components/Timeline/Shared/HeaderNotification.android.tsx

@@ -4,12 +4,13 @@ import contextMenuShare from '@components/ContextMenu/share'
 import contextMenuStatus from '@components/ContextMenu/status'
 import Icon from '@components/Icon'
 import { RelationshipIncoming, RelationshipOutgoing } from '@components/Relationship'
+import { useActionSheet } from '@expo/react-native-action-sheet'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
 import { Pressable, View } from 'react-native'
-import ContextMenu, { ContextMenuAction } from 'react-native-context-menu-view'
+import { ContextMenuAction } from 'react-native-context-menu-view'
 import HeaderSharedAccount from './HeaderShared/Account'
 import HeaderSharedApplication from './HeaderShared/Application'
 import HeaderSharedCreated from './HeaderShared/Created'
@@ -57,6 +58,8 @@ const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
       queryKey
     })
 
+  const { showActionSheetWithOptions } = useActionSheet()
+
   const actions = useMemo(() => {
     switch (notification.type) {
       case 'follow':
@@ -68,29 +71,34 @@ const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
           return (
             <Pressable
               style={{ flex: 1, flexBasis: StyleConstants.Font.Size.L }}
-              onLongPress={() => null}
+              onPress={() =>
-              children={
+                showActionSheetWithOptions(
-                <ContextMenu
+                  {
-                  style={{ flex: 1, alignItems: 'center' }}
+                    options: contextMenuActions.map(action => action.title),
-                  dropdownMenuMode
+                    cancelButtonIndex: 999,
-                  actions={contextMenuActions}
+                    destructiveButtonIndex: contextMenuActions
-                  onPress={({ nativeEvent: { index } }) => {
+                      .map((action, index) => (action.destructive ? index : 999))
-                    for (const on of [
+                      .filter(num => num !== 999)
-                      shareOnPress,
+                  },
-                      statusOnPress,
+                  index => {
-                      accountOnPress,
+                    if (index !== undefined) {
-                      instanceOnPress
+                      for (const on of [
-                    ]) {
+                        shareOnPress,
-                      on && on(index)
+                        statusOnPress,
+                        accountOnPress,
+                        instanceOnPress
+                      ]) {
+                        on && on(index)
+                      }
                     }
-                  }}
-                  children={
-                    <Icon
-                      name='MoreHorizontal'
-                      color={colors.secondary}
-                      size={StyleConstants.Font.Size.L}
-                    />
                   }
+                )
+              }
+              children={
+                <Icon
+                  name='MoreHorizontal'
+                  color={colors.secondary}
+                  size={StyleConstants.Font.Size.L}
                 />
               }
             />