TopicItem: Show actionsheet on long-press.

src/streams/TopicItem.js

@@ -1,10 +1,15 @@
 /* @flow strict-local */
-import React from 'react';
+import React, { useContext } from 'react';
 import { View } from 'react-native';
+import { useActionSheet } from '@expo/react-native-action-sheet';
 
 import styles, { BRAND_COLOR, createStyleSheet } from '../styles';
 import { RawLabel, Touchable, UnreadCount } from '../common';
-import { showToast } from '../utils/info';
+import { showHeaderActionSheet } from '../message/messageActionSheet';
+import type { ShowActionSheetWithOptions } from '../message/messageActionSheet';
+import { TranslationContext } from '../boot/TranslationProvider';
+import { useDispatch, useSelector } from '../react-redux';
+import { getAuth, getMute, getFlags, getSubscriptions, getOwnUser } from '../selectors';
 
 const componentStyles = createStyleSheet({
   selectedRow: {
@@ -33,8 +38,31 @@ type Props = $ReadOnly<{|
 export default function TopicItem(props: Props) {
   const { name, stream, isMuted = false, isSelected = false, unreadCount = 0, onPress } = props;
 
+  const showActionSheetWithOptions: ShowActionSheetWithOptions = useActionSheet()
+    .showActionSheetWithOptions;
+  const _ = useContext(TranslationContext);
+  const dispatch = useDispatch();
+  const backgroundData = useSelector(state => ({
+    auth: getAuth(state),
+    mute: getMute(state),
+    subscriptions: getSubscriptions(state),
+    ownUser: getOwnUser(state),
+    flags: getFlags(state),
+  }));
+
   return (
-    <Touchable onPress={() => onPress(stream, name)} onLongPress={() => showToast(name)}>
+    <Touchable
+      onPress={() => onPress(stream, name)}
+      onLongPress={() => {
+        showHeaderActionSheet({
+          showActionSheetWithOptions,
+          callbacks: { dispatch, _ },
+          backgroundData,
+          stream,
+          topic: name,
+        });
+      }}
+    >
       <View
         style={[
           styles.listItem,