feat: switch to RNBS

package.json

@@ -21,6 +21,7 @@
     "@notifee/react-native": "^7.8.0",
     "@react-native-async-storage/async-storage": "^1.19.3",
     "@react-native-clipboard/clipboard": "^1.11.2",
+    "@react-native-community/hooks": "^3.0.0",
     "@react-native/eslint-config": "^0.73.0",
     "@react-native/metro-config": "^0.73.0",
     "@tradle/react-native-http": "^2.0.1",

src/Generic.tsx

@@ -7,7 +7,7 @@ import FastImage from 'react-native-fast-image';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
-import {API, Channel, Client, Server, User} from 'revolt.js';
+import {API, Channel, Client, Server} from 'revolt.js';
 
 import {currentTheme, setTheme, themes, styles} from './Theme';
 import {Button, Text} from './components/common/atoms';
@@ -310,10 +310,10 @@ export const app = {
   pushToQueue: m => {},
   joinInvite: async (i: API.InviteResponse) => {},
   logOut: () => {},
-  openMemberList: (c: Channel | Server | null, u: User[] | null) => {},
+  openMemberList: (data: Channel | Server | null) => {},
   openChannelContextMenu: (c: Channel | null) => {},
   openStatusMenu: (state: boolean) => {},
-  openReportMenu: (object: ReportedObject| null) => {},
+  openReportMenu: (object: ReportedObject | null) => {},
 };
 
 export function setFunction(name: string, func: any) {

src/Modals.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
-import {Modal, Pressable, ScrollView, View} from 'react-native';
+import {Modal, Pressable, View} from 'react-native';
 import {observer} from 'mobx-react-lite';
 
-import BottomSheet from '@gorhom/bottom-sheet';
-import Modal2 from 'react-native-modal';
 import ImageViewer from 'react-native-image-zoom-viewer';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
-import {API, Channel, Message, Server, User} from 'revolt.js';
+import {API, Channel, User} from 'revolt.js';
 
 import {app, client, openUrl, setFunction} from './Generic';
-import {styles, currentTheme} from './Theme';
+import {currentTheme} from './Theme';
 import {GapView} from './components/layout';
 import {
   BotInviteSheet,
@@ -24,88 +22,12 @@ import {
   SettingsSheet,
   StatusSheet,
 } from './components/sheets/';
-import type {ReportedObject} from './lib/types';
-
-const MBottomSheet = observer(
-  ({
-    sheetKey,
-    visible,
-    callback,
-    includeScrollView,
-    children,
-  }: {
-    sheetKey: string;
-    visible: boolean;
-    callback: Function;
-    includeScrollView?: boolean;
-    children: any;
-  }) => {
-    return (
-      <Modal2
-        key={sheetKey}
-        isVisible={visible}
-        onBackdropPress={() => callback()}
-        onBackButtonPress={() => callback()}
-        swipeDirection={'down'}
-        onSwipeComplete={() => callback()}
-        propagateSwipe
-        style={{
-          width: '100%',
-          marginHorizontal: 0,
-          marginBottom: 0,
-          justifyContent: 'flex-end',
-        }}>
-        <View style={styles.sheetBackground}>
-          <View
-            style={{
-              alignSelf: 'center',
-              width: '25%',
-              height: '1%',
-              backgroundColor: currentTheme.foregroundPrimary,
-              borderRadius: 16,
-              marginBottom: 12,
-            }}
-          />
-          {includeScrollView ? <ScrollView>{children}</ScrollView> : children}
-        </View>
-      </Modal2>
-    );
-  },
-);
 
 export const Modals = observer(() => {
-  const [messageMenuState, setMessageMenuState] = React.useState({
-    showMessageMenu: false,
-    contextMenuMessage: null,
-  } as {showMessageMenu: boolean; contextMenuMessage: Message | null});
-  const [statusMenuState, setStatusMenuState] = React.useState(false);
-  const [profileMenuState, setProfileMenuState] = React.useState({
-    showUserMenu: false,
-    contextMenuUser: null,
-    contextMenuUserServer: null,
-  } as {
-    showUserMenu: boolean;
-    contextMenuUser: User | null;
-    contextMenuUserServer: Server | null;
-  });
   const [imageViewerState, setImageViewerState] = React.useState({
     i: null as any,
   });
   const [settingsVisibility, setSettingsVisibility] = React.useState(false);
-  const [reportMenuState, setReportMenuState] = React.useState({
-    showReportMenu: false,
-    reportObject: null,
-  } as {
-    showReportMenu: boolean;
-    reportObject: ReportedObject | null;
-  });
-  const [channelMenuState, setChannelMenuState] = React.useState({
-    showChannelMenu: false,
-    channelMenuChannel: null,
-  } as {
-    showChannelMenu: boolean;
-    channelMenuChannel: Channel | null;
-  });
   const [inviteServer, setInviteServer] = React.useState({
     inviteServer: null,
     inviteServerCode: '',
@@ -114,49 +36,9 @@ export const Modals = observer(() => {
     inviteServerCode: string;
   });
   const [inviteBot, setInviteBot] = React.useState(null as User | null);
-  const [serverMenuState, setServerMenuState] = React.useState({
-    showServerMenu: false,
-    contextMenuServer: null,
-  } as {
-    showServerMenu: boolean;
-    contextMenuServer: Server | null;
-  });
-  const [memberListState, setMemberListState] = React.useState({
-    showMemberList: false,
-    memberListContext: null,
-    memberListUsers: null,
-  } as {
-    showMemberList: boolean;
-    memberListContext: Channel | /* Server | */ null;
-    memberListUsers: User[] | null;
-  });
 
-  setFunction('openMessage', async (m: Message | null) => {
-    setMessageMenuState(
-      m
-        ? {showMessageMenu: true, contextMenuMessage: m}
-        : {...messageMenuState, showMessageMenu: false},
-    );
-  });
-  setFunction('openStatusMenu', async (show: boolean) => {
-    setStatusMenuState(show);
-  });
-  setFunction('openProfile', async (u: User | null, s: Server | null) => {
-    setProfileMenuState(
-      u
-        ? {
-            showUserMenu: true,
-            contextMenuUser: u,
-            contextMenuUserServer: s,
-          }
-        : {...profileMenuState, showUserMenu: false},
-    );
-  });
   setFunction('openDirectMessage', async (dm: Channel) => {
-    setProfileMenuState({
-      ...profileMenuState,
-      showUserMenu: false,
-    });
+    app.openProfile(null);
     app.openChannel(dm);
   });
   setFunction('openImage', async (a: any) => {
@@ -165,20 +47,6 @@ export const Modals = observer(() => {
   setFunction('openSettings', async (o: boolean) => {
     setSettingsVisibility(o);
   });
-  setFunction('openReportMenu', async (object: ReportedObject | null) => {
-    setReportMenuState(
-      object
-        ? {showReportMenu: true, reportObject: object}
-        : {...reportMenuState, showReportMenu: false},
-    );
-  });
-  setFunction('openChannelContextMenu', async (channel: Channel | null) => {
-    setChannelMenuState(
-      channel
-        ? {showChannelMenu: true, channelMenuChannel: channel}
-        : {...channelMenuState, showChannelMenu: false},
-    );
-  });
   setFunction('openInvite', async (i: string) => {
     try {
       let community = await client.fetchInvite(i);
@@ -195,59 +63,16 @@ export const Modals = observer(() => {
   setFunction('openBotInvite', async (id: string) => {
     setInviteBot(await client.bots.fetchPublic(id).catch(e => e));
   });
-  setFunction('openServerContextMenu', async (s: Server | null) => {
-    setServerMenuState(
-      s
-        ? {showServerMenu: true, contextMenuServer: s}
-        : {...serverMenuState, showServerMenu: false},
-    );
-  });
-  setFunction(
-    'openMemberList',
-    async (context: Channel | /* Server | */ null, users: User[] | null) => {
-      setMemberListState(
-        context
-          ? {
-              showMemberList: true,
-              memberListContext: context,
-              memberListUsers: users,
-            }
-          : {...memberListState, showMemberList: false},
-      );
-    },
-  );
 
   return (
     <>
-      <MBottomSheet
-        sheetKey={'messageMenu'}
-        visible={messageMenuState.showMessageMenu}
-        callback={() => app.openMessage(null)}>
-        <MessageMenuSheet
-          setState={() => {
-            app.openMessage(null);
-          }}
-          message={messageMenuState.contextMenuMessage!}
-        />
-      </MBottomSheet>
-      <MBottomSheet
-        sheetKey={'statusMenu'}
-        visible={statusMenuState}
-        callback={() => {
-          app.openStatusMenu(false);
-        }}>
-        <StatusSheet />
-      </MBottomSheet>
-      <MBottomSheet
-        sheetKey={'profileMenu'}
-        visible={profileMenuState.showUserMenu}
-        callback={() => app.openProfile(null)}
-        includeScrollView>
-        <ProfileSheet
-          user={profileMenuState.contextMenuUser!}
-          server={profileMenuState.contextMenuUserServer!}
-        />
-      </MBottomSheet>
+      <MessageMenuSheet />
+      <StatusSheet />
+      <ProfileSheet />
+      <ReportSheet />
+      <ChannelInfoSheet />
+      <MemberListSheet />
+      <ServerInfoSheet />
       <Modal
         visible={!!imageViewerState.i}
         transparent={true}
@@ -310,18 +135,6 @@ export const Modals = observer(() => {
         onRequestClose={() => setSettingsVisibility(false)}>
         <SettingsSheet setState={() => setSettingsVisibility(false)} />
       </Modal>
-      <MBottomSheet
-        sheetKey={'reportModal'}
-        visible={reportMenuState.showReportMenu}
-        callback={() => app.openReportMenu(null)}>
-        <ReportSheet obj={reportMenuState.reportObject!} />
-      </MBottomSheet>
-      <MBottomSheet
-        sheetKey={'channelMenu'}
-        visible={channelMenuState.showChannelMenu}
-        callback={() => app.openChannelContextMenu(null)}>
-        <ChannelInfoSheet channel={channelMenuState.channelMenuChannel!} />
-      </MBottomSheet>
       <Modal
         visible={!!inviteServer.inviteServer}
         transparent={true}
@@ -349,26 +162,6 @@ export const Modals = observer(() => {
           bot={inviteBot!}
         />
       </Modal>
-      <MBottomSheet
-        sheetKey={'serverMenu'}
-        visible={serverMenuState.showServerMenu}
-        callback={() => app.openServerContextMenu(null)}>
-        <ServerInfoSheet
-          setState={() => {
-            app.openServerContextMenu(null);
-          }}
-          server={serverMenuState.contextMenuServer!}
-        />
-      </MBottomSheet>
-      <MBottomSheet
-        sheetKey={'memberList'}
-        visible={memberListState.showMemberList}
-        callback={() => app.openMemberList(null, null)}>
-        <MemberListSheet
-          context={memberListState.memberListContext!}
-          users={memberListState.memberListUsers!}
-        />
-      </MBottomSheet>
     </>
   );
 });

src/components/common/BottomSheet.tsx

@@ -0,0 +1,43 @@
+import React, {useMemo} from 'react';
+import {StyleSheet} from 'react-native';
+
+import BottomSheetCore, {
+  BottomSheetBackdrop,
+  BottomSheetScrollView,
+} from '@gorhom/bottom-sheet';
+import {observer} from 'mobx-react-lite';
+
+import {currentTheme} from '../../Theme';
+
+export const BottomSheet = observer(
+  ({sheetRef, children}: {sheetRef: any; children: any}) => {
+    const snapPoints = useMemo(() => ['50%', '70%', '90%'], []);
+
+    return (
+      <BottomSheetCore
+        ref={sheetRef}
+        index={-1}
+        snapPoints={snapPoints}
+        enablePanDownToClose
+        backdropComponent={BottomSheetBackdrop}
+        backgroundStyle={{
+          backgroundColor: currentTheme.backgroundSecondary,
+        }}
+        handleIndicatorStyle={localStyles.handleIndicator}>
+        <BottomSheetScrollView>{children}</BottomSheetScrollView>
+      </BottomSheetCore>
+    );
+  },
+);
+
+const localStyles = StyleSheet.create({
+  sheetBackground: {
+    backgroundColor: currentTheme.backgroundSecondary,
+  },
+  handleIndicator: {
+    backgroundColor: currentTheme.foregroundPrimary,
+    width: '25%',
+    padding: 3,
+    marginVertical: 8,
+  },
+});