React-Navigation Push replaces the previous screen data

user_5492813 0
Viewed 970

I am using navigation.push for navigate to same screen with different parameters, It replaces the previous all screens data by recently pushed screen

My Stack Root

      <Stack.Screen
        name='ViewProduct'
        component={ViewProduct}
        options={({ navigation, route }) => ({
          headerTitle: props => <Text style={{fontSize:16,fontWeight:'bold'}}>Product Details</Text>,
        })}
        />

My Product view screen

<TouchableOpacity delayPressIn={500} onPress={() => props.navigation.dispatch(StackActions.push('ViewProduct',{"uid":item.uid}))}>
     <View>
           <Image style={styles.prodImage} source={{uri:IMG_URL+'/images'+item.image_base_path+item.image_variant+'/m/'+item.cover_image}}/>                      
      </View>
 </TouchableOpacity>

Needed Approach

In navigation.push

product-1 >> product-2 >> product-3 >> product-4

In goback

product-1 << product-2 << product-3 << product-4

Current Issue

In navigation.push

product-1 >> product-2 >> product-3 >> product-4

In goback

product-4 << product-4 << product-4 << product-4
react-navigation react-native
1 Answers

You have to use navigation.navigate('yourscreen'). This produces your expected output. Use as below mentioned.

=> this.props.navigation.navigate('FirstScreen); 
=> this.props.navigation.navigate('SecondScreen'); 
=> this.props.navigation.navigate('ThirdScreen');

Don't use any push() or dispatch() method. For navigation if it is a class based use below method.

Example:

this.props.navigation.navigate('DetailsScreen');

If it is a functional component import useNavigation props from @react-navigation/native. Please have a look at this below example.

Example:

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function GoToButton({ screenName }) {
  const navigation = useNavigation();

  return (
    <Button
      title={`Go to ${screenName}`}
      onPress={() => navigation.navigate(screenName)}
    />
  );
}

user_101327870
Related