Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6211

Data from firebase is not loaded once in react-native app

$
0
0

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.


Viewing all articles
Browse latest Browse all 6211

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>