I'm making a react-native app with typescript which has three bottom tabs.
The issue is when I move to another tab, the data from the firebase is not loaded once.
import React, {useState, useEffect} from 'react';
import {NavigationParams} from 'react-navigation';
import ExplorePresenter from './ExplorePresenter';
import getAllMovies from '../../../api/Movie/getAllMovies';
interface Props {
navigation: NavigationParams;
}
function ExploreContainer({navigation}: Props) {
const [loading, setLoading] = useState(true);
let allMovies: any;
async function preload() {
try {
console.log('entered');
allMovies = await getAllMovies();
setLoading(true);
} catch (error) {
console.error(error);
} finally {
console.log(allMovies);
setLoading(false);
}
}
useEffect(() => {
preload();
}, []);
return <ExplorePresenter loading={loading} />;
}
export default ExploreContainer;
Like the code above, if I move to the explore tab, then the preload function will call getAllMovies API.
import firebase from 'firebase';
export default async function getAllMovies() {
let movies;
try {
console.log('entered');
movies = await firebase
.database()
.ref('movies')
.once('value')
.then(snapshot => snapshot.val())
.then(res => Object.values(res));
} catch (error) {
console.error(error);
} finally {
console.log('All Movies Loaded Successfully.');
return movies;
}
}
After print two consoles(one is in preload, another is in getAllMovies), it is stuck like below.
Running "scene" with {"rootTag":81,"initialProps":{}}
setUpDeveloperTools.js:73 entered
setUpDeveloperTools.js:73 entered
In this state, if I click the explore tab again, now the data is loaded and screen is changed to 'Explore is ready'.
Running "scene" with {"rootTag":91,"initialProps":{}}
setUpDeveloperTools.js:73 entered
setUpDeveloperTools.js:73 entered
setUpDeveloperTools.js:73 SocketRocket: In debug mode. Allowing connection to any root cert
setUpDeveloperTools.js:73 All Movies Loaded Successfully.
setUpDeveloperTools.js:73 (48) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
If I don't click the tab one more, the app doesn't load the data.
What did I missing here?
I appreciate reading my issue.
Any helps would be grateful.