CODEWITHSUNDEEP
javascriptiosreactjsreact-nativereact-navigation
John Cook
John Cook

Reputation: 83

Trying to push StackScreen in React Native

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.

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>
        )}
      />

Upvotes: 0

Views: 38

Answers (1)

satya164
satya164

Reputation: 10172

The reason your components are remounting is because there are components defined inside other components:

function BottomTabNavigator() {

  // Here
  function MessagesStack() {
    // ...
  }

  // ...
}

You need to define them outside to avoid that:

function MessagesStack() {
  // ...
}

function BottomTabNavigator() {
  // ...
}

Upvotes: 1

Related Questions