Move SharePost modal to new system

src/view/com/modals/Modal.tsx

@@ -6,6 +6,7 @@ import {useStores} from '../../../state'
 import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
 
 import * as LinkActionsModal from './LinkActions'
+import * as SharePostModal from './SharePost.native'
 
 export const Modal = observer(function Modal() {
   const store = useStores()
@@ -28,6 +29,9 @@ export const Modal = observer(function Modal() {
   if (store.shell.activeModal?.name === 'link-actions') {
     snapPoints = LinkActionsModal.snapPoints
     element = <LinkActionsModal.Component {...store.shell.activeModal} />
+  } else if (store.shell.activeModal?.name === 'share-post') {
+    snapPoints = SharePostModal.snapPoints
+    element = <SharePostModal.Component {...store.shell.activeModal} />
   } else {
     return <View />
   }

src/view/com/modals/SharePost.native.tsx

@@ -1,63 +1,36 @@
-import React, {forwardRef, useState, useImperativeHandle, useRef} from 'react'
+import React from 'react'
 import {Button, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
-import BottomSheet from '@gorhom/bottom-sheet'
 import Toast from '../util/Toast'
 import Clipboard from '@react-native-clipboard/clipboard'
 import {s} from '../../lib/styles'
-import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
+import {useStores} from '../../../state'
 
-export const ShareModal = forwardRef(function ShareModal({}: {}, ref) {
-  const [isOpen, setIsOpen] = useState<boolean>(false)
-  const [uri, setUri] = useState<string>('')
-  const bottomSheetRef = useRef<BottomSheet>(null)
-
-  useImperativeHandle(ref, () => ({
-    open(uri: string) {
-      console.log('sharing', uri)
-      setUri(uri)
-      setIsOpen(true)
-      bottomSheetRef.current?.expand()
-    },
-  }))
+export const snapPoints = ['30%']
 
+export function Component({href}: {href: string}) {
+  const store = useStores()
   const onPressCopy = () => {
-    Clipboard.setString(uri)
-    console.log('showing')
+    Clipboard.setString(href)
     Toast.show('Link copied', {
       position: Toast.positions.TOP,
     })
+    store.shell.closeModal()
   }
-  const onShareBottomSheetChange = (snapPoint: number) => {
-    if (snapPoint === -1) {
-      console.log('unsharing')
-      setIsOpen(false)
-    }
-  }
-  const onClose = () => {
-    bottomSheetRef.current?.close()
-  }
+  const onClose = () => store.shell.closeModal()
 
   return (
-    <BottomSheet
-      ref={bottomSheetRef}
-      index={-1}
-      snapPoints={['50%']}
-      enablePanDownToClose
-      backdropComponent={isOpen ? createCustomBackdrop(onClose) : undefined}
-      onChange={onShareBottomSheetChange}>
-      <View>
-        <Text style={[s.textCenter, s.bold, s.mb10]}>Share this post</Text>
-        <Text style={[s.textCenter, s.mb10]}>{uri}</Text>
-        <Button title="Copy to clipboard" onPress={onPressCopy} />
-        <View style={s.p10}>
-          <TouchableOpacity onPress={onClose} style={styles.closeBtn}>
-            <Text style={s.textCenter}>Close</Text>
-          </TouchableOpacity>
-        </View>
+    <View>
+      <Text style={[s.textCenter, s.bold, s.mb10]}>Share this post</Text>
+      <Text style={[s.textCenter, s.mb10]}>{href}</Text>
+      <Button title="Copy to clipboard" onPress={onPressCopy} />
+      <View style={s.p10}>
+        <TouchableOpacity onPress={onClose} style={styles.closeBtn}>
+          <Text style={s.textCenter}>Close</Text>
+        </TouchableOpacity>
       </View>
-    </BottomSheet>
+    </View>
   )
-})
+}
 
 const styles = StyleSheet.create({
   closeBtn: {