React-native-image-picker: Getting error "Response = {error: "Couldn't get file path for photo"}"

[himanshusharma9400]

Description

I have used a library named 'react-native-mauron85-background-geolocation' along with 'react-native-image-picker' in my app, when I add 'react-native-mauron85-background-geolocation' dependencies and link it my camera doesn't open when i click 'take photo' button and gives an error 'Response = {error: "Couldn't get file path for photo"}' in log but gallery is opening successfully, and when I remove all dependencies of 'react-native-mauron85-background-geolocation' then everything works fine.

How to repeat issue and example

My code is :
export default class App extends React.Component {

state = {
avatarSource: null,
videoSource: null
};

selectPhotoTapped() {
quality: 1.0,
maxWidth: 500,
maxHeight: 500,
storageOptions: {
skipBackup: true
}
};

ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled photo picker');
  }
  else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  }
  else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  }
  else {
    let source = { uri: response.uri };

    // You can also display the image using data:
    // let source = { uri: 'data:image/jpeg;base64,' + response.data };

    this.setState({
      avatarSource: source
    });
  }
});

}

selectVideoTapped() {
const options = {
title: 'Video Picker',
takePhotoButtonTitle: 'Take Video...',
mediaType: 'video',
videoQuality: 'medium'
};

ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled video picker');
  }
  else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  }
  else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  }
  else {
    this.setState({
      videoSource: response.uri
    });
  }
});

}

render() {
return (
{ this.state.avatarSource === null ? Select a Photo :

}

    <TouchableOpacity onPress={this.selectVideoTapped.bind(this)}>
      <View style={[styles.avatar, styles.avatarContainer]}>
        <Text>Select a Video</Text>
      </View>
    </TouchableOpacity>

    { this.state.videoSource &&
      <Text style={{margin: 8, textAlign: 'center'}}>{this.state.videoSource}</Text>
    }
  </View>
);

}
}

Link to library of react-native-mauron85-background-geolocation: https://github.com/mauron85/react-native-background-geolocation#http-locations-posting

Solution

I want to link both the libraries successfully without an issue

Additional Information

• React Native version: [0.56.0]
• Platform: [Android]
• Development Operating System: [MacOs]
• Dev tools: [Android SDK version : 27] navigation crash for Android

[kapil708]

did u found any solution i get same issue ?

[himanshusharma9400]

@kapil708 : Yeah I made it work, I changed the buildToolsVersion to 27.0.3 and supportLibVersion to 27.1.0 and added the latest version of both the plugins/libraries and it is working now. My build.gradle now is:
ext {
buildToolsVersion = "27.0.3"
minSdkVersion = 16
compileSdkVersion = 26
targetSdkVersion = 26
supportLibVersion = "27.1.0"
googlePlayServicesVersion = "11.8.0"
androidMapsUtilsVersion = "0.5+"
gradle3EXPERIMENTAL = "yes"
oreoEXPERIMENTAL = "yes"
}
Tell me if it works....:)

[kapil708]

not working.
i do all things

1. clear project
2. npm install
3. uninstall & install

it give same error.

did there any steps to set this.

#android/buid.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
repositories {
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:2.2.3'

    // NOTE: Do not place your application dependencies here; they belong
    // in the individual module build.gradle files
}

}

allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
maven { url 'https://maven.google.com' }
}
}
ext {
buildToolsVersion = "27.0.3"
minSdkVersion = 16
compileSdkVersion = 26
targetSdkVersion = 26
supportLibVersion = "27.1.0"
googlePlayServicesVersion = "11.8.0"
androidMapsUtilsVersion = "0.5+"
gradle3EXPERIMENTAL = "yes"
oreoEXPERIMENTAL = "yes"
}

#android/app/build.gradle

android {
compileSdkVersion 26
buildToolsVersion "27.0.3"

defaultConfig {
    applicationId "com.beontime"
    minSdkVersion 16
    targetSdkVersion 26
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
}
splits {
    abi {
        reset()
        enable enableSeparateBuildPerCPUArchitecture
        universalApk false  // If true, also generate a universal APK
        include "armeabi-v7a", "x86"
    }
}
buildTypes {
    release {
        minifyEnabled enableProguardInReleaseBuilds
        proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
    }
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
    variant.outputs.each { output ->
        // For each separate APK per architecture, set a unique version code as described here:
        // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
        def versionCodes = ["armeabi-v7a":1, "x86":2]
        def abi = output.getFilter(OutputFile.ABI)
        if (abi != null) {  // null for the universal-debug, universal-release variants
            output.versionCodeOverride =
                    versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
        }
    }
}

}

dependencies {
compile project(':react-native-mauron85-background-geolocation')
compile project(':react-native-image-picker')
compile project(':react-native-device-info')
compile project(':react-native-device-information')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
}

[himanshusharma9400]

@kapil708
Try the following:

In top-level build.gradle change in classpath the gradle version to 3.0.1 as follows:
buildscript {
repositories {
jcenter()
maven {
url 'https://maven.google.com/'
name 'Google'
}
}
dependencies {
classpath 'com.android.tools.build:gradle:3.0.1'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}

,And in file android/gradle/wrapper/gradle-wrapper.properties change following:

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip

[kapil708]

still not working

[himanshusharma9400]

Can u give the following information:
Error, android version of testing device, your react-native version
also test it in a real device
and if all doesn't work start a new project with all latest version of react-native and latest version of both the libraries/plugins and use code of image picker example:
https://github.com/react-community/react-native-image-picker/tree/master/Example
and for background-geolocation just link the library using react-native link
(I also did the same and after adding both, my camera wasn't opening when I clicked on 'Select a photo' but camera was opening when I clicked 'Select a video')

[kapil708]

any other image picker to use

[himanshusharma9400]

Yes there are but they are a bit more complicated and have more issues, this is the most stable one....You can try https://github.com/ivpusic/react-native-image-crop-picker, but I recommend you to try above method and any other possible way to make it work

[kapil708]

don't know how to solve this issue i am stuck from 2 days in it

[kapil708]

give me your email id so i will send you my source code if you can give some help.

[atulmy]

Anyone able to solve this issue?

[brycepavey]

I had the same issue, if you're project already has filepaths.xml under app/res/xml like mine does (which was added as part of react-native-share) you need to add the following path config (taken from this PR https://github.com/react-community/react-native-image-picker/pull/951/commits/307a278f8cdd287e50015a8a252e74ad93b5ac76)

<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
    <...any existing config...>
    <files-path name="shared" path="."/>
    <external-path name="shared" path="."/>
    <external-files-path name="shared" path="."/>
    <root-path name="root" path="."/>
</paths>

[llitfkitfk]

@brycepavey thx
It worked

[rahul120292]

@brycepavey thank man . worked your solution.

[Subway19]

@brycepavey I was wondering how the feature got broken in my app. thanks so much for the solution.

[marcosbenevides]

@brycepavey works beautifully 😄

[VidyaCK]

@jose2007kj , You can get file path using response.uri

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. Fell free to reopen this issue, if this still affecting you.

[edilsonlm217]

I just got a solution for this problem.
When installing react-native-image-picker you have to add bellow lines to android/app/src/debug/AndroidManifest.xml in order to get permission to access device's camera and storage.

Don't know why but for some reason when you call ImagePicker.launchCamera by app it doesn't ask for sotrage permission. That's why it can't get file path for photo.

To make it run you got to allow storage permisson manually in your device or emulator.

In case you don't know how to do that follow the steps described in the link: https://phandroid.com/2019/07/18/how-to-change-app-permissions-android-m/

[PragyanD33p]

@brycepavey What if I don't have that filepaths.xml file? How to do that?

[AmrAbdalrahman]

please, check this comment

[LaVielle]

As @AmrAlmagic points out in his comment, this is actually a permission issue. No need to add extra stuff in the native android files.

All you need is to request and get CAMERA and WRITE_EXTERNAL_STORAGE permissions before calling launchCamera:

const getImageFromCamera = async () => {
  if (Platform.OS === 'android') {
    try {
      await PermissionsAndroid.requestMultiple([
        PermissionsAndroid.PERMISSIONS.CAMERA,
        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
      ])

      const permissionCamera = await PermissionsAndroid.check('android.permission.CAMERA')
      const permissionWriteStorage = await PermissionsAndroid.check('android.permission.WRITE_EXTERNAL_STORAGE')

      if (!permissionCamera || !permissionWriteStorage) {
        return {
          error: 'Failed to get the required permissions.'
        }
      }
    } catch (error) {
      return {
        error: 'Failed to get the required permissions.'
      }
    }
  }
  return ImagePicker.launchCamera(options, response => response)
}

[haqisaurus]

I found this problem too on android 10 this is my setting i used
"react-native-image-picker": "^2.3.1",

ImagePicker.showImagePicker(
            {
                title: 'Choose Image',
                maxWidth: 1000,
                maxHeight: 1000,
                quality: 0.7,
                mediaType: 'photo',
                storageOptions: {
                    skipBackup: true,
                    path: 'Pictures/myAppPicture/', //-->this is neccesary
                    privateDirectory: true
                }

            },
            response => {
                console.log(response);

            },
        );

also adding
filpaths.xml like someone told above
BUT I still have problem when open androi gallery because it access denied, althought I I have add permission to read file on manifest.xml
thanks I hope it help

[syedamirali14]

I had the same issue, if you're project already has filepaths.xml under app/res/xml like mine does (which was added as part of react-native-share) you need to add the following path config (taken from this PR 307a278)

<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
    <...any existing config...>
    <files-path name="shared" path="."/>
    <external-path name="shared" path="."/>
    <external-files-path name="shared" path="."/>
    <root-path name="root" path="."/>
</paths>

external

i don't have any file like this

[hautran96]

it not working with android 10 :(( help me

[muhammadaqibkhan]

For now passing following storage option, seemed to have fixed launchCamera on Android 10 for me.
{ storageOptions: { privateDirectory: true } }
In my case private directory serves the purpose.

build.gradle settings:

ext { buildToolsVersion = "29.0.2" minSdkVersion = 17 compileSdkVersion = 29 targetSdkVersion = 29 supportLibVersion = "28.0.0" renderscriptVersion = 21 }

Lib Version:
"react-native-image-picker": "2.3.1"

[shixiaoquan]

For now passing following storage option, seemed to have fixed launchCamera on Android 10 for me.
{ storageOptions: { privateDirectory: true } }
In my case private directory serves the purpose.

build.gradle settings:

ext { buildToolsVersion = "29.0.2" minSdkVersion = 17 compileSdkVersion = 29 targetSdkVersion = 29 supportLibVersion = "28.0.0" renderscriptVersion = 21 }

Lib Version:
"react-native-image-picker": "2.3.1"

it worked for me on android 10
after add "{ storageOptions: { privateDirectory: true } }", I can open camera ,but i can't choose photo from gallery

[shixiaoquan]

For now passing following storage option, seemed to have fixed launchCamera on Android 10 for me.
{ storageOptions: { privateDirectory: true } }
In my case private directory serves the purpose.
build.gradle settings:
ext { buildToolsVersion = "29.0.2" minSdkVersion = 17 compileSdkVersion = 29 targetSdkVersion = 29 supportLibVersion = "28.0.0" renderscriptVersion = 21 }
Lib Version:
"react-native-image-picker": "2.3.1"

it worked for me on android 10
after add "{ storageOptions: { privateDirectory: true } }", I can open camera ,but i can't choose photo from gallery

I can access photo in gallery now, this is solution
add android:requestLegacyExternalStorage="true" to my

[hautran96]

For now passing following storage option, seemed to have fixed launchCamera on Android 10 for me.
{ storageOptions: { privateDirectory: true } }
In my case private directory serves the purpose.

build.gradle settings:

ext { buildToolsVersion = "29.0.2" minSdkVersion = 17 compileSdkVersion = 29 targetSdkVersion = 29 supportLibVersion = "28.0.0" renderscriptVersion = 21 }

Lib Version:
"react-native-image-picker": "2.3.1"

it worked, thank you so much, i love you

[muhammadaqibkhan]

For now passing following storage option, seemed to have fixed launchCamera on Android 10 for me.
{ storageOptions: { privateDirectory: true } }
In my case private directory serves the purpose.
build.gradle settings:
ext { buildToolsVersion = "29.0.2" minSdkVersion = 17 compileSdkVersion = 29 targetSdkVersion = 29 supportLibVersion = "28.0.0" renderscriptVersion = 21 }
Lib Version:
"react-native-image-picker": "2.3.1"

it worked for me on android 10
after add "{ storageOptions: { privateDirectory: true } }", I can open camera ,but i can't choose photo from gallery

I can access photo in gallery now, this is solution
add android:requestLegacyExternalStorage="true" to my

Seems like a solution, but in my case If Camera & External Permissions were granted, I'd no issue
PermissionsAndroid.PERMISSIONS.CAMERA
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE (were asked)
You might try with asking for these permissions first and then go on with the library functions. Hope this works as well.

[muhammadaqibkhan]

For now passing following storage option, seemed to have fixed launchCamera on Android 10 for me.
{ storageOptions: { privateDirectory: true } }
In my case private directory serves the purpose.
build.gradle settings:
ext { buildToolsVersion = "29.0.2" minSdkVersion = 17 compileSdkVersion = 29 targetSdkVersion = 29 supportLibVersion = "28.0.0" renderscriptVersion = 21 }
Lib Version:
"react-native-image-picker": "2.3.1"

it worked, thank you so much, i love you

Pleasure and no problem, love you too !!!

[ibrahnerd7]

android:requestLegacyExternalStorage="true"

This was helpful. I appreciate

[devprakashbinary]

I had the same issue, if you're project already has filepaths.xml under app/res/xml like mine does (which was added as part of react-native-share) you need to add the following path config (taken from this PR 307a278)

<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
    <...any existing config...>
    <files-path name="shared" path="."/>
    <external-path name="shared" path="."/>
    <external-files-path name="shared" path="."/>
    <root-path name="root" path="."/>
</paths>

pls include this line also in your AndroidMenifest.xml -> android:requestLegacyExternalStorage="true" to your

[franco-dias]

solved joiining @muhammadaqibkhan and @shixiaoquan answers. ty

[ivanfeliciano9]

For now passing following storage option, seemed to have fixed launchCamera on Android 10 for me.
{ storageOptions: { privateDirectory: true } }
In my case private directory serves the purpose.

build.gradle settings:

ext { buildToolsVersion = "29.0.2" minSdkVersion = 17 compileSdkVersion = 29 targetSdkVersion = 29 supportLibVersion = "28.0.0" renderscriptVersion = 21 }

Lib Version:
"react-native-image-picker": "2.3.1"

It works!! Thank you.

[athaisyah]

`const takeImageHandler = () => {
const options = {
title: 'Select Image',
storageOptions: {
privateDirectory: true,
skipBackup: true,
// path: 'Image_test_',
},
};

ImagePicker.launchCamera(options, (res) => {
  console.log('Response ===>', res);
  if (res.didCancel) {
    console.log('User cancelled image picker');
  } else if (res.error) {
    console.log('Image Picker Error: ', res.error);
  } else {
    console.log('response', JSON.stringify(res));
    let source = {uri: res.uri};
    console.log(source);
    // setPickedImage(image.source);
    setPickedImage({
      image: {source},
    });
    // props.onImageTaken(image.uri);
  }
});

};`

Lib Version: react-native-image-picker: '2.3.4'
It does working! Thanks

For now passing following storage option, seemed to have fixed launchCamera on Android 10 for me.
{ storageOptions: { privateDirectory: true } }
In my case private directory serves the purpose.

build.gradle settings:

ext { buildToolsVersion = "29.0.2" minSdkVersion = 17 compileSdkVersion = 29 targetSdkVersion = 29 supportLibVersion = "28.0.0" renderscriptVersion = 21 }

Lib Version:
"react-native-image-picker": "2.3.1"

[thuynt99]

For now passing following storage option, seemed to have fixed launchCamera on Android 10 for me.
{ storageOptions: { privateDirectory: true } }
In my case private directory serves the purpose.

build.gradle settings:

ext { buildToolsVersion = "29.0.2" minSdkVersion = 17 compileSdkVersion = 29 targetSdkVersion = 29 supportLibVersion = "28.0.0" renderscriptVersion = 21 }

Lib Version:
"react-native-image-picker": "2.3.1"

It's so good. Thank you very much!

[surajl11]

but if I choose a video from the gallery to upload in android ,its getting me a relative path of the video which is not uploading, this is only happening in android ,in iOS its giving me the absolute path ,please help