Allow Android drop menu instead of long press

src/components/Timeline/Notifications.tsx

@@ -100,7 +100,10 @@ const TimelineNotifications = React.memo(
                 account={actualAccount}
                 highlighted={highlighted}
               />
-              <TimelineHeaderNotification notification={notification} />
+              <TimelineHeaderNotification
+                queryKey={queryKey}
+                notification={notification}
+              />
             </View>
 
             {notification.status ? (

src/components/Timeline/Shared/ContextMenu.tsx

@@ -5,6 +5,7 @@ import contextMenuStatus from '@components/ContextMenu/status'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import React from 'react'
 import { createContext } from 'react'
+import { Platform } from 'react-native'
 import ContextMenu, {
   ContextMenuAction,
   ContextMenuProps
@@ -27,7 +28,7 @@ const TimelineContextMenu: React.FC<Props & ContextMenuProps> = ({
   disabled,
   ...props
 }) => {
-  if (!status || !queryKey) {
+  if (!status || !queryKey || disabled || Platform.OS === 'android') {
     return <>{children}</>
   }
 
@@ -61,9 +62,7 @@ const TimelineContextMenu: React.FC<Props & ContextMenuProps> = ({
     rootQueryKey
   })
 
-  return disabled ? (
+  return (
-    <>{children}</>
-  ) : (
     <ContextMenuContext.Provider value={actions}>
       <ContextMenu
         actions={actions}

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

@@ -0,0 +1,120 @@
+import contextMenuAccount from '@components/ContextMenu/account'
+import contextMenuInstance from '@components/ContextMenu/instance'
+import contextMenuShare from '@components/ContextMenu/share'
+import contextMenuStatus from '@components/ContextMenu/status'
+import Icon from '@components/Icon'
+import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React, { useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Platform, Pressable, View } from 'react-native'
+import ContextMenu, { ContextMenuAction } from 'react-native-context-menu-view'
+import { ContextMenuContext } from './ContextMenu'
+import HeaderSharedAccount from './HeaderShared/Account'
+import HeaderSharedApplication from './HeaderShared/Application'
+import HeaderSharedCreated from './HeaderShared/Created'
+import HeaderSharedMuted from './HeaderShared/Muted'
+import HeaderSharedVisibility from './HeaderShared/Visibility'
+
+export interface Props {
+  queryKey?: QueryKeyTimeline
+  status: Mastodon.Status
+  highlighted: boolean
+}
+
+const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
+  if (!queryKey) return
+
+  const { t } = useTranslation('componentContextMenu')
+  const { colors } = useTheme()
+
+  const actions: ContextMenuAction[] = []
+
+  const shareOnPress =
+    status.visibility !== 'direct'
+      ? contextMenuShare({
+          actions,
+          type: 'status',
+          url: status.url || status.uri
+        })
+      : null
+  const statusOnPress = contextMenuStatus({
+    actions,
+    status,
+    queryKey
+  })
+  const accountOnPress = contextMenuAccount({
+    actions,
+    type: 'status',
+    queryKey,
+    id: status.account.id
+  })
+  const instanceOnPress = contextMenuInstance({
+    actions,
+    status,
+    queryKey
+  })
+
+  return (
+    <View style={{ flex: 1, flexDirection: 'row' }}>
+      <View style={{ flex: 7 }}>
+        <HeaderSharedAccount account={status.account} />
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: StyleConstants.Spacing.XS,
+            marginBottom: StyleConstants.Spacing.S
+          }}
+        >
+          <HeaderSharedCreated
+            created_at={status.created_at}
+            edited_at={status.edited_at}
+            highlighted={highlighted}
+          />
+          <HeaderSharedVisibility visibility={status.visibility} />
+          <HeaderSharedMuted muted={status.muted} />
+          <HeaderSharedApplication application={status.application} />
+        </View>
+      </View>
+
+      {queryKey ? (
+        <Pressable
+          accessibilityHint={t('accessibilityHint')}
+          style={{
+            flex: 1,
+            flexDirection: 'row',
+            justifyContent: 'center',
+            marginBottom: StyleConstants.Spacing.L
+          }}
+        >
+          <ContextMenu
+            dropdownMenuMode
+            actions={actions}
+            onPress={({ nativeEvent: { index } }) => {
+              console.log('index', index)
+              for (const on of [
+                shareOnPress,
+                statusOnPress,
+                accountOnPress,
+                instanceOnPress
+              ]) {
+                on && on(index)
+              }
+            }}
+            children={
+              <Icon
+                name='MoreHorizontal'
+                color={colors.secondary}
+                size={StyleConstants.Font.Size.L}
+              />
+            }
+          />
+        </Pressable>
+      ) : null}
+    </View>
+  )
+}
+
+export default TimelineHeaderDefault

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

@@ -4,7 +4,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Pressable, View } from 'react-native'
+import { Platform, Pressable, View } from 'react-native'
 import ContextMenu from 'react-native-context-menu-view'
 import { ContextMenuContext } from './ContextMenu'
 import HeaderSharedAccount from './HeaderShared/Account'
@@ -59,7 +59,7 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
           }}
         >
           <ContextMenu
-            dropdownMenuMode
+            dropdownMenuMode={Platform.OS === 'android'}
             actions={contextMenuContext}
             onPress={() => {}}
             children={

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

@@ -0,0 +1,163 @@
+import contextMenuAccount from '@components/ContextMenu/account'
+import contextMenuInstance from '@components/ContextMenu/instance'
+import contextMenuShare from '@components/ContextMenu/share'
+import contextMenuStatus from '@components/ContextMenu/status'
+import Icon from '@components/Icon'
+import {
+  RelationshipIncoming,
+  RelationshipOutgoing
+} from '@components/Relationship'
+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 HeaderSharedAccount from './HeaderShared/Account'
+import HeaderSharedApplication from './HeaderShared/Application'
+import HeaderSharedCreated from './HeaderShared/Created'
+import HeaderSharedMuted from './HeaderShared/Muted'
+import HeaderSharedVisibility from './HeaderShared/Visibility'
+
+export interface Props {
+  queryKey?: QueryKeyTimeline
+  notification: Mastodon.Notification
+}
+
+const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
+  const { colors } = useTheme()
+
+  const contextMenuActions: ContextMenuAction[] = []
+  const status = notification.status
+  const shareOnPress =
+    status && status?.visibility !== 'direct'
+      ? contextMenuShare({
+          actions: contextMenuActions,
+          type: 'status',
+          url: status.url || status.uri
+        })
+      : null
+  const statusOnPress = contextMenuStatus({
+    actions: contextMenuActions,
+    status,
+    queryKey
+  })
+  const accountOnPress = contextMenuAccount({
+    actions: contextMenuActions,
+    type: 'status',
+    queryKey,
+    id: status?.account.id
+  })
+  const instanceOnPress = contextMenuInstance({
+    actions: contextMenuActions,
+    status,
+    queryKey
+  })
+
+  const actions = useMemo(() => {
+    switch (notification.type) {
+      case 'follow':
+        return <RelationshipOutgoing id={notification.account.id} />
+      case 'follow_request':
+        return <RelationshipIncoming id={notification.account.id} />
+      default:
+        if (notification.status) {
+          return (
+            <Pressable
+              style={{
+                flex: 1,
+                flexDirection: 'row',
+                justifyContent: 'center',
+                paddingBottom: StyleConstants.Spacing.S
+              }}
+              children={
+                <ContextMenu
+                  dropdownMenuMode
+                  actions={contextMenuActions}
+                  onPress={({ nativeEvent: { index } }) => {
+                    for (const on of [
+                      shareOnPress,
+                      statusOnPress,
+                      accountOnPress,
+                      instanceOnPress
+                    ]) {
+                      on && on(index)
+                    }
+                  }}
+                  children={
+                    <Icon
+                      name='MoreHorizontal'
+                      color={colors.secondary}
+                      size={StyleConstants.Font.Size.L}
+                    />
+                  }
+                />
+              }
+            />
+          )
+        }
+    }
+  }, [notification.type])
+
+  return (
+    <View style={{ flex: 1, flexDirection: 'row' }}>
+      <View
+        style={{
+          flex:
+            notification.type === 'follow' ||
+            notification.type === 'follow_request'
+              ? 1
+              : 4
+        }}
+      >
+        <HeaderSharedAccount
+          account={
+            notification.status
+              ? notification.status.account
+              : notification.account
+          }
+          {...((notification.type === 'follow' ||
+            notification.type === 'follow_request') && { withoutName: true })}
+        />
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: StyleConstants.Spacing.XS,
+            marginBottom: StyleConstants.Spacing.S
+          }}
+        >
+          <HeaderSharedCreated
+            created_at={
+              notification.status?.created_at || notification.created_at
+            }
+            edited_at={notification.status?.edited_at}
+          />
+          {notification.status?.visibility ? (
+            <HeaderSharedVisibility
+              visibility={notification.status.visibility}
+            />
+          ) : null}
+          <HeaderSharedMuted muted={notification.status?.muted} />
+          <HeaderSharedApplication
+            application={notification.status?.application}
+          />
+        </View>
+      </View>
+
+      <View
+        style={[
+          { marginLeft: StyleConstants.Spacing.M },
+          notification.type === 'follow' ||
+          notification.type === 'follow_request'
+            ? { flexShrink: 1 }
+            : { flex: 1 }
+        ]}
+      >
+        {actions}
+      </View>
+    </View>
+  )
+}
+
+export default TimelineHeaderNotification

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

@@ -3,6 +3,7 @@ import {
   RelationshipIncoming,
   RelationshipOutgoing
 } from '@components/Relationship'
+import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext, useMemo } from 'react'
@@ -16,6 +17,7 @@ import HeaderSharedMuted from './HeaderShared/Muted'
 import HeaderSharedVisibility from './HeaderShared/Visibility'
 
 export interface Props {
+  queryKey: QueryKeyTimeline
   notification: Mastodon.Notification
 }
 
@@ -42,7 +44,6 @@ const TimelineHeaderNotification = ({ notification }: Props) => {
               }}
               children={
                 <ContextMenu
-                  dropdownMenuMode
                   actions={contextMenuContext}
                   onPress={() => {}}
                   children={