title: Possible Unhandled Promise Rejection (id: 0): TypeError: Network request failed
body: <p>I want to send a post comprising text and an image to firebase database in react native.</p>
  
  <p>The problem is that I am getting this error:
  <a href="https://i.stack.imgur.com/UyWsp.png" rel="nofollow noreferrer">Error Message</a>
  In PostScreen the button to make the post is displayed. In Fire.js it is processed and also sent to the database.</p>
  
  <p>I hope somebody can help me with that error.</p>
  
  <p>PostScreen.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import {
    View, 
    Text, 
    StyleSheet, 
    Alert, 
    FlatList, 
    ScrollView, 
    SafeAreaView, 
    TouchableOpacity, 
    Image, 
    TextInput, 
    Button, 
    PermissionsAndroid, 
    NativeModules
  } from 'react-native';
  import {Ionicons} from '@expo/vector-icons';
  import Constants from 'expo-constants';
  import * as Permissions from 'expo-permissions';
  import Fire from '../src/Fire';
  import ImagePicker from 'react-native-image-crop-picker';
  
  const firebase = require("firebase");
  require("firebase/firestore");
  
  export default class PostScreen extends Component {
      
      state = {
          text: "",
          image: null,
      };
  
      handlePost = () =&gt; {
        Fire.shared
        .addPost({ text: this.state.text.trim(), localUri: this.state.image })
        .then(ref =&gt; {
          this.setState({ text: "", image: null });
          this.props.navigation.goBack();
        })
        .catch(error =&gt; {
          alert(error.message);
        });      
      };
  
  
      pickSingle = () =&gt; {
        ImagePicker.openPicker({
          width: 500,
          height: 500,
          cropping: true
        }).then(image =&gt; {
          console.log('received image', image);
          this.setState({
            image: {uri: image.path, width: image.width, height: image.height, mime: image.mime},
          });
        }).catch(e =&gt; {
          console.log(e);
          Alert.alert(e.message ? e.message : e);
        });
      }
  
      renderImage(image) {
        return &lt;Image style={{width: 300, height: 300, resizeMode: 'contain'}} source={image} /&gt;
      }
    
      renderAsset(image) {
        return this.renderImage(image);
      }
  
      componentDidMount() {
          this.requestCameraRollPermission();
      }
  
      getPhotoPermission = async () =&gt; {
          const { status } = await Permissions.getAsync(Permissions.READ_EXTERNAL_STORAGE);
          if (status !== 'granted') {
            alert('We need access to your camera rool');
          }
        };
  
      requestCameraRollPermission = async () =&gt; {
          try {
            const granted = await PermissionsAndroid.request(
              PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE);
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
              return null;
            } else {
              return null;
            }
          } catch (err) {
            return null;
          }
        };
  
      requestCameraPermission = async () =&gt; {
          try {
            const granted = await PermissionsAndroid.request(
              PermissionsAndroid.PERMISSIONS.CAMERA);
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
              return null;
            } else {
              return null;
            }
          } catch (err) {
            return null;
          }
        };    
  
      render() {
          return (
              &lt;SafeAreaView style={styles.container}&gt;
                  &lt;View style={styles.header}&gt;
                      &lt;TouchableOpacity onPress={() =&gt; this.props.navigation.goBack()}&gt;
                          &lt;Ionicons name="md-arrow-back" size={24} color="#D8D9D8"&gt;&lt;/Ionicons&gt;
                      &lt;/TouchableOpacity&gt;
                      &lt;TouchableOpacity onPress={this.handlePost}&gt;
                          &lt;Text style={{ fontSize: 15 ,fontWeight: 'bold', color: '#1d6fa4' }}&gt;Post&lt;/Text&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
  
              &lt;View style={styles.inputContainer}&gt;
                  &lt;Image style={styles.avatar}&gt;&lt;/Image&gt;
                  &lt;TextInput
                      autoFocus={true}
                      multiline={true}
                      numberOfLines={4}
                      style={{ flex: 1 }}
                      placeholder='Want to share something?'
                      onChangeText={text =&gt; this.setState({ text })}
                      value={this.state.text}
                  &gt;&lt;/TextInput&gt;
              &lt;/View&gt;
  
              &lt;View style={styles.icons}&gt;
                  &lt;TouchableOpacity style={styles.photo}&gt;
                      &lt;Ionicons name="md-photos" size={32} color='#D8D9DB' onPress={this.pickSingle} &gt;&lt;/Ionicons&gt;
                  &lt;/TouchableOpacity&gt;
                  &lt;TouchableOpacity style={styles.camera}&gt;
                      &lt;Ionicons name="md-camera" size={32} color='#D8D9DB' &gt;&lt;/Ionicons&gt;
                  &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
  
                  &lt;ScrollView style={{ marginHorizontal: 25, marginTop: 25, height: 150, }}&gt;
                    {this.state.image ? this.renderAsset(this.state.image) : null}
                    {this.state.images ? this.state.images.map(i =&gt; &lt;View key={i.uri} style={{ alignItems: 'center' }}&gt;{this.renderAsset(i)}&lt;/View&gt;) : null}
                  &lt;/ScrollView&gt;
              &lt;/SafeAreaView&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
      },
      header: {
          flexDirection: 'row',
          justifyContent: 'space-between',
          paddingHorizontal: 32,
          paddingVertical: 12,
          borderBottomWidth: 1,
          borderBottomColor: '#D8D9D8'
      },
      inputContainer: {
          margin: 32,
          flexDirection: "row",
          borderWidth: 0.5,
          borderColor: '#D8D9D8'
      },
      avatar: {
          width: 48,
          height: 48,
          borderRadius: 24,
          marginRight: 16
      },
      icons: {
          flexDirection: 'row',
          justifyContent: 'flex-end'
      },
      photo: {
        marginRight: 20
      },
      camera: {
        marginRight: 33
      },
      imgContainer: {
        marginVertical: 20
      },
      button: {
        backgroundColor: 'blue',
        marginBottom: 10,
      },
      text: {
          color: 'white',
          fontSize: 20,
          textAlign: 'center'
      },
      title: {
          fontWeight: 'bold',
          fontSize: 22
      },
      safeArea: {
          marginTop: 20
      },
      dateContainer: {
          flexDirection: 'row',
      },
      imgView: {
          width: '50%',
          marginVertical: 10,
  
      }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Fire.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import firebase from 'firebase';
  
  
  var firebaseConfig = {
      apiKey: "AIzaSyB1Z4eYKBoQVxREriGRi9neur5pVbIr2d8",
      authDomain: "caring-1.firebaseapp.com",
      databaseURL: "https://caring-1.firebaseio.com",
      projectId: "caring-1",
      storageBucket: "caring-1.appspot.com",
      messagingSenderId: "369253724134",
      appId: "1:369253724134:web:49a7597841cdd55970f027"
    };
  
  class Fire {
      constructor() {
          firebase.initializeApp(firebaseConfig)
      }
  
      addPost = async ({ text, localUri }) =&gt; {
          const remoteUri = await this.uploadPhotoAsync(localUri);
  
          return new Promise((res, rej) =&gt; {
              this.firestore
                  .collection("posts")
                  .add({
                      text,
                      uid: this.uid,
                      timestamp: this.timestamp,
                      image: remoteUri
                  })
                  .then(ref =&gt; {
                      res(ref);
                  })
                  .catch(error =&gt; {
                      rej(error);
                  });
          });
      };
  
      uploadPhotoAsync = async uri =&gt; {
          const path = `photos/${this.uid}/${Date.now()}.jpg`;
  
          return new Promise(async(res, rej) =&gt; {    
              const response = await fetch(uri);
              const file = await response.blob();
  
              let upload = firebase
                  .storage()
                  .ref(path)
                  .put(file);
  
              upload.on(
                  "state_changed",
                  snapshot =&gt; {},
                  err =&gt; {
                      rej(err);
                  },
                  async () =&gt; {
                      const url = await upload.snapshot.ref.getDownloadURL();
                      res(url);
                  }
              );
          });
      };
      
      get firestore() {
          return firebase.firestore()
      }
  
      get uid() {
          return (firebase.auth().currentUser || {}).uid;
      }
  
      get timestamp() {
          return Date.now();
      }
  }
  
  Fire.shared = new Fire();
  export default Fire;</code></pre>
  </div>
  </div>
  </p>