├── .babelrc
├── .flowconfig
├── .gitignore
├── .watchmanconfig
├── App.js
├── App.test.js
├── README.md
├── app.json
├── package.json
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["babel-preset-expo"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.flowconfig:
--------------------------------------------------------------------------------
 1 | [ignore]
 2 | ; We fork some components by platform
 3 | .*/*[.]android.js
 4 | 
 5 | ; Ignore templates for 'react-native init'
 6 | <PROJECT_ROOT>/node_modules/react-native/local-cli/templates/.*
 7 | 
 8 | ; Ignore RN jest
 9 | <PROJECT_ROOT>/node_modules/react-native/jest/.*
10 | 
11 | ; Ignore RNTester
12 | <PROJECT_ROOT>/node_modules/react-native/RNTester/.*
13 | 
14 | ; Ignore the website subdir
15 | <PROJECT_ROOT>/node_modules/react-native/website/.*
16 | 
17 | ; Ignore the Dangerfile
18 | <PROJECT_ROOT>/node_modules/react-native/danger/dangerfile.js
19 | 
20 | ; Ignore Fbemitter
21 | <PROJECT_ROOT>/node_modules/fbemitter/.*
22 | 
23 | ; Ignore "BUCK" generated dirs
24 | <PROJECT_ROOT>/node_modules/react-native/\.buckd/
25 | 
26 | ; Ignore unexpected extra "@providesModule"
27 | .*/node_modules/.*/node_modules/fbjs/.*
28 | 
29 | ; Ignore polyfills
30 | <PROJECT_ROOT>/node_modules/react-native/Libraries/polyfills/.*
31 | 
32 | ; Ignore various node_modules
33 | <PROJECT_ROOT>/node_modules/react-native-gesture-handler/.*
34 | <PROJECT_ROOT>/node_modules/expo/.*
35 | <PROJECT_ROOT>/node_modules/react-navigation/.*
36 | <PROJECT_ROOT>/node_modules/xdl/.*
37 | <PROJECT_ROOT>/node_modules/reqwest/.*
38 | <PROJECT_ROOT>/node_modules/metro-bundler/.*
39 | 
40 | [include]
41 | 
42 | [libs]
43 | node_modules/react-native/Libraries/react-native/react-native-interface.js
44 | node_modules/react-native/flow/
45 | node_modules/expo/flow/
46 | 
47 | [options]
48 | emoji=true
49 | 
50 | module.system=haste
51 | 
52 | module.file_ext=.js
53 | module.file_ext=.jsx
54 | module.file_ext=.json
55 | module.file_ext=.ios.js
56 | 
57 | munge_underscores=true
58 | 
59 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
60 | 
61 | suppress_type=$FlowIssue
62 | suppress_type=$FlowFixMe
63 | suppress_type=$FlowFixMeProps
64 | suppress_type=$FlowFixMeState
65 | suppress_type=$FixMe
66 | 
67 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
68 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
69 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
70 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
71 | 
72 | unsafe.enable_getters_and_setters=true
73 | 
74 | [version]
75 | ^0.56.0
76 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # expo
 4 | .expo/
 5 | 
 6 | # dependencies
 7 | /node_modules
 8 | 
 9 | # misc
10 | .env.local
11 | .env.development.local
12 | .env.test.local
13 | .env.production.local
14 | 
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 | 


--------------------------------------------------------------------------------
/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import {
  3 |   ActivityIndicator,
  4 |   Button,
  5 |   Clipboard,
  6 |   Image,
  7 |   Share,
  8 |   StatusBar,
  9 |   StyleSheet,
 10 |   Text,
 11 |   TouchableOpacity,
 12 |   View,
 13 | } from 'react-native';
 14 | import { Constants, ImagePicker, Permissions } from 'expo';
 15 | import uuid from 'uuid';
 16 | import * as firebase from 'firebase';
 17 | 
 18 | console.disableYellowBox = true;
 19 | 
 20 | const url =
 21 |   'https://firebasestorage.googleapis.com/v0/b/blobtest-36ff6.appspot.com/o/Obsidian.jar?alt=media&token=93154b97-8bd9-46e3-a51f-67be47a4628a';
 22 | 
 23 | const firebaseConfig = {
 24 |   apiKey: 'AIzaSyAlZruO2T_JNOWn4ysfX6AryR6Dzm_VVaA',
 25 |   authDomain: 'blobtest-36ff6.firebaseapp.com',
 26 |   databaseURL: 'https://blobtest-36ff6.firebaseio.com',
 27 |   storageBucket: 'blobtest-36ff6.appspot.com',
 28 |   messagingSenderId: '506017999540',
 29 | };
 30 | 
 31 | firebase.initializeApp(firebaseConfig);
 32 | 
 33 | export default class App extends React.Component {
 34 |   state = {
 35 |     image: null,
 36 |     uploading: false,
 37 |   };
 38 |   
 39 |   async componentDidMount() {
 40 |     await Permissions.askAsync(Permissions.CAMERA_ROLL);
 41 |     await Permissions.askAsync(Permissions.CAMERA);
 42 |   }
 43 | 
 44 |   render() {
 45 |     let { image } = this.state;
 46 | 
 47 |     return (
 48 |       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 49 |         {image ? null : (
 50 |           <Text
 51 |             style={{
 52 |               fontSize: 20,
 53 |               marginBottom: 20,
 54 |               textAlign: 'center',
 55 |               marginHorizontal: 15,
 56 |             }}>
 57 |             Example: Upload ImagePicker result
 58 |           </Text>
 59 |         )}
 60 | 
 61 |         <Button
 62 |           onPress={this._pickImage}
 63 |           title="Pick an image from camera roll"
 64 |         />
 65 | 
 66 |         <Button onPress={this._takePhoto} title="Take a photo" />
 67 | 
 68 |         {this._maybeRenderImage()}
 69 |         {this._maybeRenderUploadingOverlay()}
 70 | 
 71 |         <StatusBar barStyle="default" />
 72 |       </View>
 73 |     );
 74 |   }
 75 | 
 76 |   _maybeRenderUploadingOverlay = () => {
 77 |     if (this.state.uploading) {
 78 |       return (
 79 |         <View
 80 |           style={[
 81 |             StyleSheet.absoluteFill,
 82 |             {
 83 |               backgroundColor: 'rgba(0,0,0,0.4)',
 84 |               alignItems: 'center',
 85 |               justifyContent: 'center',
 86 |             },
 87 |           ]}>
 88 |           <ActivityIndicator color="#fff" animating size="large" />
 89 |         </View>
 90 |       );
 91 |     }
 92 |   };
 93 | 
 94 |   _maybeRenderImage = () => {
 95 |     let { image } = this.state;
 96 |     if (!image) {
 97 |       return;
 98 |     }
 99 | 
100 |     return (
101 |       <View
102 |         style={{
103 |           marginTop: 30,
104 |           width: 250,
105 |           borderRadius: 3,
106 |           elevation: 2,
107 |         }}>
108 |         <View
109 |           style={{
110 |             borderTopRightRadius: 3,
111 |             borderTopLeftRadius: 3,
112 |             shadowColor: 'rgba(0,0,0,1)',
113 |             shadowOpacity: 0.2,
114 |             shadowOffset: { width: 4, height: 4 },
115 |             shadowRadius: 5,
116 |             overflow: 'hidden',
117 |           }}>
118 |           <Image source={{ uri: image }} style={{ width: 250, height: 250 }} />
119 |         </View>
120 | 
121 |         <Text
122 |           onPress={this._copyToClipboard}
123 |           onLongPress={this._share}
124 |           style={{ paddingVertical: 10, paddingHorizontal: 10 }}>
125 |           {image}
126 |         </Text>
127 |       </View>
128 |     );
129 |   };
130 | 
131 |   _share = () => {
132 |     Share.share({
133 |       message: this.state.image,
134 |       title: 'Check out this photo',
135 |       url: this.state.image,
136 |     });
137 |   };
138 | 
139 |   _copyToClipboard = () => {
140 |     Clipboard.setString(this.state.image);
141 |     alert('Copied image URL to clipboard');
142 |   };
143 | 
144 |   _takePhoto = async () => {
145 |     let pickerResult = await ImagePicker.launchCameraAsync({
146 |       allowsEditing: true,
147 |       aspect: [4, 3],
148 |     });
149 | 
150 |     this._handleImagePicked(pickerResult);
151 |   };
152 | 
153 |   _pickImage = async () => {
154 |     let pickerResult = await ImagePicker.launchImageLibraryAsync({
155 |       allowsEditing: true,
156 |       aspect: [4, 3],
157 |     });
158 | 
159 |     this._handleImagePicked(pickerResult);
160 |   };
161 | 
162 |   _handleImagePicked = async pickerResult => {
163 |     try {
164 |       this.setState({ uploading: true });
165 | 
166 |       if (!pickerResult.cancelled) {
167 |         uploadUrl = await uploadImageAsync(pickerResult.uri);
168 |         this.setState({ image: uploadUrl });
169 |       }
170 |     } catch (e) {
171 |       console.log(e);
172 |       alert('Upload failed, sorry :(');
173 |     } finally {
174 |       this.setState({ uploading: false });
175 |     }
176 |   };
177 | }
178 | 
179 | async function uploadImageAsync(uri) {
180 |   // Why are we using XMLHttpRequest? See:
181 |   // https://github.com/expo/expo/issues/2402#issuecomment-443726662
182 |   const blob = await new Promise((resolve, reject) => {
183 |     const xhr = new XMLHttpRequest();
184 |     xhr.onload = function() {
185 |       resolve(xhr.response);
186 |     };
187 |     xhr.onerror = function(e) {
188 |       console.log(e);
189 |       reject(new TypeError('Network request failed'));
190 |     };
191 |     xhr.responseType = 'blob';
192 |     xhr.open('GET', uri, true);
193 |     xhr.send(null);
194 |   });
195 | 
196 |   const ref = firebase
197 |     .storage()
198 |     .ref()
199 |     .child(uuid.v4());
200 |   const snapshot = await ref.put(blob);
201 | 
202 |   // We're done with the blob, close and release it
203 |   blob.close();
204 | 
205 |   return await snapshot.ref.getDownloadURL();
206 | }
207 | 


--------------------------------------------------------------------------------
/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import App from './App';
 3 | 
 4 | import renderer from 'react-test-renderer';
 5 | 
 6 | it('renders without crashing', () => {
 7 |   const rendered = renderer.create(<App />).toJSON();
 8 |   expect(rendered).toBeTruthy();
 9 | });
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Firebase Storage Upload Example
2 | 
3 | **This example has moved to [examples/with-firebase-storage-upload](https://github.com/expo/examples/tree/master/with-firebase-storage-upload)**
4 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 |   "expo": {
3 |     "sdkVersion": "31.0.0"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "FirebaseBlob",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "devDependencies": {
 6 |     "react-native-scripts": "^1.13.1"
 7 |   },
 8 |   "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
 9 |   "scripts": {
10 |     "start": "react-native-scripts start",
11 |     "eject": "react-native-scripts eject",
12 |     "android": "react-native-scripts android",
13 |     "ios": "react-native-scripts ios",
14 |     "test": "jest"
15 |   },
16 |   "jest": {
17 |     "preset": "jest-expo"
18 |   },
19 |   "dependencies": {
20 |     "expo": "^31.0.0",
21 |     "firebase": "^5.6.0",
22 |     "react": "16.5.0",
23 |     "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
24 |     "uuid": "^3.2.1",
25 |     "whatwg-fetch": "^3.0.0"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------