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.