title: React Native randomly errors: Can't find variable image after 30 - 90 seconds
body: <p>So I'm building a React Native app using</p>
  
  <ul>
  <li>React Native - Latest</li>
  <li>MobX and MobX-React - Latest</li>
  <li>Firebase - Latest</li>
  </ul>
  
  <p>My app works fine. However, I can leave the app idle or play around with it and after 30-90 seconds I red screen with this error. Its not being very specific about what file is erroring! How can I debug this?</p>
  
  <p><a href="https://i.stack.imgur.com/zwKXy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zwKXy.png" alt="enter image description here"></a></p>
  
  <p>Firebase.js</p>
  
  <pre><code>export function getFeed(db,id,callback){
      db.collection("posts").where("userId", "==", id)
      .get()
      .then(function (querySnapshot) {
          callback(true,querySnapshot)
      })
      .catch(function (error) {
          callback(false)
          console.log("Error getting documents: ", error);
      });
  }
  </code></pre>
  
  <p>List.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
      Platform,
      StyleSheet,
      Text,
      View,
      TouchableOpacity,
      FlatList,
      ActivityIndicator,
      RefreshControl
  } from 'react-native';
  import Post from './Post';
  import Spinner from 'react-native-spinkit';
  import { Icon } from 'react-native-elements';
  import { getFeed } from '../../network/Firebase';
  import { observer, inject } from 'mobx-react';
  
  @inject('mainStore')
  @observer export default class List extends Component {
      constructor(props) {
          super(props)
          this.state = {
              dataSource: [],
              initialLoad: true,
              refreshing: false
          }
          this.getData = this.getData.bind(this)
      }
  
      componentWillMount() {
          this.getData()
      }
  
      getData() {
          this.setState({
              refreshing: true
          })
          getFeed(this.props.screenProps.db, this.props.mainStore.userData.id, (status, res) =&gt; {
              let tempArray = []
              let counter = 0
              res.forEach((doc) =&gt; {
                  let tempObj = doc.data()
                  doc.data().user
                      .get()
                      .then((querySnapshot) =&gt; {
                          tempObj.userData = querySnapshot.data()
                          tempArray.push(tempObj)
                          counter = counter + 1
                          if (counter === res.docs.length - 1) {
                              this.setState({
                                  dataSource: tempArray,
                                  initialLoad: false,
                                  refreshing: false
                              })
                          }
                      })
              });
          })
      }
  
  
      renderRow = ({ item }) =&gt; {
          return (
              &lt;Post item={item} /&gt;
          )
      }
  
      render() {
          if (this.state.initialLoad) {
              return (
                  &lt;View style={styles.spinner}&gt;
                      &lt;Spinner isVisible={true} type="9CubeGrid" size={40} color="white" /&gt;
                  &lt;/View&gt;
              )
          } else {
              return (
                  &lt;FlatList
                      data={this.state.dataSource}
                      extraData={this.state}
                      keyExtractor={(_, i) =&gt; i}
                      renderItem={(item) =&gt; this.renderRow(item)}
                      refreshControl={
                          &lt;RefreshControl
                              refreshing={this.state.refreshing}
                              onRefresh={this.getData}
                          /&gt;
                      }
                  /&gt;
              );
          }
      }
  }
  
  const styles = StyleSheet.create({
      spinner: {
          marginTop: 30,
          alignItems: 'center'
      }
  });
  </code></pre>
  
  <p>Post.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
      Platform,
      StyleSheet,
      Text,
      View,
      TouchableOpacity,
      Image
  } from 'react-native';
  import moment from 'moment';
  import { Icon } from 'react-native-elements';
  
  export default class Post extends React.PureComponent {
      render() {
          let today = moment()
          let date = this.props.item.date
          if(today.diff(date, 'days') &lt; 5){
              date = moment(date).startOf('day').fromNow()
          }else{
              date = moment(date).format('DD MMM YYYY, h:mm a')
          }
          return (
              &lt;View
                  style={styles.container}
              &gt;
                  &lt;View style={styles.top}&gt;
                      &lt;Image style={styles.profile} source={{uri: this.props.item.userData.image}} /&gt;
                      &lt;Text style={styles.title}&gt;{this.props.item.userData.firstName+' '+this.props.item.userData.lastName}&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.descriptionContainer}&gt;
                      &lt;Text style={styles.description}&gt;{this.props.item.description}&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.imageContainer}&gt;
                      &lt;Image style={styles.image} source={{uri: this.props.item.image}} /&gt;
                  &lt;/View&gt;
                  &lt;TouchableOpacity style={styles.commentsContainer}&gt;
                      &lt;View style={styles.timeFlex}&gt;
                          &lt;Text style={styles.title}&gt;{date}&lt;/Text&gt;
                      &lt;/View&gt;
                      &lt;View style={styles.commentFlex}&gt;
                          &lt;Text style={styles.title}&gt;Comments (12)&lt;/Text&gt;
                      &lt;/View&gt;
                  &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      title: {
          color: 'white',
          backgroundColor: 'transparent'
      },
      timeFlex: {
          flex: 0.5,
          alignItems: 'flex-start'
      },
      commentFlex: {
          flex: 0.5,
          alignItems: 'flex-end'
      },
      profile: {
          width: 40,
          height: 40,
          borderRadius: 20,
          marginRight: 10
      },
      descriptionContainer: {
          marginBottom: 10,
          marginHorizontal: 15,
      },
      description: {
          color: 'rgba(255,255,255,0.5)'
      },
      commentsContainer: {
          marginBottom: 10,
          alignItems: 'flex-end',
          marginHorizontal: 15,
          flexDirection: 'row'
      },
      imageContainer: {
          marginBottom: 10,
          marginHorizontal: 15,
          height: 180
      },
      image: {
          height: '100%',
          width: '100%'
      },
      top: {
          justifyContent: 'flex-start',
          margin: 10,
          marginLeft: 15,
          flexDirection: 'row',
          alignItems: 'center'
      },
      container: {
          margin: 10,
          backgroundColor: '#243c5e',
          borderRadius: 10,
          shadowColor: 'black',
          shadowOffset: {
              width: 2,
              height: 1
          },
          shadowRadius: 4,
          shadowOpacity: 0.3
      }
  });
  </code></pre>