CODEWITHSUNDEEP
react-native
Shashika Virajh
Shashika Virajh

Reputation: 9457

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

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?

Upvotes: 2

Views: 16749

Answers (4)

U.A
U.A

Reputation: 3373

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]);

Upvotes: 8

Vishal Dhaduk
Vishal Dhaduk

Reputation: 510

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();

Upvotes: 1

Arun kumar
Arun kumar

Reputation: 1081

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
  });
}

Upvotes: 1

Deepak
Deepak

Reputation: 734

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();
            }}
        />
    )

Upvotes: 0

Related Questions