4

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

2 Answers 2

1

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

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

Sign up to request clarification or add additional context in comments.

Comments

0

For the top tab fix, all you need to do is add animationEnabled:false, to your screenOptions. That will solve your problem

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.