Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 346
Abhigyan Gaurav Avatar asked May 24 '19 04:05

Abhigyan Gaurav


People also ask

How do you refresh a page with navigate in react?

If set to true, the browser will do a complete page refresh from the server and not from the cached version of the page. import React from 'react'; function App() { function refreshPage() { window. location. reload(false); } return ( <div> <button onClick={refreshPage}>Click to reload!

How do I refresh the same page in react native?

React Native provides an individual RefreshControl component specifically to implement pull-to-refresh easily in a React Native app. If you're rendering a list of data using the ScrollView or FlatList component, you can use RefreshControl to add the pull-to-refresh capability.

How to refresh page first and then go to next page?

or the button click event <INPUT TYPE="button" onClick="history.go(0)" VALUE="next page"> when you use this, you refresh your page first and then go to next page, when you return back it will be having the last refreshed state.

How be decides to go back to the previous page?

Be decides to go back to the previous page and clicks the back button in browser. And when he is back, he sees the changes on the page as the browser showed the page (probably some browser cahing) before he triggerd the ajax (on/off classes) – John Doeherskij

Why doesn't the script reload when back and forward button clicks?

The above will work 100% when back or forward button has been clicked using ajax as well. if it doesn't, there must be a misconfiguration in a different part of the script. For example it might not reload if something like one of the example in the previous post is used window.history.pushState('', null, './');

Do I need to reload the page after I activate a route?

That means you'll have to listen for changes in the activated route and a page reload isn't required at all.


1 Answers

use push instead of navigate

this.props.navigation.push('UserHome');
like image 61
Shankar S Bavan Avatar answered Sep 22 '22 21:09

Shankar S Bavan