How to re render component on goBack icon press in header

Question

I am trying to re render the component after goBack press . By using goBack I am able to go back page ,but that page is not getting refresh. How I can solve it ? After goBack I have to call some api ,and now after back non of the function is getting call . I can only call if page will refresh or rerender .
Example , from page 1 header am clicking back arrow icon (i.e goBack fucntion) to go on Page 1 and after going page 1 it should refresh .

<View style={{ flexDirection: 'row' }} hasSubtitle={!!subtitle}>
            <Left style={{ flexGrow: 1 ,top: -10}}>
              <Button transparent onPress={() => {
                this.props.navigation.goBack();
              }}>
                <Icon name="arrow-back"/>
              </Button>
            </Left>
            <Body
              style={{ textAlign: 'center', width: '100%', flexGrow: 2, alignItems: 'center', justifyContent: 'center' }}>
            {!!title && <Title style={{ color: '#000' }}>{title}</Title>}
            {!!subtitle &&
            <Subtitle style={{ color: '#000' }}>
              {icon && <IconSmall icon={icon} type="MaterialCommunityIcons"/>}
              {subtitle}
            </Subtitle>}
            </Body>
            <Right style={{ flexGrow: 1, marginTop: 2 }}></Right>
          </View>

Thanks

where I'll call this , after goBack by default it is going on previos screen . Please elaborate . — Abhigyan Gaurav, May 28 '19 at 12:36
Inside the component, if you are using react hooks, u can call inside useEffect. On Class Components, you can use componentDidMount — Suresh Kumar Ariya, May 28 '19 at 12:40
https://stackoverflow.com/questions/46504660/refresh-previous-screen-on-goback and https://stackoverflow.com/questions/44223727/react-navigation-goback-and-update-parent-state — ashishdhiman2007, May 28 '19 at 12:40

score 1 · Accepted Answer · answered May 28 '19 at 12:59

1

React Navigation have events listener Component called "NavigationEvents" that can be used to know when the screen is active or inactive.

you can implement it to your code like this:

import { NavigationEvents } from 'react-navigation';

<View style={{ flexDirection: 'row' }} hasSubtitle={!!subtitle}>

<NavigationEvents
      // try only this. and your component will auto refresh when this is the active component
      onWillFocus={payload => this.setState({})}
      // other props
      onDidFocus={payload => console.log('did focus',payload)}
      onWillBlur={payload => console.log('will blur',payload)}
      onDidBlur={payload => console.log('did blur',payload)}
    />
            <Left style={{ flexGrow: 1 ,top: -10}}>
              <Button transparent onPress={() => {
                this.props.navigation.goBack();
              }}>
                <Icon name="arrow-back"/>
              </Button>
            </Left>
            <Body
              style={{ textAlign: 'center', width: '100%', flexGrow: 2, alignItems: 'center', justifyContent: 'center' }}>
            {!!title && <Title style={{ color: '#000' }}>{title}</Title>}
            {!!subtitle &&
            <Subtitle style={{ color: '#000' }}>
              {icon && <IconSmall icon={icon} type="MaterialCommunityIcons"/>}
              {subtitle}
            </Subtitle>}
            </Body>
            <Right style={{ flexGrow: 1, marginTop: 2 }}></Right>
</View>

reference for NavigationEvents: react-navigation navigation events

answered May 28 '19 at 12:59

Mervzs

1,114
7
21

Thanks .. I have created one header component and using across the application. on goBack function it is taking to previous screen , and these function is getting call .but how can I refresh the page , if I'll refresh the page all methods will call and my prob will get solved.. – Abhigyan Gaurav May 28 '19 at 13:25
does trigerring this.setState({}) not refreshing your screen? – Mervzs May 28 '19 at 13:30
if am clicking back button some function is getting call that I can see in console .but suppose I am clicking on screen page2.js and its going on page1.js ,then page1.js not getting refresh – Abhigyan Gaurav May 28 '19 at 13:34
can you please elaborate the code of screen1 and screen2 so it will be clear. and also did you already implemented the code above? on both screen? – Mervzs May 28 '19 at 13:37
there is 2 page . like Page2.js

from here am going on page1.js – Abhigyan Gaurav May 28 '19 at 13:43
go create a room – Mervzs May 28 '19 at 13:51
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/194054/discussion-between-abhigyan-gaurav-and-mervzs). – Abhigyan Gaurav May 28 '19 at 13:55

score 1 · Answer 2 · answered May 28 '19 at 14:20

You can pass a callback function to this component or page and then when you click on button to go back you should execute this callback function that will execute the api request! You can execute the callback before execute this.props.navigation.goBack();

score 1 · Answer 3 · answered Jul 06 '22 at 14:00

This is an an old question, but you incase you stumble on this.

You can archive this using the addListiner function in navigation

React.useEffect(() => {
        const unsubscribe = navigation.addListener('focus', () => {
            console.log('focus');
            
            setCart(props.carts)
        });
    
        return unsubscribe;
      }, [navigation]);

SeeDocumentation here

score 0 · Answer 4 · answered May 28 '19 at 12:57

0

You can re render the component by using react life cycle hook function shouldcomponentupdate. Specify the condition to update the state and re render the component.

answered May 28 '19 at 12:57

Ali.Hasnain

1
1

How to re render component on goBack icon press in header

4 Answers4