CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-redux
Abhigyan Gaurav
Abhigyan Gaurav

Reputation: 1904

How to reload page after navigating from another screen

// I am using below code for navigating one screen to another i.e Home page . But when am navigating home page , I have to refresh the page ..reload . In current , when i am coming to home screen non of the life cycle method is getting call . Specially UserAvatar component I have to refresh ,or recall . Please suggest 

    <View style={{textTransform: 'lowercase'}}><YellowBtn label="Go to 
  Dashboard"
               OnClick={this._redirectCustomerView}/></View>


        _redirectCustomerView = () => {
            this.props.navigation.navigate('UserHome');
          };

// Below is home page 

 export default class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = { title: 'Hello!', hasFooterPermission: false };
        console.log("Valuueeeeeee");
      }

      async componentDidMount() {
        const homeFooter = await hasPermission('clm.360D.fe.restrictedView.allowed');

        this.setState({
          hasFooterPermission: homeFooter
        })
      }

      onSearchClick = () => {
        this.props.navigation.navigate('SubscriberSearch');
      };
      componentWillMount(){
        console.log(" Home page dataaaa");
      }


      render() {
        return (
          <View>
            <ImageBackground source={BG} style={{ width: '100%', height: '100%' }} resizeMode="cover">
              <View  style={{ paddingTop: 5 , alignContent:'space-between',flexDirection:'row'}}>
                <View style={{alignSelf: 'flex-start', flex:1}}>
                  <UserAvatar navigationProps={this.props.navigation} avatarSize={40} isTouchable={true}/>
                </View>
                {/* <View style={{alignSelf: 'flex-end'}}>
                  <Icon
                    name="bell-outline"
                    type="MaterialCommunityIcons"
                    style={{ color: '#FFFFFF' }}
                    onPress={() => Toastr.showToast('No new notifications!', 3000)}
                  />
                </View> */}
              </View>

Upvotes: 6

Views: 16241

Answers (3)

Shankar S Bavan
Shankar S Bavan

Reputation: 962

use push instead of navigate

this.props.navigation.push('UserHome');

Upvotes: 18

Grotta
Grotta

Reputation: 1

If you add a listener on the home page through the navigation prop, you can call a function when a transition to or from the home page is about to happen ('willFocus'/'willBlur') or if it has completed ('didFocus'/'didBlur'). This worked for me:

componentDidMount(){
  this.props.navigation.addListener('willFocus',this.load)
}
load = () => {
  //whatever you want to do when the page loads
}

Documentation here: https://reactnavigation.org/docs/en/navigation-prop.html

Upvotes: 0

pinturic
pinturic

Reputation: 2263

It is not homepage duty to know if you have to refresh the page. The suggested approach is that when the condition to reload is met (avatar update, user properties changes, etc) then the calling entity should go to the homepage and if needed ask for a reload (i.e., window.location.reload(true))

Upvotes: 0

Related Questions