title: React Native - How to hide splash screen when all components have been been rendered inside it?
body: <p>I have a function which fetches data from firebase, <code>SplashScreen.hide()</code> is called when fetching is done and states are set. The problem is, when <code>SplashScreen.hide()</code> is called, the components are still loading for 1 - 2 seconds before they appear, is there a better way of ensuring that the components are already rendered? The items being rendered are dependent on the state <code>cardComponents</code>, which when set will render the cards.</p>
  
  <p>P.S. I'm using <code>react-native-splash-screen</code></p>
  
  <pre><code>fetchCards = () =&gt; {
      let cardRef = firebase.firestore().collection('tblcard')
      let itemRef = firebase.firestore().collection('tblitem')
      let cards = []
      let items = []
      let cardComponents = []
      let today = new Date()
      today.setHours(0, 0, 0, 0)
  
      cardRef.where('date', '=', today).get().then(function(cardSnapshot) {
        cardSnapshot.forEach(function(doc) {
          cards[doc.id] = doc.data()
        })
  
        itemRef.get().then(function(itemSnapshot) {
          itemSnapshot.forEach(function(doc) {
            items[doc.id] = doc.data()
          })
  
          cards.forEach(function(card, index) {
            let id = index
            let item1 = items[card.item1]
            let item2 = items[card.item2]
            let question = card.question.replace('?', ',') + '\n' + item1.item_name + ' o ' + item2.item_name + '?'
  
            cardComponents.push({id: id, image1: item1.image_url, image2: item2.image_url, question: question})
          })
  
          this.setState({cardComponents: cardComponents})
          this.setState({cards: cards})
          this.setState({items: items})
  
          SplashScreen.hide()
        }.bind(this))
      }.bind(this))
  }
  
  render () {
    {this.state.cardComponents}
  }
  </code></pre>