CODEWITHSUNDEEP
sqlitereact-nativepage-refresh
Mochi08
Mochi08

Reputation: 197

How to refresh data retrieved from SQLite when table is updated in React Native?

In my home screen I have buttons that lead to different screens where a test is given. When a user completes a test, the score is inserted into SQLite db file. When user clicks on "Home" to go back to home screen, I want to display the new score in the results section. Something like this:

Home Screen (App.js):

import Test1 from './Tests/Test1";

class HomeScreen extends React.Component { 
   constructor(props) {
      super(props);

      this.state = {
          test1Score: 0,
      }

      //Retrieve last test score from SQLite table
      //setState for test1Score
      getTestScoreFromSQLiteDBAndSetState();
   }

   render() {
      return(
         <Button onPress={this.gotoTest1()} />
         <Text>Last test result: {this.state.test1Score}</Text>
   )}
}

Test1.js:

onTestComlete() {
   //insert the test score to the SQLite table
   insertTestScoreToSQLiteDB();
}

<Button onPress={navigation.navigate('HomeScreen')} title='Home' />

This is the basic setup, I'm not going to post the full codes as it gets too messy.

Right now I am able to insert the score to the db table. Problem is in the HomeScreen, the getTestScoreFromSQLiteDBAndSetState part only execute when the first time the app is loaded. So if I complete Test1, then press "Home" to navigate to HomeScreen, the score does not refresh.

Is there any technique in React Native to accomplish this?

EDIT: For those who runs into similar issue, here's what I did based on the #2 solution of the accepted answer:

HomeScreen:

navigateToTest1 = () => {
   this.props.navigation.navigate('test1', {
       updateResult: this.updateTest1Results.bind(this)
   });
}

updateTest1Results = () => {
    //codes to retrieve result and setState goes here
}

Test1.js:

const { params } = this.props.navigation.state;
params.updateResult();

Upvotes: 0

Views: 2769

Answers (1)

MPN7
MPN7

Reputation: 1313

Whats happening is when you go back react-navigation doesn't load your screen again just show what was there before for better performance. You have a lot of possibilities some of them would look like this:

1- Instead of using navigation.navigate() use navigation.push() that will create a new screen so it's going to update whatever there is to update.

2- you can call a function on test1.js from homeScreen before you navigate, just pass a function from homescreen to test as a param or as a prop (i don't know how it's constructed). On that function just have what you want to update, so the call to the sqlite table and the setState

3- use react-navigation events.

<NavigationEvents
  onWillFocus={payload => console.log('will focus',payload)}
  onDidFocus={payload => console.log('did focus',payload)}
  onWillBlur={payload => console.log('will blur',payload)}
  onDidBlur={payload => console.log('did blur',payload)}
/>

for more information about react-navigation events see this
for more information about navigation.push() see this

Upvotes: 1

Related Questions