All Projects → aaronksaunders → expo-rn-firebase-image-upload

aaronksaunders / expo-rn-firebase-image-upload

Licence: other
example of how to upload image in expo with react-native and firebase

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to expo-rn-firebase-image-upload

react-native-tap-tile-game
An awesome TapTile Game built usign create-react-native-app
Stars: ✭ 44 (-6.38%)
Mutual labels:  exponent, create-react-native-app, expo
expo-deploy
Bash script to deploy to different Expo environments (https://expo.io)
Stars: ✭ 40 (-14.89%)
Mutual labels:  exponent, create-react-native-app, expo
Expo-Nitro-Roll
A cross-platform video game built with Expo and three.js!
Stars: ✭ 16 (-65.96%)
Mutual labels:  exponent, expo
firebase-storage-upload-example
This example has moved
Stars: ✭ 98 (+108.51%)
Mutual labels:  firebase-storage, expo
react-native-swipe-cards-interaction
React native swipe cards interaction
Stars: ✭ 142 (+202.13%)
Mutual labels:  exponent, create-react-native-app
expo-ticket-app
💎 A React Native ticket app to start learning Expo very quickly with selected libraries 📚
Stars: ✭ 87 (+85.11%)
Mutual labels:  expo
expo-firebase-auth-starter
Starter project for Expo and Firebase (with Authentication)
Stars: ✭ 31 (-34.04%)
Mutual labels:  expo
Firecdn
The Low Latency CDN Powered by Firebase
Stars: ✭ 20 (-57.45%)
Mutual labels:  firebase-storage
aniuta
The simplest state manager for Expo and React Native
Stars: ✭ 35 (-25.53%)
Mutual labels:  expo
firebase-bundle
A Symfony Bundle for the Firebase PHP Admin SDK
Stars: ✭ 112 (+138.3%)
Mutual labels:  firebase-storage
ikuradon
Mastodon client app for React Native(Expo App)
Stars: ✭ 41 (-12.77%)
Mutual labels:  expo
app-sense
📱 Easily learn & create React Native app basics using zero coding, drag-and-drop interface & logic blocks.
Stars: ✭ 86 (+82.98%)
Mutual labels:  expo
expo-community-flipper
Flipper Support for Expo Apps in React Native
Stars: ✭ 82 (+74.47%)
Mutual labels:  expo
expo-next-monorepo-example
Create a universal React app using Expo and Next.js in a monorepo
Stars: ✭ 268 (+470.21%)
Mutual labels:  expo
Chatter
Real time chat app written in Swift 4 using Firebase
Stars: ✭ 30 (-36.17%)
Mutual labels:  firebase-storage
multer-sharp
Streaming multer storage engine permit to resize and upload to Google Cloud Storage.
Stars: ✭ 21 (-55.32%)
Mutual labels:  firebase-storage
tempo-run
Universal Expo App for building personalised running playlists with Spotify
Stars: ✭ 34 (-27.66%)
Mutual labels:  expo
coronadev
Aplicativo para consultar a situação global do COVID-19
Stars: ✭ 44 (-6.38%)
Mutual labels:  expo
design-starter-kit
A universal prototyping setup powered by @expo 🥤
Stars: ✭ 20 (-57.45%)
Mutual labels:  expo
PlantManager
🌱 Application to remind people to water their plants🌱
Stars: ✭ 43 (-8.51%)
Mutual labels:  expo

Example of how to upload image in expo with react-native and firebase

Problem: Issue uploading files in react-native in expo without detaching??

**Solution: ** Thanks to the latest release of Expo and React-Native it can be done exactly as described in the Firebase documentation. See below and sample app in repo

Upload function

 export const uploadAsFile = async (uri, progressCallback) => {

  console.log("uploadAsFile", uri)
  const response = await fetch(uri);
  const blob = await response.blob();

  var metadata = {
    contentType: 'image/jpeg',
  };

  let name = new Date().getTime() + "-media.jpg"
  const ref = firebase
    .storage()
    .ref()
    .child('assets/' + name)

  const task = ref.put(blob, metadata);

  return new Promise((resolve, reject) => {
    task.on(
      'state_changed',
      (snapshot) => {
        progressCallback && progressCallback(snapshot.bytesTransferred / snapshot.totalBytes)

        var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log('Upload is ' + progress + '% done');
      },
      (error) => reject(error), /* this is where you would put an error callback! */
      () => {
        var downloadURL = task.snapshot.downloadURL;
        console.log("_uploadAsByteArray ", task.snapshot.downloadURL)

        // save a reference to the image for listing purposes
        var ref = firebase.database().ref('assets');
        ref.push({
          'URL': downloadURL,
          //'thumb': _imageData['thumb'],
          'name': name,
          //'coords': _imageData['coords'],
          'owner': firebase.auth().currentUser && firebase.auth().currentUser.uid,
          'when': new Date().getTime()
        }).then(r => resolve(r), e => reject(e))
      }
    );
  });
}

make sure you set your firebase configuration in HomeScreen.js on line 26

Fix For VS Code Rendering

microsoft/vscode#21577 (comment)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].