Weird issue with react native navigation

I'm writting an app with react native. I have a very strange issue when navigating. I have a Bottom Toolbar on the first tab I have a FlatList which navigate to the specific item when clicked. When navigating back to the FlatList and clicking on another item, it reloads the one I clicked before! But if I click on the toolbar (to the page of that FlatList) and click another item it goes to the correct item. So navigating back and selecting another is faulty.... I notice that when navigating back and chosing another the screen goes very fast (no loading data from server and componentDidMount on the specific item is NOT called).

What can it be?

Here's my code: Navigator:

const BooksStack = createStackNavigator({
  Books: { screen: BooksScreen, }, 
  CreateRaid: { screen: CreateBookscreen, }, 
  
})
const ChatsStack = createStackNavigator({
  Chats: { screen: ChatsScreen }, 
  ChatRoom: { screen: ChatRoomScreen, }, 
})
const SettingsStack = createStackNavigator({
  Settings: { screen: SettingsScreen },
  EditProfile: { screen: editProfileScreen }, 
})

const StartStack = createStackNavigator({
  Start: { screen: StartScreen },  
  Register: { screen: RegisterScreen }, 
})

const TabNavigator = createBottomTabNavigator(
  {
    Books: { screen: BooksStack },
    Chats: { screen: ChatsStack },
    Settings: { screen: SettingsStack }
  },
  
  {
    tabBarPosition: "bottom",
    tabBarComponent: props => {

      return (
        <Footer>
          <FooterTab>
            <Button
              vertical
              active={props.navigation.state.index === 0}
              onPress={() => props.navigation.replace('Tabs', {}, NavigationActions.navigate({ routeName: 'Books' }))}>
              <Icon name="book" />
              <Text>Books</Text>
            </Button>
            <Button
              vertical
              active={props.navigation.state.index === 1}
              onPress={() => props.navigation.replace('Tabs', {}, NavigationActions.navigate({ routeName: 'Chats' }))}>
              <Icon name="mail" />
              <Text>Chats</Text>
            </Button>
            <Button
               vertical
              active={props.navigation.state.index === 2}
              onPress={() => props.navigation.replace('Tabs', {}, NavigationActions.navigate({ routeName: 'Settings' }))}>
              <Icon name="settings" />
              <Text>Settings</Text>
            </Button>
          </FooterTab>
        </Footer>
      );
    }
  }
)

const AppStack = createStackNavigator({
  Start: StartStack,
  Tabs: TabNavigator,
}, {
  headerMode: 'none',
})

export default createAppContainer(AppStack)

Navigating from FlatList to specific:

        <TouchableOpacity onPress={() => this._onPressItem(item.item)}>
                <View style={{flexDirection:'row', flex:1, paddingTop: 6, paddingBottom: 1}}>
                    <View style={{flex: 2, paddingLeft: 0, alignItems: 'center',justifyContent: 'center',}}>
                        <Text style={{fontSize:16}}>{item.item.boss_name}</Text>
                        <Image style={{width:40, height:40}} source={{ uri: item.item.boss_image }} /> 
                    </View>
                </View>
        </TouchableOpacity>
        
  _onPressItem(item) {
    this.props.navigation.navigate('ChatRoom', {raidId:item._id, activePage: 'members', comingFrom:'books'});
    }

From Specific item (ChatRoom):

static navigationOptions = ({ navigation }) => {
    const {params} = navigation.state;
    const comingFrom = navigation.getParam('comingFrom');

    return {
        headerLeft:(
            <HeaderBackButton 
                tintColor={'white'} 
                onPress={
                    () => {
                        switch (comingFrom) 
                            {   
                            case 'chats': navigation.navigate(
                                        'Tabs', 
                                        {}, 
                                        NavigationActions.navigate({ 
                                            routeName: 'Chats' 
                                        })
                                        )
                                        break;
                            case 'raids': navigation.navigate(
                                        'Tabs', 
                                        {}, 
                                        NavigationActions.navigate({ 
                                            routeName: 'Raids' 
                                        })
                                        )
                                        break;
                            default: navigation.navigate(
                                        'Tabs', 
                                        {}, 
                                        NavigationActions.navigate({ 
                                            routeName: 'Raids' 
                                        })
                                        )
                                        break;
                                        
                            }
                    }
                }   
            />), 
};       

Navigating it self works but with incorrect data! Why is this happening? Why it reloads same data?



Read more here: https://stackoverflow.com/questions/65078538/weird-issue-with-react-native-navigation

Content Attribution

This content was originally published by Marco Martin at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: