App.js
<NavigationContainer ref={containerRef} initialState={initialNavigationState}><Drawer.Navigator><Drawer.Screen name="Feed" component={BottomTabNavigator} options={{swipeEnabled: false}} /><Drawer.Screen name="Settings" component={SettingsStack} options={{swipeEnabled: false}} /></Drawer.Navigator></NavigationContainer>BottomTabNavigator
const BottomTab = createBottomTabNavigator();export default function BottomTabNavigator({ navigation, route }) {{...HomeStack Code}{...ProfileStack Code}const MyMessagesStack = createStackNavigator();function MessagesStack() { return (<MyMessagesStack.Navigator initialRouteName={"Messages"} screenOptions={{headerShown: false}}><MyMessagesStack.Screen name="Messages" component={MessagesScreen} /><MyMessagesStack.Screen name="Chats" component={ChatScreen} /></MyMessagesStack.Navigator> );}return (<BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME} ><BottomTab.Screen name="Home" component={HomeStack} options={{title: 'Feed'}} /><BottomTab.Screen name="Messages" component={MessagesStack} options={{title: 'Messages'}} /><BottomTab.Screen name="Profile" component={ProfileStack} options={{title: 'Profile'}} /></BottomTab.Navigator> );}MessageScreen.js
//flatscreen to render message components</View><FlatList data={Data} keyExtractor={(item, index) => index.toString()} renderItem={({ item }) => (<TouchableOpacity onPress={() => props.navigation.navigate('Chats')} ><Message image={item.image} name={item.name} lastMessage={item.message} timeStamp={item.timestamp} opened /></TouchableOpacity> )} />Whenever I activate the onPress method by tapping on a message, the MessageScreen component just re-renders rather than displaying ChatScreen. This happens even if I replace ChatScreen with any other screen. Any help on the matter is much appreciated.