Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6297

React Native single nested screen doesn't track the stack so goBack() doesn't work as expected

$
0
0

I have product categories which are multiple levels deep.

I've created a reusable Categories Screen which renders the first layer in a flatList. If I press on a category it navigates to the same Categories Screen and passes in the second layer and so on. Example:

Add Product Screen > Category Screen (L1) > Category Screen (L2) > Category Screen (L3)

The problem is when I press navigation.goBack() in (L3) it takes me back to Product Screen, which I guess is the 'root'.

Instead, I'd really like goBack to take me to L2.

I'm assuming it doesn't because I'm reusing the same screen, but I'm not sure how to nest a single screen and maintain the stack history without overwriting itself.

Here is the navigator:

<Stack.Navigator ...><Stack.Screen      component={ProductScreen}      name={RootStackParam.AddProductScreen}    /><Stack.Screen    component={CategorySelectorScreen}    name={RootStackParam.CategorySelectorScreen}    /></Stack.Navigator>

Here is the Category Screen:

export const CategoryScreen = ({ navigation }: ScreenProps) => {  const renderItem: ListRenderItem<string> = ({item}) => {      ...<Pressable onPress={() => handleCategoryPress()}>      ...</Pressable>    );  };  return (<ScreenContainer goBack={navigation.goBack}><FlatList data={categories} renderItem={renderItem} /></ScreenContainer>  );  function handleCategoryPress() {   ...    navigation.navigate('CategoryScreen',      { categories: filteredCategories, level: nextLevel },    );  }};

Here are my versions:

"@react-navigation/native": "^6.0.6","@react-navigation/native-stack": "^6.2.5","react-native": "0.70.5",

Thank you in advance.


Viewing all articles
Browse latest Browse all 6297

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>