Reload screen after navigation.goBack() in react-native

Question

I want to reload my screen after navigating using navigation.goBack() in react-native.

This is my code.

 // navigation options
 static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;

    return {
        headerTitle: "Comment",
        headerTitleStyle: {
            marginLeft: 0,
            width: "100%",
            textAlign: "center",
            fontWeight: 'bold',
            fontFamily: "helvetica",
        },
        headerStyle: {
            paddingLeft: 10,
            paddingRight: 10
        },
        headerLeft: (
            <ClickableIcon
                source={Close}
                height={35}
                width={35}
                onIconPressed={() => {
                    navigation.goBack();
                }}
            />
        ),
        headerRight: <View />
    };
};

how can I achieve this?

Possible duplicate of [React navigation goback() and update parent state](https://stackoverflow.com/questions/44223727/react-navigation-goback-and-update-parent-state) — Ashraf, Aug 07 '18 at 09:38

score 7 · Answer 1 · answered Jun 09 '20 at 04:18

7

This updates the current component state after goBack() invokes, But don't know-how

import { useIsFocused } from "@react-navigation/native";

  const isFocused = useIsFocused();

  useEffect(() => {}, [isFocused]);

answered Jun 09 '20 at 04:18

U.A

2,991
3
24
36

score 1 · Answer 2 · answered Nov 19 '18 at 12:02

1

You can try this. When your screen is focused, you can execute any code there

componentDidMount(){
    const {navigation} = this.props;
    navigation.addListener ('willFocus', () =>{
    // do whatever you want to do when focused
  });
}

answered Nov 19 '18 at 12:02

Arun kumar

1,041
5
20
39

score 1 · Answer 3 · answered Feb 12 '19 at 11:33

You can call back screen methods like.
For Example :- You have a Screen A and Screen B.You wants to call Screen A method from 
Screen B on back of the screen.
Navigate Screen B with Callback Method like.

handleOnNavigateBack In ScreenA

//Call this methods from ScreenB
handleOnNavigateBack(commentText) {
    console.log("BACK", commentText);
}

            <TouchableOpacity
                    style={{
                        width: '74%',
                        height: 46,
                        backgroundColor: Colors.buttonBackgroundBlue,
                        alignItems: 'center',
                        alignContent: 'center',
                        justifyContent: 'center'
                    }}
                    onPress={() => this.props.navigation.navigate('ScreenA', {
                        onNavigateBack: this.handleOnNavigateBack.bind(this)
                    })}
                >
                    <Text style={{
                        color: Colors.white,
                        fontFamily: Fonts.font_Montserrat_Bold,
                        fontSize: 15
                    }}>WRITE A REVIEW</Text>
                </TouchableOpacity>

In ScreenB:-

 //Callback For ScreenA
 this.props.navigation.state.params.onNavigateBack(this.state.commentText); 

    this.props.navigation.goBack();

score 0 · Answer 4 · answered Aug 07 '18 at 09:49

You can set a callback function during navigation to a screen as :

this.props.navigation.navigate('Comment', {
      onBack: () => this.refresh()//function to refresh screen,
    });

And call this onBack function when pressing back button in Comments screen:

headerLeft: (
        <ClickableIcon
            source={Close}
            height={35}
            width={35}
            onIconPressed={() => {
                const reloadLastScreen = navigation.getParam('onBack');
                reloadLastScreen();
                navigation.goBack();
            }}
        />
    )

Reload screen after navigation.goBack() in react-native

4 Answers4