Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

How to install and use react-native-image-picker without error?

$
0
0

Hello and thank you for your interest in my problem.

I spent 3 days trying to use the react-native-image-picker library without success. This is why I write here in search of help.

Here is the error I encounter : Error: react-native-image-picker: NativeModule.ImagePickerManager is null.

I start my project on : React Native CLI Quickstart& currently working on IOS (simulator: Iphone 11 / IOS 13.2)

Here is my dependencies :

"dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.2",
    "react-native-image-picker": "^1.1.0",
    ...
  },

Here is the error I encounter when I downgrade the image-picker dependency to "^0.24.0" : TypeError: null is not an object (evaluating 'ImagePickerManager.showImagePicker')

I follow this install guide for IOS : https://github.com/react-native-community/react-native-image-picker/blob/master/docs/Install.md

My steps:

1- npm install react-native-image-picker

2- cd ios/ && pod install

3- To ios/myapp/Info.plist I add :

    ...
    <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>
    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
    ...

4- I open the IOS folder on my project into Xcode and select RNImagePicker.xcodeproj from node_modules like the guide say.

5- I click on RNImagePicker.xcodeproj => Build Phases => Link Binary With Libraries

6- I drag and drop libRNImagePicker.a from RNImagePicker.xcodeproj / Products / libRNImagePicker.a into Link Binary With Libraries

7- npx react-native run-ios

Before compile I got this : (I never never run the npx react-native link react-native-image-picker because Im over 0.60..)

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: 
  - react-native-image-picker (to unlink run: "react-native unlink react-native-image-picker")

After compile I got this warning :

warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 7.0, but the range of supported deployment target versions is 8.0 to 13.2.99. (in target 'react-native-image-picker' from project 'Pods')

but my current target version is 9.0

Here is my code :

import React, { useState } from 'react';
import { SafeAreaView, View, Image, StyleSheet, Button } from 'react-native';
import ImagePicker from 'react-native-image-picker';

export default function EditPhotoScreen() {
  const [state, setState] = useState({
    avatarSource: null,
  });

  const handlePhotoPicker = () => {
    ImagePicker.launchImageLibrary({ noData: true, mediaType: 'photo' }, (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 {
        const source = { uri: response.uri };

        setState({ avatarSource: source });
      }
    });
  };
  return (
    <SafeAreaView>
      <View>
        <Button title="Im so tired please render something" onPress={() => handlePhotoPicker()} />
        {state ?
          <Image source={state.avatarSource} />
          : null
        }
      </View>
    </SafeAreaView>
  );
}

Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>