upload images in expo using firebase

expo_image_upload.js

import React  from 'react';
import { Text, View, TouchableOpacity, } from 'react-native';
import firebase from  "firebase";   

import { ImagePicker,  Permissions } from 'expo';


 
class Upload extends React.Component {
constructor(props) {
  super(props);


  this.state = { 
     imageSource: null,
    hasCameraPermission: null,
    isLoading:false,
    tag:'Loading',
    uploaded:false,
    stats:'uploading',
     };
}


 componentDidMount() {
    this._requestCameraPermission();
  }

  _requestCameraPermission = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({
      hasCameraPermission: status === 'granted',
    });

  };

uuidv4(){
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }
   
  pic = async () => { 
            const permissions = Permissions.CAMERA_ROLL;
            const { status } = await Permissions.askAsync(permissions);
        
            if(status === 'granted') {
                    let image = await ImagePicker.launchImageLibraryAsync({mediaTypes: 'Images',});
            
                    // if user did not cancel the image picker it should return a uri
                    // then upload happens here
                    if (!image.cancelled) {
                            // upload function
                            // this has 3 params (image uri, image height and image width)
                        this.upload(image.uri, image.height, image.width).then(()=>{
                                this.setState({uploadprogress:'done',})

                                // get uploaded image firebase link
                                this.dispater()
                        })
                    }

                    // if image picker was cancelled
                    if (image.cancelled) {
                            alert('you did not select any image')
                    }
        
            }
  }


    // image upload function 
     upload = async (uri, h, w) =>{
                    // function to generate a random int which will be used for image name
                  function randomString(length, chars) {
                      var result = '';
                      for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
                      return result;
                  }
                  const imagename = randomString(9, 2);
 
                  this.setState({uri:uri, imagecode:imagename })
                //   getting image uri
                  const response  = await fetch(uri);

                //   convert it to blob
                  const blob = await response.blob();

                //   upload to firebase storage
                  var ref = firebase.storage().ref().child("image/"+imagename);
                  return ref.put(blob);
    }

    
    // used to get the uploaded image firebase uri
    async dispater(){
         const {imagecode} = this.state;
        
        firebase.storage().ref().child('image/'+imagecode).getDownloadURL().then((url)=>{
             const uploadlink = url;
             this.setState({uploadlink, uploadingimage:false});
         })
    
  }




render() {
       return (
         <View style={{flex:1, flexDirection: 'column', alignContent:'center', justifyContent: 'center',backgroundColor: 'white' }}>
                <TouchableOpacity   style={{paddingTop: 10,backgroundColor:'black',}}
                    onPress={()=>this.pic()}>
                    <Text style={{color:'white'}} >Upload</Text>
                </TouchableOpacity>
         </View>
      );
  }
}

 

export default (Upload);