Can not use ImagePicker on iOS in react native

Question

I have a problem for using ImagePicker in react native. I have installed the module using the command npm install react-native-image-picker.

And link the module using react-native link. And also configure for Android and iOS. For iOS, add following permission to Info.plist file:

<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) would like access to your photo gallery</string>
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) would like to use your camera</string>
<key>NSPhotoLibraryAddUsageDescription</key>

For android add following permissions to AndroidManifest.xml:

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

My code is following:

const options = {
    title: 'Select Picture...',
    storageOptions: {
      skipBackup: true,
      path: 'images',
    },
  };

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

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

And then run the project using react-native run-android, react-native run-ios

It's ok on android, but I have a error on iOS.

Following is error I get:

Following is my package.json file:

{
  "name": "example",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.1",
    "react-native": "0.57.7",
    "react-native-gesture-handler": "^1.0.10",
    "react-native-image-picker": "^0.27.1",
    "react-native-indicators": "^0.13.0",
    "react-native-maps": "^0.22.1",
    "react-native-maps-directions": "^1.6.0",
    "react-native-modal": "^7.0.1",
    "react-navigation": "^3.0.4"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.50.0",
    "react-test-renderer": "16.6.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

This is my App.js file:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TextInput, ScrollView} from 'react-native';


import { createStackNavigator, createAppContainer} from 'react-navigation';

import SignIn from './src/pages/SignIn';
import SignUp from './src/pages/SignUp';
import Home from './src/pages/Home';
import Setting from './src/pages/Setting';
import ForgetPassword from './src/pages/ForgetPassword';
import Verification from './src/pages/Verification';

const AppStackNavigation = createStackNavigator(
    {
        SignIn: {screen: SignIn},
        SignUp: {screen: SignUp},
        Home: {screen: Home},
        Setting: {screen: Setting},
        ForgetPassword: {screen: ForgetPassword},
        Verification: {screen: Verification},
    }
)

const AppContainer = createAppContainer(AppStackNavigation);

export default AppContainer;

Please share your answer who know to fix this error. Thanks.

Hi Dhruv. Thanks for your reply. I have used the CreateStackNavigator in App.js. And there is no use others. In certain page, there is a camera button and call the ImagePicker.showImagePicker function in the camera button click event. — Water Flower, Dec 04 '18 at 09:09
Please share some of the code snippet for that as well. It'd be helpful to trace down the issue. — Dhruv, Dec 04 '18 at 09:13
import { createStackNavigator, createAppContainer} from 'react-navigation'; const AppStackNavigation = createStackNavigator( { SignIn: {screen: SignIn}, SignUp: {screen: SignUp}, Home: {screen: Home}, Setting: {screen: Setting}, ForgetPassword: {screen: ForgetPassword}, Verification: {screen: Verification}, } ) const AppContainer = createAppContainer(AppStackNavigation); export default AppContainer; — Water Flower, Dec 04 '18 at 09:14
Hi. Dhruv. This code is helpful to fix my issue? Pls share your idea. Thanks. — Water Flower, Dec 04 '18 at 09:27
Please don't post it in comment section, it is not readable properly. Edit your question and put it there. — Dhruv, Dec 04 '18 at 10:13
Your code seems proper. You must have added image picker in one of the above screens you are passing in stack navigator. Right ? — Dhruv, Dec 05 '18 at 04:43
Yes. in SignUp screen, I have used the ImagePicker like as above(first code). — Water Flower, Dec 05 '18 at 06:05
Check this [link](https://github.com/react-community/react-native-image-picker/issues/714), it has some steps you can go through. — Dhruv, Dec 05 '18 at 11:38
@WaterFlower can you share your import statement? Maybe you are importing it wrong. — HarshitMadhav, Feb 26 '19 at 17:21

score 0 · Answer 1 · answered Aug 28 '19 at 18:14

you can using launchImageLibrary function

example:

import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import ImagePicker from 'react-native-image-picker';

export default class ImageSelect extends React.Component {
    state = {
        photo: null,
    };

    handleChoosePhoto = () => {
        const options = {
            noData: true,
        };
        ImagePicker.launchImageLibrary(options, response => {
            if (response.uri) {
                this.setState({ photo: response });
            }
        });
    };



    render() {
        const { photo } = this.state;
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                {photo && (
                    <Image
                        source={{ uri: photo.uri }}
                        style={{ width: 100, height: 100 }}
                    />
                )}
                <Button title="Choose Photo" onPress={this.handleChoosePhoto} />
            </View>
        );
    }
}
`

Can not use ImagePicker on iOS in react native

1 Answers1