React-native-image-crop-picker: App crashes on iOS

[tedjames]

Version

• react-native-image-crop-picker v0.12.2
• react-native v0.41.1

Platform

• iOS

Problem

App freezes and a kernel error is thrown in xCode when the openPicker method is called.
Everything has been linked manually based on the instructions in the Readme file.
I have attached an image with error and the code running the app.

Attachments

Error when using openCamera:

Error when using openPicker:

Code

import React, { Component } from 'react';
import { View, TouchableOpacity, TextInput, Text, ActionSheetIOS } from 'react-native'
import Icon from 'react-native-vector-icons/SimpleLineIcons'
import ImagePicker from 'react-native-image-crop-picker';

const styles = {
  commentContainer: {
    marginTop: 15,
    flexDirection: "row"
  },
  attachIcon: {
    color: "#8b8b8b",
    marginLeft: 1.5,
    marginTop: 4,
    flex: 1
  },
  formField: {
    fontSize: 11.5,
    borderColor: "#bbb",
    borderWidth: 1,
    borderRadius: 3,
    marginLeft: 15,
    marginTop: -2,
    paddingLeft: 8,
    paddingTop: 2,
    backgroundColor: "#f5f5f5",
    flex: 10
  },
  activeSend: {
    marginTop: 1,
    flex: 1,
    marginLeft: 17,
    fontFamily: "Open Sans",
    fontSize: 14,
    fontWeight: "500",
    color: "#5fbcd5"
  },
  send: {
    marginTop: 1,
    flex: 1,
    marginLeft: 17,
    fontFamily: "Open Sans",
    fontSize: 14,
    fontWeight: "500",
    color: "#cccccc"
  }
}

export default class NewComment extends Component {
  constructor(props) {
    super(props);

    this.state = ({
      text: "",
      height: 21
    });
  }

  renderSendButton(text) {
    if (text != "") {
      return (
        <TouchableOpacity activeOpacity={0.4}>
          <Text style={styles.activeSend}>Send</Text>
        </TouchableOpacity>
      );
    } return (
      <TouchableOpacity activeOpacity={1}>
        <Text style={styles.send}>Send</Text>
      </TouchableOpacity>
    );
  }

  handlePress() {
    ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true
    }).then(image => {
        console.log(image);
    });
  }

  render() {
    return (
      <View style={styles.commentContainer}>
        <TouchableOpacity activeOpacity={0.4} onPress={this.handlePress}>
          <Icon name="paper-clip" size={16} style={styles.attachIcon} />
        </TouchableOpacity>
        <TextInput
          style={[styles.formField, { height: this.state.height + 7 }]}
          selectionColor="#728ce7"
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
          placeholder="Add comment..."
          clearButtonMode="always"
          autoCapitalize="none"
          keyboardAppearance="dark"
          onContentSizeChange={(e) => this.setState({ height: e.nativeEvent.contentSize.height })}
          multiline
        />
        {this.renderSendButton(this.state.text)}

      </View>
    );
  }
}

Any help would be greatly appreciated 👍

[srtucker22]

For me, this issue popped up because I needed a usage description in the Info.plist to request access to the photo library:

In Xcode open Info.plist.
You can add a field (select from dropdown menu):
Privacy - Photo Library Usage Description: String

where String is the description you want to send with your request for access (e.g. 'To share photos with friends')

[tedjames]

Thanks! That did the trick. Not sure why this wouldn't be in the manual installation instructions...

[ivpusic]

added here https://github.com/ivpusic/react-native-image-crop-picker/commit/5c705593081289212cdc5ed18a0af23e5518736d. tnx guys for reporting this

[zoontek]

@ivpusic You also need NSCameraUsageDescription for camera usage and NSMicrophoneUsageDescription for videos :)