Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native - Whats the best way to remount / reset / reload a screen?

In React-Native, is there a way (or ways) to remount or reload the whole screen?

Im building a calculator, and if I follow this: https://facebook.github.io/react-native/docs/refreshcontrol.html

It still doesnt resets the input fields. Sure, I can write a code to reset every field on the screen, but is there a generic way to just refresh the screen?

For example, using the navigator if I just go to another screen and come back to this screen the data is gone from the fields and its all 0.0 again. How to achive that?

Here is the component's first node, everything is inside this

<ScrollView refreshControl={<RefreshControl
refreshing={this.state.refreshing} onRefresh={this.refreshMe.bind(this)} />}
>
.
.
.
.
.
.
</ScrollView>

Thanks

like image 298
Raheel Hasan Avatar asked Feb 07 '18 23:02

Raheel Hasan


People also ask

How do I refresh the same screen in react native?

Pull-to-refresh is a touchscreen gesture that retrieves all the latest data and updates the currently available data in the app. You initiate it by swiping down from the top of the screen. This action will load new data from the server and display it in the interface.

How do I automatically refresh a page in react native?

Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the React Native developer menu. With Fast Refresh enabled, most edits should be visible within a second or two.

How do I automatically refresh apps in react native?

How do I enable hot reloading react-native? First, run the app using react-native run-android on Terminal. Now, shake the Android device which has the running app. Then select the Enable Hot Reloading or Enable Live Reload option from the popup.

How do I refresh my screen in React?

Method 1: Refresh a Page Using JavaScriptwindow.location.reload(false); This method takes an optional parameter which by default is set to false. If set to true, the browser will do a complete page refresh from the server and not from the cached version of the page.


1 Answers

An often-used hack in React is to change the key prop of your component to force a re-mount of a view:

class Thing extends React.Component {
  state = {
    uniqueValue: 1
  }
  forceRemount = () => {
    this.setState(({ uniqueValue }) => ({
      uniqueValue: uniqueValue + 1
    });
  }
  render() {
    return (
      <View key={this.state.uniqueValue}>
        <Button onPress={this.forceRemount} />
      </View>
    )
  }
}

React uses element keys to track elements to update, and if the key is changed, React will conclude that the previous element no longer exists, so it will be removed and the "new" element created.

That said, this would only work if the state you want to clear is stored in a stateful component within the child component tree (e.g. an uncontrolled TextInput that does not have its value prop set).

A cleaner solution is to make all your child components controlled so that your component's UI is a pure function of it's props and state, and simply reset the component state:

const initialState = {
  //...
}

class Thing extends React.Component {
  state = initialState;
  resetState = () => {
    this.setState(initialState);
  }
  render() {
    return (
      <View}>
        <Button onPress={this.resetState} />
      </View>
    )
  }
}
like image 52
jevakallio Avatar answered Nov 12 '22 13:11

jevakallio