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

Question

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

jevakallio · Accepted Answer · 2018-02-08T10:14:51.467

24

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>
    )
  }
}

edited Feb 08 '18 at 10:14

answered Feb 08 '18 at 10:07

jevakallio

35,324
3
105
112

10

so you are saying the amazing React-Native didnt implement a single function called `refresh` or `reload`? – Raheel Hasan Feb 09 '18 at 00:16
3

using `stack navigation`, if I select another screen and comeback to this screen, its all refreshed.. all fields are empty, all as good as new. why cant that be implemented by react itself!! – Raheel Hasan Feb 09 '18 at 00:17
3

It's not that they couldn't implement a method like that, it's more that they *shouldn't*. What you're doing is really an antipattern and there are better probably better solutions to what you're after. – jevakallio Feb 09 '18 at 16:59
@jevakallio this trick is realy nice but it couldn't help me out, when I change my orientation .my UI didnt adjust automaticaly as per orientation so I am looking for a solution which can re render my UI. – Vishal Pachpande Dec 10 '18 at 11:56
@jevakallio You are a life saver, I was trying to do the same for last two days, your solution did the trick :) . I could give 100 up votes if there is an option :) – Saimuga Oct 28 '20 at 00:53
1

How could you implement this when using React's hooks and functional components? – xv8 Jul 25 '21 at 10:07
1

@xv8 I just did this in my project. Same principal, keep your uniqueId in the state, increment it when you care, and add it to the component that's stick like this ... – cleblanc Oct 28 '21 at 17:59

score 0 · Answer 2 · answered Feb 05 '21 at 19:21

My solution is to use redux to have the second page refresh the global state. Then on the first page (when you go back), use useEffect to refresh the wanted data, based on the alteration of the element in the global state. From the parent (first) page:

import { useSelector } from 'react-redux';
const contacts_update = useSelector( state => state.contact.profile)

useEffect(() => {
  loadContacts();
}, [contacts_update]);

score -1 · Answer 3 · answered Jan 23 '22 at 22:37

-1

You can add // @refresh reset => https://reactnative.dev/docs/fast-refresh#tips

answered Jan 23 '22 at 22:37

Pascal Nitcheu

667
7
8

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

3 Answers3