fix: remove reanimated and some nav stuff

Author: isekovanic

examples/SampleApp/App.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import { DevSettings, LogBox, Platform, Text, useColorScheme, View } from 'react-native';
-import { createDrawerNavigator } from '@react-navigation/drawer';
 import { DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -19,7 +18,6 @@ import { ChannelPinnedMessagesScreen } from './src/screens/ChannelPinnedMessages
 import { ChatScreen } from './src/screens/ChatScreen';
 import { GroupChannelDetailsScreen } from './src/screens/GroupChannelDetailsScreen';
 import { LoadingScreen } from './src/screens/LoadingScreen';
-import { MenuDrawer } from './src/components/MenuDrawer';
 import { NewDirectMessagingScreen } from './src/screens/NewDirectMessagingScreen';
 import { NewGroupChannelAddMemberScreen } from './src/screens/NewGroupChannelAddMemberScreen';
 import { NewGroupChannelAssignNameScreen } from './src/screens/NewGroupChannelAssignNameScreen';
@@ -37,7 +35,6 @@ if (__DEV__) {
 import type { StackNavigatorParamList, UserSelectorParamList } from './src/types';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { navigateToChannel, RootNavigationRef } from './src/utils/RootNavigation';
-import FastImage from 'react-native-fast-image';
 
 LogBox.ignoreLogs(['Non-serializable values were found in the navigation state']);
 console.assert = () => null;
@@ -56,7 +53,6 @@ notifee.onBackgroundEvent(async ({ detail, type }) => {
   }
 });
 
-const Drawer = createDrawerNavigator();
 const Stack = createStackNavigator<StackNavigatorParamList>();
 const UserSelectorStack = createStackNavigator<UserSelectorParamList>();
 const App = () => {

examples/SampleApp/babel.config.js

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

examples/SampleApp/ios/Podfile.lock

@@ -1955,130 +1955,6 @@ PODS:
     - RNNotifee/NotifeeCore (= 9.1.8)
   - RNNotifee/NotifeeCore (9.1.8):
     - React-Core
-  - RNReanimated (3.18.0):
-    - DoubleConversion
-    - glog
-    - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-hermes
-    - React-ImageManager
-    - React-jsi
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-renderercss
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated (= 3.18.0)
-    - RNReanimated/worklets (= 3.18.0)
-    - Yoga
-  - RNReanimated/reanimated (3.18.0):
-    - DoubleConversion
-    - glog
-    - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-hermes
-    - React-ImageManager
-    - React-jsi
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-renderercss
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated/apple (= 3.18.0)
-    - Yoga
-  - RNReanimated/reanimated/apple (3.18.0):
-    - DoubleConversion
-    - glog
-    - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-hermes
-    - React-ImageManager
-    - React-jsi
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-renderercss
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - Yoga
-  - RNReanimated/worklets (3.18.0):
-    - DoubleConversion
-    - glog
-    - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-hermes
-    - React-ImageManager
-    - React-jsi
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-renderercss
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - RNReanimated/worklets/apple (= 3.18.0)
-    - Yoga
-  - RNReanimated/worklets/apple (3.18.0):
-    - DoubleConversion
-    - glog
-    - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-hermes
-    - React-ImageManager
-    - React-jsi
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-renderercss
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - Yoga
   - RNScreens (4.11.1):
     - DoubleConversion
     - glog
@@ -2216,7 +2092,6 @@ DEPENDENCIES:
   - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - "RNNotifee (from `../node_modules/@notifee/react-native`)"
-  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -2397,8 +2272,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-gesture-handler"
   RNNotifee:
     :path: "../node_modules/@notifee/react-native"
-  RNReanimated:
-    :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   Yoga:
@@ -2499,7 +2372,6 @@ SPEC CHECKSUMS:
   RNFBMessaging: 6586f18ab3411aeb3349088c19fe54283d39e529
   RNGestureHandler: 2fa49aef8b58d35bcc61abe06ffecc4bcc5268a4
   RNNotifee: 4a6ee5c7deaf00e005050052d73ee6315dff7ec9
-  RNReanimated: 2b314b18e28adf1b300f606eb0f205a1a6a643e1
   RNScreens: d9d5d8a2a484bb4446968bfa00db991f1117db44
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: b2eaabf17044cd4273a661b14eb83f9fd2c90491

examples/SampleApp/package.json

@@ -30,13 +30,11 @@
     "@react-native-firebase/app": "22.2.1",
     "@react-native-firebase/messaging": "22.2.1",
     "@react-navigation/bottom-tabs": "7.3.14",
-    "@react-navigation/drawer": "7.4.1",
     "@react-navigation/native": "^7.1.10",
     "@react-navigation/stack": "^7.3.3",
     "react": "19.0.0",
     "react-native": "^0.79.3",
     "react-native-gesture-handler": "^2.26.0",
-    "react-native-reanimated": "^3.18.0",
     "react-native-safe-area-context": "^5.4.1",
     "react-native-screens": "^4.11.1"
   },

examples/SampleApp/src/components/BottomSheetOverlay.tsx

@@ -6,19 +6,6 @@ import {
   State,
   TapGestureHandler,
 } from 'react-native-gesture-handler';
-import Animated, {
-  cancelAnimation,
-  Easing,
-  Extrapolate,
-  interpolate,
-  runOnJS,
-  useAnimatedGestureHandler,
-  useAnimatedStyle,
-  useSharedValue,
-  withDecay,
-  withSpring,
-  withTiming,
-} from 'react-native-reanimated';
 
 import { AddMemberBottomSheet } from './AddMemberBottomSheet';
 import { ConfirmationBottomSheet } from './ConfirmationBottomSheet';
@@ -39,7 +26,7 @@ const styles = StyleSheet.create({
 });
 
 export type BottomSheetOverlayProps = {
-  overlayOpacity: Animated.SharedValue<number>;
+  overlayOpacity: number;
   visible: boolean;
 };
 
@@ -50,149 +37,15 @@ export const BottomSheetOverlay = (props: BottomSheetOverlayProps) => {
 
   const { reset } = useBottomSheetOverlayContext();
 
-  const offsetY = useSharedValue(0);
-  const showScreen = useSharedValue(0);
-  const translateY = useSharedValue(0);
-  const viewHeight = useSharedValue(0);
-
-  const fadeScreen = (show: boolean) => {
-    'worklet';
-    if (show) {
-      offsetY.value = 0;
-      translateY.value = 0;
-    }
-    showScreen.value = show
-      ? withSpring(1, {
-          damping: 600,
-          mass: 0.5,
-          restDisplacementThreshold: 0.01,
-          restSpeedThreshold: 0.01,
-          stiffness: 200,
-          velocity: 32,
-        })
-      : withTiming(
-          0,
-          {
-            duration: 150,
-            easing: Easing.out(Easing.ease),
-          },
-          () => {
-            if (!show) {
-              runOnJS(reset)();
-            }
-          },
-        );
-  };
-
   useEffect(() => {
     if (visible) {
       Keyboard.dismiss();
     }
-    fadeScreen(!!visible);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
 
-  const onPan = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>({
-    onActive: (evt) => {
-      translateY.value = offsetY.value + evt.translationY;
-      overlayOpacity.value = interpolate(
-        translateY.value,
-        [0, viewHeight.value / 2],
-        [1, 0.75],
-        Extrapolate.CLAMP,
-      );
-    },
-    onFinish: (evt) => {
-      const finalYPosition = evt.translationY + evt.velocityY * 0.1;
-
-      if (finalYPosition > viewHeight.value / 2 && translateY.value > 0) {
-        cancelAnimation(translateY);
-        overlayOpacity.value = withTiming(
-          0,
-          {
-            duration: 200,
-            easing: Easing.out(Easing.ease),
-          },
-          () => {
-            runOnJS(setOverlay)('none');
-          },
-        );
-        translateY.value =
-          evt.velocityY > 1000
-            ? withDecay({
-                velocity: evt.velocityY,
-              })
-            : withTiming(100, {
-                duration: 200,
-                easing: Easing.out(Easing.ease),
-              });
-      } else {
-        translateY.value = withTiming(0);
-        overlayOpacity.value = withTiming(1);
-      }
-    },
-    onStart: () => {
-      cancelAnimation(translateY);
-      offsetY.value = translateY.value;
-    },
-  });
-
-  const panStyle = useAnimatedStyle(() => ({
-    transform: [
-      {
-        translateY: translateY.value > 0 ? translateY.value : 0,
-      },
-    ],
-  }));
-
-  const showScreenStyle = useAnimatedStyle(() => ({
-    transform: [
-      {
-        translateY: interpolate(showScreen.value, [0, 1], [viewHeight.value / 2, 0]),
-      },
-    ],
-  }));
-
   if (!visible) {
     return null;
   }
 
-  return (
-    <Animated.View pointerEvents={visible ? 'auto' : 'none'} style={StyleSheet.absoluteFill}>
-      <PanGestureHandler enabled={visible} maxPointers={1} minDist={10} onGestureEvent={onPan}>
-        <Animated.View style={StyleSheet.absoluteFillObject}>
-          <TapGestureHandler
-            maxDist={32}
-            onHandlerStateChange={({ nativeEvent: { state } }) => {
-              if (state === State.END) {
-                setOverlay('none');
-              }
-            }}
-          >
-            <Animated.View style={[styles.animatedContainer, panStyle]}>
-                <TapGestureHandler>
-                  <Animated.View
-                    onLayout={({
-                      nativeEvent: {
-                        layout: { height },
-                      },
-                    }) => {
-                      viewHeight.value = height;
-                    }}
-                    style={[
-                      styles.container,
-                      showScreenStyle,
-                      overlay === 'addMembers' ? styles.addMembers : undefined,
-                    ]}
-                  >
-                    {overlay === 'addMembers' && <AddMemberBottomSheet />}
-                    {overlay === 'confirmation' && <ConfirmationBottomSheet />}
-                  </Animated.View>
-                </TapGestureHandler>
-            </Animated.View>
-          </TapGestureHandler>
-        </Animated.View>
-      </PanGestureHandler>
-    </Animated.View>
-  );
+  return null;
 };