style: 💄 Improve all popup modal

App.tsx

@@ -37,6 +37,8 @@ import messaging, {
   FirebaseMessagingTypes,
 } from '@react-native-firebase/messaging';
 import {handlePushNotification} from './src/utils/pushNotifications';
+import {GestureHandlerRootView} from 'react-native-gesture-handler';
+import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -157,19 +159,26 @@ function App(): JSX.Element {
   }, []);
 
   return (
-    <StoreProvider>
-      <NavigationContainer ref={navigationRef}>
-        <Stack.Navigator
-          initialRouteName="Splash"
-          screenOptions={{headerShown: false}}>
-          <Stack.Screen name="Splash" component={SplashScreen} />
-          <Stack.Screen name="Login" component={LoginView} />
-          <Stack.Screen name="Main" component={LoggedInView} />
-          <Stack.Screen name="Message" component={MessagesView} />
-          <Stack.Screen name="ChannelDetails" component={ChannelDetailsView} />
-        </Stack.Navigator>
-      </NavigationContainer>
-    </StoreProvider>
+    <GestureHandlerRootView style={{flex: 1}}>
+      <StoreProvider>
+        <NavigationContainer ref={navigationRef}>
+          <BottomSheetModalProvider>
+            <Stack.Navigator
+              initialRouteName="Splash"
+              screenOptions={{headerShown: false}}>
+              <Stack.Screen name="Splash" component={SplashScreen} />
+              <Stack.Screen name="Login" component={LoginView} />
+              <Stack.Screen name="Main" component={LoggedInView} />
+              <Stack.Screen name="Message" component={MessagesView} />
+              <Stack.Screen
+                name="ChannelDetails"
+                component={ChannelDetailsView}
+              />
+            </Stack.Navigator>
+          </BottomSheetModalProvider>
+        </NavigationContainer>
+      </StoreProvider>
+    </GestureHandlerRootView>
   );
 }
 

babel.config.js

@@ -1,4 +1,7 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
-  plugins: ['module:react-native-dotenv'],
+  plugins: [
+    'module:react-native-dotenv',
+    'react-native-reanimated/plugin', // must be last
+  ],
 };

package.json

@@ -11,6 +11,7 @@
     "windows": "react-native run-windows"
   },
   "dependencies": {
+    "@gorhom/bottom-sheet": "^4.5.1",
     "@nerimity/nevula": "^0.12.3",
     "@notifee/react-native": "^7.8.0",
     "@react-native-clipboard/clipboard": "^1.11.2",
@@ -27,7 +28,9 @@
     "react-native": "0.71.8",
     "react-native-encrypted-storage": "^4.0.3",
     "react-native-fast-image": "^8.6.3",
+    "react-native-gesture-handler": "^2.13.4",
     "react-native-image-picker": "^5.6.0",
+    "react-native-reanimated": "^3.5.4",
     "react-native-safe-area-context": "^4.5.3",
     "react-native-screens": "^3.20.0",
     "react-native-vector-icons": "^9.2.0",

src/components/ChannelDetailsView.tsx

@@ -12,9 +12,8 @@ import {ServerRole} from '../store/serverRoles';
 import Avatar from './ui/Avatar';
 import {observer} from 'mobx-react-lite';
 import {ProfileContextMenu} from './context-menu/ProfileContextMenu';
-import {CustomPortalProvider, useCustomPortal} from '../utils/CustomPortal';
-import {Pressable} from 'react-native-windows';
 import CustomPressable from './ui/CustomPressable';
+import {ModalRef} from './ui/Modal';
 
 export type ChannelDetailsScreenRouteProp = RouteProp<
   RootStackParamList,
@@ -25,12 +24,10 @@ export type ChannelDetailsScreenNavigationProp =
 
 export default function ChannelDetailsView() {
   return (
-    <CustomPortalProvider>
-      <View style={styles.pageContainer}>
-        <PageHeader />
-        <ServerMemberList />
-      </View>
-    </CustomPortalProvider>
+    <View style={styles.pageContainer}>
+      <PageHeader />
+      <ServerMemberList />
+    </View>
   );
 }
 
@@ -98,19 +95,10 @@ const RoleItem = (props: {
   );
 };
 const MemberItem = (props: {member: ServerMember; role: ServerRole}) => {
-  const {createPortal} = useCustomPortal();
+  const profileContextMenuRef = React.useRef<ModalRef>(null);
 
   const onPress = () => {
-    createPortal(
-      close => (
-        <ProfileContextMenu
-          user={props.member.user}
-          userId={props.member.userId}
-          close={close}
-        />
-      ),
-      'profile-modal',
-    );
+    profileContextMenuRef.current?.modal.present();
   };
 
   return (
@@ -123,6 +111,11 @@ const MemberItem = (props: {member: ServerMember; role: ServerRole}) => {
           {props.member.user.username}
         </Text>
       </View>
+      <ProfileContextMenu
+        ref={profileContextMenuRef}
+        user={props.member.user}
+        userId={props.member.userId}
+      />
     </CustomPressable>
   );
 };