cannot navigate to same route with different params-CodePudding

Is it possible in react-native to navigate through the same route with different params? because when I tried it, it keeps getting me an error saying that the params are undefined. Here is my code:

function Home({ route, navigation }){
const { newText } = route.params;
return (
<View style={styles.container}>
  <Text style={{fontSize:30, paddingVertical:150, fontWeight:'bold'}}>Current Balance: {JSON.stringify(newText)} PHP</Text>
  <TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("AddBalance")}>
    <Text style={styles.btnLogin}>Add Balance</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("ViewCode")}>
    <Text style={styles.btnLogin}>View Code To Pay</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("Login")}>
    <Text style={styles.btnLogin}>Logout</Text>
  </TouchableOpacity>
  </View>
 );
}

function AddBalance({ navigation }){
const[balance, newBalance] = useState(0)
const[amount, setAmount] = useState()

function addTogether(){
const Total = balance   amount;
newBalance(Total);
MyFunction();
}
return (
  <View style={styles.container}>
    <Text style={{fontSize:30, paddingVertical:20, fontWeight:'bold'}}>Add Balance</Text>
    <TextInput style={styles.inputBox} placeholder="Enter Amount" keyboardType={'numeric'} 
    onChangeText={(text) => setAmount(Number.parseInt(text))}></TextInput>
    <TouchableOpacity style={styles.btnLogin1} onPress ={addTogether}>
      <Text style={styles.btnLogin}>Continue</Text>
    </TouchableOpacity>
    <TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("Home", {newText: 
       balance})}>
      <Text style={styles.btnLogin}>Back</Text>
    </TouchableOpacity> 
    </View>
);
}

function ViewCode({ navigation }){
return (
<View style={styles.container}>
  <Text style={{fontSize:30, fontWeight:'bold'}}>Your Code is:</Text>
  <Text style={{fontSize:20, textAlign:'center'}}>R3fGH7X95iW</Text>
  <TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("Home")}>
    <Text style={styles.btnLogin}>Back</Text>
    </TouchableOpacity>
  </View>
);
}

So the error goes when I navigate to view code to pay and click the back button. How can I solve this? I also created a duplicate screen for a home to manage to go back to the home screen but when I tried to navigate to the duplicate home screen, the current balance became 0 again. what I want to do is whenever the user go back to home screen the current balance will base upon the balance the users added.

CodePudding user response：

The problem is in Home, you assume route.params always there (codes below)

const { newText } = route.params;

but, when you press the back button in ViewCode, it will call navigate.navigation("Home"); without any params. (codes below)

<TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("Home")}>
    <Text style={styles.btnLogin}>Back</Text>
</TouchableOpacity>

This will lead to the error that you got.

The solution is to make the param optional. You can replace this code:

const { newText } = route.params;

const { newText } = route.params || {newText: ""};

You can replace "" with any other text as the default newText.

For saving the value globally, I recommend using Context from React. You can read more about it here

Here is the example of a Provider component you can use:

const ExampleContext = React.createContext({
  setBalance: null,
  balance: "",
});

const ExampleProvider = (props) => {
  const [balance, setBalance] = useState("");

  return (
    <ExampleContext.Provider
      value={{
        balance: balance,
        setBalance: setBalance,
      }}
    >
      {props.children}
    </ExampleContext.Provider>
  );
};

and wrap your navigator with ExampleProvider

then call setBalance from the new context like this:

function AddBalance({ navigation }){
const balanceContext = React.useContext(ExampleContext);
const[amount, setAmount] = useState()

function addTogether(){
const Total = balance   amount;
balanceContext.setBalance(Total);
MyFunction();
}

and get balance from context instead from the route.params

function Home({ route, navigation }){
const balanceContext = React.useContext(ExampleContext);
const newText = balanceContext.balance;