2

if I navigate in a top tab inside the bottom tab 1, and then I try to go to the bottom tab2, after a few seconds it brings me back to the initial bottom tab 1

these are my dependencies: "dependencies": { "@react-native-async-storage/async-storage": "^1.17.3", "@react-native-community/cli": "^6.4.0", "@react-navigation/bottom-tabs": "^6.3.1", "@react-navigation/drawer": "^6.4.1", "@react-navigation/material-bottom-tabs": "^6.2.1", "@react-navigation/material-top-tabs": "^6.2.1", "@react-navigation/native": "^6.0.10", "@react-navigation/native-stack": "^6.6.1", "accordion-collapse-react-native": "^1.1.0", "pushy-react-native": "^1.0.22", "react": "^17.0.2", "react-native": "^0.68.2", "react-native-background-fetch": "^4.1.0", "react-native-background-geolocation": "^4.7.1", "react-native-bootsplash": "^4.1.4", "react-native-gesture-handler": "^2.4.1", "react-native-in-app-review": "^3.3.3", "react-native-linear-gradient": "^2.5.6", "react-native-modal": "^13.0.1", "react-native-pager-view": "^5.4.15", "react-native-paper": "^4.12.0", "react-native-reanimated": "^2.6.0", "react-native-render-html": "^6.3.4", "react-native-safe-area-context": "^3.4.1", "react-native-screens": "^3.13.1", "react-native-tab-view": "^3.1.1", "react-native-vector-icons": "^9.1.0", "rn-fetch-blob": "^0.10.13" },

animation here --> http://tkdevolution.it/app-navigation-bug.gif

app.js:

<NavigationContainer onReady={() => RNBootSplash.hide({ fade: true })}>
          <AllAppNavigation.Navigator initialRouteName={initialRouteName} screenOptions={{header: () => null}}>
            <AllAppNavigation.Screen name="IndexScreen" children={IndexDrawerNavigator} />
            <AllAppNavigation.Screen name="HomeScreen" children={StackNavigator} initialParams={{gidcom: String(GIdCom), gdatacom: String(GDataCom)}} />
          </AllAppNavigation.Navigator>
        </NavigationContainer>

stack navigator:

<Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen name="StackHome"
        component={BottomTabNavigator}
        initialParams={{screen:'TabHome', 
          // qui passiamo i parametri al bottom navigator perchè il context non è ancora caricato perchè è asincrono
          gidcom: idCom, 
          gdatacom: JSON.stringify(GDataCom)
        }}
        options={() => ({
          headerLeft: () => LogoComune(GDataCom),
          headerTitle: () => TitoloHeader(GDataCom),
          headerRight: () => DotsIcon(navigation)
        })}
      />
</Stack.Navigator>

tab navigators:

const MaterialTopNavigatorAvvisi = () => {
  return (
    <Tab2.Navigator>
      <Tab2.Screen name="InPrimoPiano" options={{tabBarLabel: 'In Primo Piano'}} component={AvvisiScreen} initialParams={{filtro: 'primopiano=true'}} />
      <Tab2.Screen name="Tutti" options={{tabBarLabel: 'Tutti'}} component={AvvisiScreen} initialParams={{filtro: ''}} />
    </Tab2.Navigator>
  );
}
const MaterialTopNavigatorEventi = () => {
  return (
    <Tab2.Navigator>
      <Tab2.Screen name="Oggi" options={{tabBarLabel: 'Oggi'}} component={EventiScreen} initialParams={{filtro: 'tipo=0'}} />
      <Tab2.Screen name="Futuri" options={{tabBarLabel: 'Futuri'}} component={EventiScreen} initialParams={{filtro: 'tipo=1'}} />
      <Tab2.Screen name="Principali" options={{tabBarLabel: 'Principali'}} component={EventiScreen} initialParams={{filtro: 'tipo=2'}} />
    </Tab2.Navigator>
  );
}

avvisiscreen:

const ItemView = ({item}, context) => {
    return (
      <ElementoLista item={item} colore={ColoreBase} destinazione='AvvisiDettaglio' />
      /* <Text>{item.Id + '. ' + item.Titolo}</Text> */
    );
  };

  useEffect(() => {
    fetch( BuildApiUrl("avvisi", idCom, null, filtro) )
      .then((response) => response.json())
      .then((json) => {setData(json)})
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  const wait = (timeout) => {
    return new Promise(resolve => setTimeout(resolve, timeout));
  }
  const [refreshing, setRefreshing] = React.useState(false);
  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    wait(2000).then(() => setRefreshing(false));
  }, []);

  //occorre inserire un datafiltered come per la indexscreen, con questo filtro: (tipo=='0' && item.PrimoPiano=='true')
  //altrimenti utilizza il data originale, con tutti gli elementi non filtrati
  return (
    <SafeAreaView style={styles.center}>
      {isLoading ? <View style={[styles.container, styles.horizontal]}><ActivityIndicator size="large" /></View> : 
      ( <View style={styles.center}>
        {(data == '') ? <NoResultMsg/> : 
          (<FlatList
            data={data}
            keyExtractor={item => item.Id.toString()}
            renderItem={(item) => ItemView(item)}
            refreshControl={
              <RefreshControl
                refreshing={refreshing}
                onRefresh={onRefresh}
              />
            }
            /* ItemSeparatorComponent={ItemSeparatorView} */
            /* showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false} */
          />)}
        </View>
      )}
    </SafeAreaView>
  );
};
Steelkeeper
  • 21
  • 1

1 Answers1

0

I have the same problem, and I found a solution :

you just have to set in your Navigator screenOptions: unmountOnBlur:true

Louis
  • 1
  • 2