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
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.
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 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.
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.
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>
)
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With