functional image upoad

App.js

@@ -1,18 +1,98 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-export default function App() {
-  return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-    </View>
-  );
+import React, { Component } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View, Image } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+import * as Permissions from 'expo-permissions';
+import { storage } from './firebase'
+
+export default class App extends Component {
+  state = {
+    image: null,
+    name: null
+  };
+
+  takePicture = async () => {
+    await Permissions.askAsync(Permissions.CAMERA);
+    const { cancelled, uri } = await ImagePicker.launchCameraAsync({
+      allowsEditing: true,
+    });
+    const name = uri.split('/').slice(-1)[0]
+    this.setState({ image: uri, name });
+  };
+
+  handleUpload = async () => {
+    const { image: uri, name } = this.state
+    const response = await fetch(uri);
+    const blob = await response.blob();
+    console.log(name);
+    // const blob = new Blob([image], { type: "image/jpg" }, name);
+    const task = storage.ref(`images/${name}`).put(blob)
+    task.on(
+      'state_changed',
+      (snapshot) => {
+        // Progress function
+      },
+      (error) => {
+        // Error function
+        console.log(error);
+      },
+      (complete) => {
+        // Complete function
+        console.log('Upload Success!');
+      }
+    )
+  }
+
+  removeImage = () => {
+    const { image } = this.state
+    this.setState({
+      image: null,
+    })
+  }
+
+  download = () => {
+    const { name } = this.state
+    storage.ref('images').child(name).getDownloadURL().then(
+      uri => console.log(uri)
+    )
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Image style={styles.image} source={{ uri: this.state.image }} />
+        <View style={styles.row}>
+          <Button onPress={this.takePicture}>Camera</Button>
+          <Button onPress={this.handleUpload}>Upload</Button>
+        </View>
+        <View style={styles.row}>
+          <Button onPress={this.removeImage}>Remove</Button>
+          <Button onPress={this.download}>Download</Button>
+        </View>
+      </View>
+    );
+  }
 }
 
+const Button = ({ onPress, children }) => (
+  <TouchableOpacity style={styles.button} onPress={onPress}>
+    <Text style={styles.text}>{children}</Text>
+  </TouchableOpacity>
+);
+
 const styles = StyleSheet.create({
+  text: {
+    fontSize: 21,
+  },
+  row: { flexDirection: 'row' },
+  image: { width: 300, height: 300, backgroundColor: 'gray' },
+  button: {
+    padding: 13,
+    margin: 15,
+    backgroundColor: '#dddddd',
+  },
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: '#ffffff',
     alignItems: 'center',
     justifyContent: 'center',
   },

firebase/index.js

@@ -0,0 +1,22 @@
+import firebase from 'firebase/app'
+import 'firebase/storage'
+
+// Your web app's Firebase configuration
+var firebaseConfig = {
+    apiKey: "AIzaSyCUOgF5F1rNg2AKbKvEpKox5SRzdpI73cA",
+    authDomain: "fir-onboarding-4cd34.firebaseapp.com",
+    databaseURL: "https://fir-onboarding-4cd34.firebaseio.com",
+    projectId: "fir-onboarding-4cd34",
+    storageBucket: "fir-onboarding-4cd34.appspot.com",
+    messagingSenderId: "266893372238",
+    appId: "1:266893372238:web:1c26f7d61f9470a8"
+};
+
+// Initialize Firebase
+firebase.initializeApp(firebaseConfig);
+
+const storage = firebase.storage()
+
+export {
+    storage, firebase as default
+}

myFirebase.js

@@ -0,0 +1,22 @@
+import firebase from 'firebase/app'
+import 'firebase/storage'
+
+// Your web app's Firebase configuration
+var firebaseConfig = {
+    apiKey: "AIzaSyCUOgF5F1rNg2AKbKvEpKox5SRzdpI73cA",
+    authDomain: "fir-onboarding-4cd34.firebaseapp.com",
+    databaseURL: "https://fir-onboarding-4cd34.firebaseio.com",
+    projectId: "fir-onboarding-4cd34",
+    storageBucket: "fir-onboarding-4cd34.appspot.com/",
+    messagingSenderId: "266893372238",
+    appId: "1:266893372238:web:1c26f7d61f9470a8"
+};
+
+// Initialize Firebase
+firebase.initializeApp(firebaseConfig);
+
+const storage = firebase.storage()
+
+export {
+    storage, firebase as default
+}

package.json

@@ -9,6 +9,9 @@
   },
   "dependencies": {
     "expo": "^33.0.0",
+    "expo-image-picker": "^5.0.2",
+    "expo-permissions": "^5.0.1",
+    "firebase": "^6.2.2",
     "react": "16.8.3",
     "react-dom": "^16.8.6",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
@@ -18,4 +21,4 @@
     "babel-preset-expo": "^5.1.1"
   },
   "private": true
-}
+}