React Native reload page

user_8406828 0
Viewed 99425

So I have an app with an activity. The app checks for Internet connection at the beginning. If there are no Internet connection, it will show a screen with a button to refresh the page. The problem is that my API calls (Axios) is located on componentDidMount() where it's called only once after the first render. Is there any way I can reload the page so it calls componentDidMount again?

I mean like total refresh. I am using EXPO btw. Any help is appreciated. Sorry there are no examples, I just wanted to get the idea if possible

react-native-ios expo react-native
7 Answers

I would suggest putting your API call in it's own function fetchData within your component. fetchData can also setState after a successful fetch which will cause a re-render and show the fresh data. If you want to fetch fresh data on componentDidMount and also on a button click, then create a fetchData function and call that from within componentDidMount, then for your button just set your onPress prop appropriately onPress={this.fetchData}

user_61829320 
class MyScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
            lastRefresh: Date(Date.now()).toString(),
        }
        this.refreshScreen = this.refreshScreen.bind(this)
    }

    refreshScreen() {
        this.setState({ lastRefresh: Date(Date.now()).toString() })
    }

    render() {
        return (
            <View>
                <Text>My Screen</Text>
                <Text>Last Refresh: {this.state.lastRefresh}</Text>
                <Button onPress={this.refreshScreen} title="Refresh Screen" />
            </View>
        )
    }
}

// also put in main View Date(Date.now())
user_117629070

Remember by calling setState function on your component, you can refresh it. if there's a button that's going to refresh the page, i would do this:

<Button  onPress={() => this.setState({dummy: 1})} />

calling setState will update your component no matter what you object you pass to it. I'm not sure if re-rendering page, calls componentDidMount function, so maybe you need to move your API calls to some funciton func and call this function in your componentDidMount, and also after each button press event. example:

componentDidMount() {
  apiCalls()
}

apiCalls() {
   .... // your code
   this.setState({dummy: 1})
}

render() {
  <View>
    ...
    <Button  onPress={this.apiCalls.bind(this)} />
    ...

  </View>
}
user_55569320

I was using the Functional component and did the following. I used a state as a dependency in useEffect and changed that state on button press.

const [internetCheck, setInternetCheck] = useState(0);
useEffect(() => {
  //code
}, [internetcheck]);

return(
  <Button title='Retry' onPress(() => setInternetCheck(internetCheck + 1)) />
)
user_111860830

You can simply refresh a React Native or Expo app by doing the following in a functional component.

Step 1

const [refreshPage, setRefreshPage] = useState("");

Step 2 Then use it in whatever component you want to use and refresh the page, e.g in alert

                Alert.alert(
                    "End of News",
                  "You have read all latest news for today ",
                  [
                    {
                      text: "Refresh Page",
                      onPress: () => {
                        setRefreshPage("refresh");
                        
                      },
                    },
                  ],
                  { cancelable: false }
                );

It will bring alert, when the user clicks refresh page button, the page will be refreshed.

user_118717330

I was also stuck in the same problem then i figured it out that you just need Hooks or useState to resolve the refresh issue. In my case of refreshing random deck

    const [random1, setRandom1] = useState(
    Math.floor(Math.random() * deck.length) + 1
    );

    <Image source={deck[random1]} style={styles.img} />

    <Button
    title="Refresh?"
    onPress={() => {
      setRandom1(Math.floor(Math.random() * deck.length) + 1);
    }} />

I hope this might be helpful.

user_170152570
Related