myTest532 myTest532
myTest532 myTest532

Reputation: 2381

IOS React Native ImagePickerManager is null

I'm trying to use the package react-native-image-picker with IOS emulator.

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

constructor(props) {
    super(props);
    this.state = {
      avatarSource: null,
    };

    this.selectPhotoTapped = this.selectPhotoTapped.bind(this);
}

selectPhotoTapped() {
    const options = {
      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,
        });
      }
    });
  }

  render() {
      ...
      <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
            <View
              style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
              {this.state.avatarSource === null ? (
                <Text>Select a Photo</Text>
              ) : (
                <Image style={styles.avatar} source={this.state.avatarSource} />
              )} 
            </View>
          </TouchableOpacity>
  }

When I run the code, I get the error: enter image description here I already try to run react-native link react-native-image-picker, but it did not fix the problem. Do I need to link another library?

Thanks

Upvotes: 3

Views: 1082

Answers (2)

Kabir
Kabir

Reputation: 862

Perform this steps: document:link

  1. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>.
  2. Go to node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj.
  3. Add libRNImagePicker.a to Build Phases -> Link Binary With Libraries.
  4. Refer to Post-install Steps.

Compile and have fun.

OR

try to
Downgrade version

  1. npm uninstall react-native-image-picker
  2. npm install [email protected]
  3. Link using react-native link react-native-image-picker
  4. Do pod install inside ios folder
    Here is link :link


Upvotes: 1

Domo
Domo

Reputation: 46

These steps worked for me, using the current version 1.0.2 of react-native-image-picker and iOS Simulator 10.3 running iPhone X - 12.4:

npm install
react-native link react-native-image-picker
cd ios && pod install
cd ../ && react-native run-ios

Upvotes: 0

Related Questions