uploadImageToFirebase

import React from 'react';
import { StyleSheet, Text, View, Button, Alert, Image } from 'react-native';
import { ImagePicker, Permissions } from 'expo';
import firebase from 'firebase';
import ApiKey from './constants/apiKeys'

export default class App extends React.Component {
  state = {
    url: 'https://facebook.github.io/react-native/docs/assets/favicon.png'
  }

  componentDidMount() {
    Permissions.askAsync(Permissions.CAMERA)
    Permissions.askAsync(Permissions.CAMERA_ROLL)
    firebase.initializeApp(ApiKey.configFirebase)
  }

  render() {
    return (
      <View style={styles.container}>
        <Button title="Open Camera" onPress={this.handleCameraButtonPress} />
        <Image 
          key={this.state.url}
          style={{ width: 240, height: 175 }} 
          source={{ uri: this.state.url }} 
        />
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }

  handleCameraButtonPress = async () => {
    const result = await ImagePicker.launchImageLibraryAsync()
    
    // if(result.cancelled) {
    //   Alert.alert(
    //     'Fail',
    //     'You canceled',
    //     [
    //       {text: 'OK', onPress: () => console.log('OK Pressed')},
    //     ],
    //     {cancelable: false},
    //   );
    // }

    if(!result.cancelled) {
      const uploadUrl = await this.uploadImageAsync(result.uri);
      this.setState({ url: uploadUrl })
    }

  }

  uploadImageAsync = async (uri) => {
    const blob = await new Promise(resolve => {
      const xhr = new XMLHttpRequest();
      xhr.onload = function() {
        resolve(xhr.response);
      };
      xhr.responseType = 'blob';
      xhr.open('GET', uri, true);
      xhr.send(null);
    });
  
    const ref = firebase
      .storage()
      .ref()
      .child("new-image");
    const snapshot = await ref.put(blob);
  
    blob.close();
  
    return await snapshot.ref.getDownloadURL();
  }


}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});