React-Native: Crashes on android when using openCamera using react-native-image-crop-picker and Camera in general

Question

I've been having issues with react-native-image-picker and react-native-image-crop-picker while opening camera on my One Plus 6 for a while now. While using opening the camera, the background app that opened the camera (my app) crashes. It goes to a white screen and the restarts the app. Moreover, there were no logs in react-native log-android. I did manage to find out using android studio and logcat that once the camera opens the app crashes straight away and leaves a dead process. The issues is that I can't find any actual logs of the crash. Although beforehand I'm getting a lot of "Access denied finding property "vendor.debug.egl.swapinterval"" which after some research doesn't seem related.

This issues as of right now happens only on my One Plus 6T. The issues doesn't occur on an emulator or on IOS. Even not on a xiamoi device I tried it on.

I've tried everything from compressing the images in image crop picker (Code number one), and trying compress the image and using the noData flag in react-native-image-picker (code number two). Also, 100% have permissions, even can see it in permissions of android system in App permmision => {my app} Moreover, I tried cleaning the cache of my One Plus 6t camera, uninstalled-reinstalled my app, and reseting developer options to default.

I've basically went through all issues in github for both libraries and nothing works.

ImagePicker.openCamera({
                width: 800,
                height: 600,
                compressImageMaxWidth: 640,
                compressImageMaxHeight: 480,
                compressImageQuality: 0.8
            }).then(image => {
                console.log(image);
            }).catch(e => console.log(e));

ImagePicker.launchCamera({noData: true, maxWidth: 800, maxHeight: 600, quality: 0.8}, (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)
  }
});

Adding my manifest:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="------">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-feature android:name="android.hardware.camera" android:required="false"/>
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false"/>
    <uses-feature android:name="android.hardware.camera.front" android:required="false" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:largeHeap="true"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="true"
      android:supportsRtl="true"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize"
        android:launchMode="singleTop"
      >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
        <service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>
        <service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService">
            <intent-filter>
                <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
            </intent-filter>
        </service>
        <provider
                android:name="android.support.v4.content.FileProvider"
                android:authorities="${applicationId}.provider" android:exported="false"
                android:grantUriPermissions="true"> <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/provider_paths" /> </provider>
    </application>

</manifest>

expected result is to get the promise back. and the app not to crash when opening the camera.

Would love to get some input. I'm having this issue more then 2 weeks now.

Answer 1

I made it work by updating OxygenOS from 9.0.4 to 9.0.5.

I had exactly the same issue, trying both react-native-image-picker and react-native-image-crop-picker. It worked fine on the Android and iOS simulators but not on the device, a One Plus 6. But things started to click when it worked on a coworker's identical phone!

Make sure you try the release build. In my case I had to add some ProGuard rules for native-image-crop-picker from https://github.com/Yalantis/uCrop