fix: remove navigation

Author: isekovanic

examples/SampleApp/App.tsx

@@ -1,8 +1,5 @@
 import React, { useEffect } from 'react';
 import { DevSettings, LogBox, Platform, Text, useColorScheme, View } from 'react-native';
-import { DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { AppContext } from './src/context/AppContext';
 import { AppOverlayProvider } from './src/context/AppOverlayProvider';
 import { UserSearchProvider } from './src/context/UserSearchContext';
@@ -39,22 +36,21 @@ console.assert = () => null;
 
 // when a channel id is set here, the intial route is the channel screen
 const initialChannelIdGlobalRef = { current: '' };
-
-const Stack = createStackNavigator<StackNavigatorParamList>();
-const UserSelectorStack = createStackNavigator<UserSelectorParamList>();
 const App = () => {
   const { chatClient, isConnecting, loginUser, logout, switchUser } = useChatClient();
   const colorScheme = useColorScheme();
   const streamChatTheme = useStreamChatTheme();
 
   return (
-    <SafeAreaProvider
+    <View
       style={{
-        backgroundColor: '#FCFCFC',
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
       }}
     >
       <View><Text>This is a test build, please disregard it.</Text></View>
-    </SafeAreaProvider>
+    </View>
   );
 };
 

examples/SampleApp/ios/Podfile.lock

@@ -1332,81 +1332,6 @@ PODS:
     - React-jsiexecutor
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
-  - react-native-safe-area-context (5.4.1):
-    - 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-native-safe-area-context/common (= 5.4.1)
-    - react-native-safe-area-context/fabric (= 5.4.1)
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-renderercss
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - Yoga
-  - react-native-safe-area-context/common (5.4.1):
-    - 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
-  - react-native-safe-area-context/fabric (5.4.1):
-    - 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-native-safe-area-context/common
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-renderercss
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - Yoga
   - React-NativeModulesApple (0.79.3):
     - glog
     - hermes-engine
@@ -1798,7 +1723,6 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
-  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-oscompat (from `../node_modules/react-native/ReactCommon/oscompat`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -1915,8 +1839,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   React-microtasksnativemodule:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
-  react-native-safe-area-context:
-    :path: "../node_modules/react-native-safe-area-context"
   React-NativeModulesApple:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios"
   React-oscompat:
@@ -2023,7 +1945,6 @@ SPEC CHECKSUMS:
   React-logger: 44e070aefe084568c02b544b9d7d436703be1a47
   React-Mapbuffer: ed1f528261013e46790379cc6727b8005e169a67
   React-microtasksnativemodule: da563fd4cb7ecc23f67b5f15b92dfe94a9791e2d
-  react-native-safe-area-context: f2e97b088ae5f3078f1ad03f51a44bd84f479053
   React-NativeModulesApple: c761e39d8bb17a074530cb637ec6fe4460fac3af
   React-oscompat: f26aa2a4adc84c34212ab12c07988fe19e9cf16a
   React-perflogger: fb196ad3fa3263afc55f773a10c2741517a27f7c

examples/SampleApp/package.json

@@ -23,13 +23,9 @@
     "clean-all": "yarn clean && rm -rf node_modules && rm -rf ios/Pods && rm -rf vendor && bundle install && yarn install && cd ios && bundle exec pod install && cd -"
   },
   "dependencies": {
-    "@react-navigation/bottom-tabs": "7.3.14",
-    "@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-safe-area-context": "^5.4.1"
+    "react-native-gesture-handler": "^2.26.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",

examples/SampleApp/src/components/AddMemberBottomSheet.tsx

@@ -7,7 +7,6 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { UserSearchResultsGrid } from './UserSearch/UserSearchResultsGrid';
 
@@ -65,7 +64,6 @@ export const AddMemberBottomSheet: React.FC = () => {
 
   const channel = data && isAddMemberBottomSheetData(data) ? data.channel : undefined;
 
-  const insets = useSafeAreaInsets();
   const {
     clearText,
     loading: loadingResults,
@@ -88,7 +86,7 @@ export const AddMemberBottomSheet: React.FC = () => {
       style={[
         styles.container,
         {
-          marginBottom: insets.bottom,
+          marginBottom: 0,
         },
       ]}
      />

examples/SampleApp/src/components/BottomTabs.tsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { ChannelsUnreadCountBadge, ThreadsUnreadCountBadge } from './UnreadCountBadge';
 
 import { ChatsTab } from '../icons/ChatsTab';
 import { ThreadsTab } from '../icons/ThreadsTab';
 import { MentionsTab } from '../icons/MentionsTab';
 
-import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
-import type { Route } from '@react-navigation/native';
-
 const styles = StyleSheet.create({
   notification: {
     left: 25, // size of icon
@@ -61,12 +57,7 @@ const getTab = (key: string) => {
   }
 };
 
-type TabProps = Pick<BottomTabBarProps, 'navigation' | 'state'> & {
-  index: number;
-  route: Route<string>;
-};
-
-const Tab = (props: TabProps) => {
+const Tab = (props) => {
   const { navigation, state, route, index } = props;
   const tab = getTab(route.name);
 
@@ -104,16 +95,15 @@ const Tab = (props: TabProps) => {
   );
 };
 
-export const BottomTabs: React.FC<BottomTabBarProps> = (props) => {
+export const BottomTabs: React.FC = (props) => {
   const { navigation, state } = props;
-  const { bottom } = useSafeAreaInsets();
 
   return (
     <View
       style={[
         styles.tabListContainer,
         {
-          paddingBottom: bottom,
+          paddingBottom: 0,
         },
       ]}
     >

examples/SampleApp/src/components/ChannelPreview.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
 import { RectButton } from 'react-native-gesture-handler';
 import Swipeable from 'react-native-gesture-handler/Swipeable';
 
 import { useAppOverlayContext } from '../context/AppOverlayContext';
 import { useBottomSheetOverlayContext } from '../context/BottomSheetOverlayContext';
 import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayContext';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
-
 import type { StackNavigatorParamList } from '../types';
 
 const styles = StyleSheet.create({
@@ -36,11 +33,6 @@ const styles = StyleSheet.create({
   },
 });
 
-type ChannelListScreenNavigationProp = StackNavigationProp<
-  StackNavigatorParamList,
-  'ChannelListScreen'
->;
-
 export const ChannelPreview = (
   props,
 ) => {
@@ -52,9 +44,6 @@ export const ChannelPreview = (
 
   const { data, setData } = useChannelInfoOverlayContext();
 
-
-  const navigation = useNavigation<ChannelListScreenNavigationProp>();
-
   const otherMembers = channel
     ? Object.values(channel.state.members).filter((member) => member.user?.id !== data?.clientId)
     : [];

examples/SampleApp/src/components/ChatScreenHeader.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import { Image, StyleSheet, TouchableOpacity } from 'react-native';
-import { CompositeNavigationProp, useNavigation } from '@react-navigation/native';
 
 import { RoundButton } from './RoundButton';
 import { ScreenHeader } from './ScreenHeader';
 
 import { useAppContext } from '../context/AppContext';
 import { NewDirectMessageIcon } from '../icons/NewDirectMessageIcon';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
 
 import type { DrawerNavigatorParamList, StackNavigatorParamList } from '../types';
 import { NetworkDownIndicator } from './NetworkDownIndicator';
@@ -21,21 +19,15 @@ const styles = StyleSheet.create({
   },
 });
 
-type ChatScreenHeaderNavigationProp = CompositeNavigationProp<
-  DrawerNavigationProp<DrawerNavigatorParamList>,
-  StackNavigationProp<StackNavigatorParamList>
->;
-
 export const ChatScreenHeader: React.FC<{ title?: string }> = ({ title = 'Stream Chat' }) => {
 
-  const navigation = useNavigation<ChatScreenHeaderNavigationProp>();
   const { chatClient } = useAppContext();
 
   return (
     <ScreenHeader
       // eslint-disable-next-line react/no-unstable-nested-components
       LeftContent={() => (
-        <TouchableOpacity onPress={navigation.openDrawer}>
+        <TouchableOpacity onPress={() => {}}>
           <Image
             source={{
               uri: chatClient?.user?.image,

examples/SampleApp/src/components/ConfirmationBottomSheet.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useAppOverlayContext } from '../context/AppOverlayContext';
 import {
@@ -49,7 +48,6 @@ export const ConfirmationBottomSheet: React.FC = () => {
   const { data: contextData, reset } = useBottomSheetOverlayContext();
   const data = contextData && !isAddMemberBottomSheetData(contextData) ? contextData : undefined;
 
-  const inset = useSafeAreaInsets();
 
   if (!data) {
     return null;
@@ -62,7 +60,7 @@ export const ConfirmationBottomSheet: React.FC = () => {
       style={[
         styles.container,
         {
-          marginBottom: inset.bottom,
+          marginBottom: 0,
         },
       ]}
     >

examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { NavigationProp, useNavigation } from '@react-navigation/native';
 import dayjs from 'dayjs';
 import calendar from 'dayjs/plugin/calendar';
 
@@ -64,8 +63,6 @@ export const MessageSearchList: React.FC<MessageSearchListProps> = React.forward
       refreshList,
       showResultCount = false,
     } = props;
-    const navigation =
-      useNavigation<NavigationProp<StackNavigatorParamList, 'ChannelListScreen'>>();
 
     if (!messages && !refreshing) {
       return null;

examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Alert } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import { useNavigation } from '@react-navigation/core';
 
 import { NewDirectMessagingScreenNavigationProp } from '../screens/NewDirectMessagingScreen';
 
@@ -67,7 +66,6 @@ const MemoizedNewDirectMessagingSendButton = React.memo(
  */
 export const NewDirectMessagingSendButton = (props) => {
   const { chatClient } = useAppContext();
-  const navigation = useNavigation<NewDirectMessagingScreenNavigationProp>();
   const { selectedUserIds, reset } = useUserSearchContext();
 
   return null;