React navigation goBack() and set parent state

debugcn Published at Dev

Amin

I have a page. Screen as below

import React, { useState } from "react";
import { Button, Text, View } from "react-native";
export default function ViewA() {
     const [val, setVal] = useState('')
     return (
          <View>
               <Text>{val}</Text>
               <Button title="Next" onPress={()=>navigation.navigate(?)} />
          </View>
     );
}

and another page. Screen as below :

import React from "react";
import { Button } from "react-native";
export default function ViewB() {
     return <Button title="back" onPress={()=>navigation.goBack(?) } />;
}

I have two Screen viewA and viewB. in viewA a have a button. when the button press navigate to viewB and pass the setVal() function as param. then in Screen viewB when back button tap setVal() call with new value and navigation.goBack() call to come back to viewA

Hamas Hassan

You have to pass a callback function as a param from screen A to B and when button press in screen B pass your new value you like to set in the sceen A.

Complete Code:

Screen A

import React, { useState } from "react";
import { Text, View, Button } from "react-native";

const ViewA = ({ navigation }) => {
  const [val, setVal] = useState(null);

  const callBack = (value) => {
    setVal(value);
  };

  const onNextPress = () => {
    navigation.navigate("Second Screen", { callBack: callBack });
  };

  return (
    <View>
      <Text>{val}</Text>
      <Button title="Next" onPress={onNextPress} />
    </View>
  );
};

export default ViewA;

Screen B

import React from "react";
import { View, Button } from "react-native";

const ViewB = ({ route, navigation }) => {
  const onBackPress = () => {
    const { callBack } = route.params;
    callBack(5); // Your new value to set
    navigation.goBack();
  };

  return (
    <View>
      <Button title="back" onPress={onBackPress} />
    </View>
  );
};

export default ViewB;

I hope this helps you out!

Collected from the Internet

Please contact [email protected] to delete if infringement.