Image Picker not working in React Native app, why?

Question

I've installed react-native-image-picker successfully, for a fresh react native app, linked it and given right permissions via the info.plist file to access camera, photos etc...

I'm using the code from the ReadMe on react-native-image-picker page, but i receive an error

When attempting to openGallery() i get the following warning and no image library opens:

Possible unhandled Promise Rejection TypeError; undefined is not a function (near...reactNativeImagePicker.default.launchImageLibrary...)

Here's my code:

import ImagePicker from 'react-native-image-picker';
.....

class App extends Component {

  constructor(props) {
    super(props)

    this.state = {
      fileURL: '',
    }
  }

   //function
   openGallery = async () => {
      const options = {
        mediaType: 'video'
      }

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

      if(response.didCancel){
        console.log('User cancelled image picker');
      }
      else{
       this.setState({ fileURL: response.uri });
      }
    });
 }

render() {
  return (
   <View style={styles.container}>      
    <Button 
       style={{margin: 20}}
       onPress={this.openGallery}
       title='Open Gallery'
       backgroundColor='blue'
    />
   </View>

);

 }   
}

Its run of the mill boiler plate code. Whats going on?

@BoredKid, i get this in my console log:

for (ImagePicker):

{showImagePicker: ƒ}
showImagePicker: ƒ showImagePicker(options, callback)
__proto__: Object

for (ImagePicker.showImagePicker);

ƒ showImagePicker(options, callback) {
      if (typeof options === 'function') {
        callback = options;
        options = {};
      }

      return ImagePickerManager.showImagePicker((0, _objectS…

Is this on a simulator or real device? ios, android or both? — mediaguru
– mediaguru, Commented Jan 24, 2019 at 19:43
on the iOs simulator on the Mac (iPhone X), not using Expo at all — chai86
– chai86, Commented Jan 24, 2019 at 20:25

Mithilesh Gupta · Accepted Answer · 2019-06-23 08:49:29Z

3

Instead of writing

import { ImagePicker } from 'react-native-image-picker',

you should declare ( In the same place )...

var ImagePicker = require('react-native-image-picker');

This worked for me.

answered Jun 23, 2019 at 8:49

Mithilesh Gupta

2,9401 gold badge21 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jesper Kristensen · Accepted Answer · 2021-02-08 08:08:30Z

3

The module does not have a default export. You need to use a named export:

import * as ImagePicker from 'react-native-image-picker';

or

import {launchImageLibrary} from 'react-native-image-picker';

answered Feb 8, 2021 at 8:08

Jesper Kristensen

3004 silver badges9 bronze badges

Comments

Rafiq · Accepted Answer · 2021-03-27 11:49:01Z

I solve this error by installing the latest version, for me it was

"react-native-image-picker": "^3.3.2",

and also using example code from repository: https://github.com/react-native-image-picker/react-native-image-picker/blob/main/example/src/App.js

import React, {useState, useEffect} from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';
import cameraImage from '../../../../assets/icons/camera.png';
import galleryImage from '../../../../assets/icons//gallery.png';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import * as ImagePicker from 'react-native-image-picker';
import {PermissionsAndroid} from 'react-native';
const ImagePicker = () => {
  const [responseCamera, setResponseCamera] = React.useState(null);
  const [responseGallery, setResponseGallery] = React.useState(null);

  const openCameraWithPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: 'App Camera Permission',
          message: 'App needs access to your camera ',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        ImagePicker.launchCamera(
          {
            mediaType: 'photo',
            includeBase64: false,
            maxHeight: 200,
            maxWidth: 200,
          },
          (response) => {
            console.log(response);
            setResponseCamera(response);
            setResponseGallery(null);
          },
        );
      } else {
        console.log('Camera permission denied');
      }
    } catch (err) {
      console.warn(err);
    }
  };

  return (
    <View
      style={{
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-around',
        margin: 4,
      }}>
      <TouchableOpacity onPress={() => openCameraWithPermission()}>
        {responseCamera === null ? (
          <Image style={styles.icon} source={cameraImage} />
        ) : (
          <Image style={styles.icon} source={{uri: responseCamera.uri}} />
        )}
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() =>
          ImagePicker.launchImageLibrary(
            {
              mediaType: 'photo',
              includeBase64: false,
              maxHeight: 200,
              maxWidth: 200,
            },
            (response) => {
              setResponseGallery(response);
              setResponseCamera(null);
            },
          )
        }>
        {responseGallery === null ? (
          <Image style={styles.icon} source={galleryImage} />
        ) : (
          <Image style={styles.icon} source={{uri: responseGallery.uri}} />
        )}
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  icon: {
    height: 50,
    width: 50,
  },
});

export default ImagePicker;

  <uses-permission android:name="android.permission.CAMERA"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-feature android:name="android.hardware.camera" />

thx for the example, i was dealing with non-opening camera and i was missing this PermissionsAndroid.PERMISSIONS.CAMERA logic

BoredKid · Accepted Answer · 2019-01-25 08:13:50Z

0

Updated with new input: your ImagePicker object do not have launchImageLibrary nor launchCamera. There is a problem with you installation ... Maybe the installation didn't work properly or there is a step you made wrong. Let's try to reinstall and we'll see it the problem persist

edited Jan 25, 2019 at 8:13

answered Jan 24, 2019 at 19:40

BoredKid

594 bronze badges

3 Comments

chai86 Over a year ago

Perfect, rolled back to v0.27.0 from Oct2018 and all is ok :D Still have NO idea why the latest v0.28.0 isn't working when i followed exactly the same process to install. Now the 'fun' begins: react-native-video-processing

chai86 Over a year ago

Thanks for helping me dig a little deeper into the issue :)

Rafiq Over a year ago

not just reinstalling, I had to make sure I installed the latest version, for me the latest version is: "react-native-image-picker": "^3.3.2",

Ahsan Raza Alvi · Accepted Answer · 2022-08-15 20:09:06Z

0

this is same error occur when i am install react-native-image- picker default off version 2 when i am change the version of following method npm install [email protected]

answered Aug 15, 2022 at 20:09

Ahsan Raza Alvi

493 bronze badges

Collectives™ on Stack Overflow

Image Picker not working in React Native app, why?

5 Answers 5

Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related