Skip to content

Commit b24174f

Browse files
khushal87khushal87
authored
fix: use native stack navigator and broken navigate call (#3275)
1 parent 97611c8 commit b24174f

24 files changed

+103
-61
lines changed

‎examples/SampleApp/App.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
22
import { DevSettings, LogBox, Platform, useColorScheme } from 'react-native';
33
import { createDrawerNavigator } from '@react-navigation/drawer';
44
import { DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
5-
import { createStackNavigator } from '@react-navigation/stack';
5+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
66
import { SafeAreaProvider } from 'react-native-safe-area-context';
77
import {
88
Chat,
@@ -92,8 +92,8 @@ notifee.onBackgroundEvent(async ({ detail, type }) => {
9292
});
9393

9494
const Drawer = createDrawerNavigator();
95-
const Stack = createStackNavigator<StackNavigatorParamList>();
96-
const UserSelectorStack = createStackNavigator<UserSelectorParamList>();
95+
const Stack = createNativeStackNavigator<StackNavigatorParamList>();
96+
const UserSelectorStack = createNativeStackNavigator<UserSelectorParamList>();
9797
const App = () => {
9898
const { chatClient, isConnecting, loginUser, logout, switchUser } = useChatClient();
9999
const [messageListImplementation, setMessageListImplementation] = useState<
@@ -163,7 +163,9 @@ const App = () => {
163163
messageListImplementationStoredValue?.id as MessageListImplementationConfigItem['id'],
164164
);
165165
setMessageListMode(messageListModeStoredValue?.mode as MessageListModeConfigItem['mode']);
166-
setMessageListPruning(messageListPruningStoredValue?.value as MessageListPruningConfigItem['value']);
166+
setMessageListPruning(
167+
messageListPruningStoredValue?.value as MessageListPruningConfigItem['value'],
168+
);
167169
};
168170
getMessageListConfig();
169171
return () => {

‎examples/SampleApp/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"@react-navigation/bottom-tabs": "7.3.14",
3737
"@react-navigation/drawer": "7.4.1",
3838
"@react-navigation/native": "^7.1.10",
39-
"@react-navigation/stack": "^7.3.3",
39+
"@react-navigation/native-stack": "^7.6.2",
4040
"@shopify/flash-list": "^2.1.0",
4141
"emoji-mart": "^5.6.0",
4242
"lodash.mergewith": "^4.6.2",

‎examples/SampleApp/src/components/ChannelPreview.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { useAppOverlayContext } from '../context/AppOverlayContext';
2020
import { useBottomSheetOverlayContext } from '../context/BottomSheetOverlayContext';
2121
import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayContext';
2222

23-
import type { StackNavigationProp } from '@react-navigation/stack';
23+
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
2424

2525
import type { StackNavigatorParamList } from '../types';
2626
import { ChannelState } from 'stream-chat';
@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
4949
},
5050
});
5151

52-
type ChannelListScreenNavigationProp = StackNavigationProp<
52+
type ChannelListScreenNavigationProp = NativeStackNavigationProp<
5353
StackNavigatorParamList,
5454
'ChannelListScreen'
5555
>;

‎examples/SampleApp/src/components/ChatScreenHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { useAppContext } from '../context/AppContext';
1010
import { NewDirectMessageIcon } from '../icons/NewDirectMessageIcon';
1111

1212
import type { DrawerNavigationProp } from '@react-navigation/drawer';
13-
import type { StackNavigationProp } from '@react-navigation/stack';
13+
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
1414

1515
import type { DrawerNavigatorParamList, StackNavigatorParamList } from '../types';
1616
import { NetworkDownIndicator } from './NetworkDownIndicator';
@@ -25,7 +25,7 @@ const styles = StyleSheet.create({
2525

2626
type ChatScreenHeaderNavigationProp = CompositeNavigationProp<
2727
DrawerNavigationProp<DrawerNavigatorParamList>,
28-
StackNavigationProp<StackNavigatorParamList>
28+
NativeStackNavigationProp<StackNavigatorParamList>
2929
>;
3030

3131
export const ChatScreenHeader: React.FC<{ title?: string }> = ({ title = 'Stream Chat' }) => {

‎examples/SampleApp/src/components/MenuDrawer.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
8282
return (
8383
<View style={[styles.container, { backgroundColor: white }]}>
8484
<SafeAreaView style={{ flex: 1 }}>
85-
<Pressable onPress={() => setSecretMenuPressCounter(c => c + 1)} style={[styles.userRow]}>
85+
<Pressable onPress={() => setSecretMenuPressCounter((c) => c + 1)} style={[styles.userRow]}>
8686
<Image
8787
source={{
8888
uri: chatClient.user?.image,
@@ -102,9 +102,17 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
102102
</Pressable>
103103
<View style={styles.menuContainer}>
104104
<View>
105-
<SecretMenu visible={secretMenuVisible} close={closeSecretMenu} chatClient={chatClient} />
105+
<SecretMenu
106+
visible={secretMenuVisible}
107+
close={closeSecretMenu}
108+
chatClient={chatClient}
109+
/>
106110
<TouchableOpacity
107-
onPress={() => navigation.navigate('NewDirectMessagingScreen')}
111+
onPress={() =>
112+
navigation.navigate('HomeScreen', {
113+
screen: 'NewDirectMessagingScreen',
114+
})
115+
}
108116
style={styles.menuItem}
109117
>
110118
<Edit height={24} pathFill={grey} width={24} />
@@ -120,7 +128,11 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
120128
</Text>
121129
</TouchableOpacity>
122130
<TouchableOpacity
123-
onPress={() => navigation.navigate('NewGroupChannelAddMemberScreen')}
131+
onPress={() =>
132+
navigation.navigate('HomeScreen', {
133+
screen: 'NewGroupChannelAddMemberScreen',
134+
})
135+
}
124136
style={styles.menuItem}
125137
>
126138
<Group height={24} pathFill={grey} width={24} />

‎examples/SampleApp/src/components/ScreenHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { ChannelsUnreadCountBadge } from './UnreadCountBadge';
99
import { GoBack } from '../icons/GoBack';
1010

1111
import type { DrawerNavigationProp } from '@react-navigation/drawer';
12-
import type { StackNavigationProp } from '@react-navigation/stack';
12+
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
1313

1414
import type { DrawerNavigatorParamList, StackNavigatorParamList } from '../types';
1515

@@ -52,7 +52,7 @@ const styles = StyleSheet.create({
5252

5353
type ScreenHeaderNavigationProp = CompositeNavigationProp<
5454
DrawerNavigationProp<DrawerNavigatorParamList>,
55-
StackNavigationProp<StackNavigatorParamList>
55+
NativeStackNavigationProp<StackNavigatorParamList>
5656
>;
5757

5858
export const BackButton: React.FC<{

‎examples/SampleApp/src/context/ChannelInfoOverlayContext.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React, { useContext, useState } from 'react';
22

33
import { ChannelState } from 'stream-chat';
4-
import type { StackNavigationProp } from '@react-navigation/stack';
4+
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
55
import type { ChannelContextValue } from 'stream-chat-react-native';
66

77
import type { StackNavigatorParamList } from '../types';
88

9-
export type ChannelListScreenNavigationProp = StackNavigationProp<
9+
export type ChannelListScreenNavigationProp = NativeStackNavigationProp<
1010
StackNavigatorParamList,
1111
'ChannelListScreen'
1212
>;

‎examples/SampleApp/src/context/UserInfoOverlayContext.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
import React, { useContext, useState } from 'react';
22

3-
import type { StackNavigationProp } from '@react-navigation/stack';
3+
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
44
import type { ChannelState } from 'stream-chat';
55
import type { ChannelContextValue } from 'stream-chat-react-native';
66

77
import type { StackNavigatorParamList } from '../types';
88

9-
type GroupChannelDetailsScreenNavigationProp = StackNavigationProp<
9+
type GroupChannelDetailsScreenNavigationProp = NativeStackNavigationProp<
1010
StackNavigatorParamList,
1111
'GroupChannelDetailsScreen'
1212
>;
1313

14-
export type UserInfoOverlayData = Partial<
15-
Pick<ChannelContextValue, 'channel'>
16-
> & {
14+
export type UserInfoOverlayData = Partial<Pick<ChannelContextValue, 'channel'>> & {
1715
member?: ChannelState['members'][0];
1816
navigation?: GroupChannelDetailsScreenNavigationProp;
1917
};

‎examples/SampleApp/src/screens/ChannelScreen.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
MessageActionsParams,
1919
} from 'stream-chat-react-native';
2020
import { Platform, Pressable, StyleSheet, View } from 'react-native';
21-
import type { StackNavigationProp } from '@react-navigation/stack';
21+
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
2222
import { useSafeAreaInsets } from 'react-native-safe-area-context';
2323

2424
import { useAppContext } from '../context/AppContext';
@@ -34,7 +34,7 @@ import { MessageLocation } from '../components/LocationSharing/MessageLocation.t
3434
import { useStreamChatContext } from '../context/StreamChatContext.tsx';
3535
import { CustomAttachmentPickerSelectionBar } from '../components/AttachmentPickerSelectionBar.tsx';
3636

37-
export type ChannelScreenNavigationProp = StackNavigationProp<
37+
export type ChannelScreenNavigationProp = NativeStackNavigationProp<
3838
StackNavigatorParamList,
3939
'ChannelScreen'
4040
>;

‎examples/SampleApp/src/screens/ChatScreen.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,18 @@ import { MentionsScreen } from './MentionsScreen';
88
import { BottomTabs } from '../components/BottomTabs';
99

1010
import type { RouteProp } from '@react-navigation/native';
11-
import type { StackNavigationProp } from '@react-navigation/stack';
11+
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
1212

1313
import type { BottomTabNavigatorParamList, StackNavigatorParamList } from '../types';
1414
import { DraftsScreen } from './DraftScreen';
1515
import { RemindersScreen } from './RemindersScreen';
1616

1717
const Tab = createBottomTabNavigator<BottomTabNavigatorParamList>();
1818

19-
type ChatScreenNavigationProp = StackNavigationProp<StackNavigatorParamList, 'MessagingScreen'>;
19+
type ChatScreenNavigationProp = NativeStackNavigationProp<
20+
StackNavigatorParamList,
21+
'MessagingScreen'
22+
>;
2023
type ChatScreenRouteProp = RouteProp<StackNavigatorParamList, 'MessagingScreen'>;
2124

2225
type Props = {

0 commit comments

Comments
 (0)