Problem to save picture to mediaLibrary with expo

How to / Third Party Tooling
1

Hi, i’m completly new to react, react native and expo too, but i’m trying to learn it.

I’m having a problem when i try to save picture to my phone gallery

So, i’m importing

import { MediaLibrary } from 'expo-media-library'

i’m completly new to react and react native too, but i’m trying to learn it.

I’m having a problem when i try to save picture to my phone gallery

So, i’m importing

import { MediaLibrary } from 'expo-media-library'

also i’m usigng states

const [hasPermission, setHasPermission] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);
const [cameraRef, setCameraRef] = useState(null)

and here all works fine except saving the photo

<TouchableOpacity style={{alignSelf: 'center'}} onPress={async() => {
            if(cameraRef){
              let photo = await cameraRef.takePictureAsync();
              console.log('photo', photo);
              MediaLibrary.saveToLibraryAsync(photo.uri)

            }
          }}>

in my console log i see the object

    photo Object {
     "height": 4156,
     "uri": "file:///var/mobile/Containers/Data/Application/B7CCEDB6-DFC5-4898-BD70-B2FF1159FC1B/Library/Caches/ExponentExperienceData/%2540anonymous%252Ftest-5bfa90d8-12e9-44fe-a19d-69bb5eeb74b9/Camera/D783C734-29B9-489B-9798-A0737388E93C.jpg",
     "width": 2376,
}

But i’m not able to find a way to save it to camera roll, i’m always getting this error

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_expoMediaLibrary.MediaLibrary.saveToLibraryAsync')]

Any help would be appreciate

R.

2

Hi

According to the documentation you need to import it like this:

import * as MediaLibrary from 'expo-media-library';
3

Hi Wodin,
i’ve tried but nothin to do, i’m getting always the same error

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating ‘_expoMediaLibrary.MediaLibrary.saveToLibraryAsync’)]

Probably (for sure) i’m not using it in the right way

if(cameraRef){
let photo = await cameraRef.takePictureAsync();
console.log(‘photo’, photo);
MediaLibrary.saveToLibraryAsync(photo.uri)

        }
4

Does the following also give you an error? I tested it on an Android device in an SDK 37 app.

import React, { useEffect } from 'react';
import { Text, View } from 'react-native';
import * as MediaLibrary from 'expo-media-library';

export default function App() {
  useEffect(() => {
    MediaLibrary.getPermissionsAsync().then(data => {
      alert(JSON.stringify(data));
    });
  }, []);
  return (
    <View>
      <Text>This should alert some permissions info.</Text>
    </View>
  );
}
5

Hi Wodin, as i wrote i’m newbie on react, so it was my mistake

<TouchableOpacity style={{alignSelf: 'center'}} onPress={async() => {
            if(cameraRef){
              let photo = await cameraRef.takePictureAsync().then(data => {
                MediaLibrary.saveToLibraryAsync(data.uri);
              console.log('photo', photo);
            })
          }
          }}>

it work with .then(data

Thanks a lot for your help

Riccardo