Can't display and save image taken by RNCamera on Android

[d2luu]

I installed my app on Samsung galaxy note FE (real device), with Android 8.0 (API 26), my app get the image taken by react-native-camera but the photo didn't display in Editor View instead of a black screen. I also try press save the image (full black image) but Editor View close without being able to save. So, I try to run project on Android Studio on google pixel with API 27, result still same as my real device. Here is I caught in Logcat:

I use react-native-camera to capture image, my javascript's code:

takePicture = async () => {
    if (this.camera.current) {
      const options = { quality: 0.8, base64: true };
      const data = await this.camera.current.takePictureAsync(options);

      RNPhotoEditor.Edit({
        path: data.uri,
        stickers: [
          'sticker0',
          'sticker1',
          'sticker2',
          'sticker3',
          'sticker4',
        ],
        hiddenControls: [],
        colors: undefined,
      });
    }
  };

AndroidManifest.xml:

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

    <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.RECORD_AUDIO"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="true"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <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" />
      <activity android:name="com.ahmedadeltito.photoeditor.PhotoEditorActivity" />
    </application>

</manifest>

My app runs properly on iPhone device with ios >= 11.

[d2luu]

I found why the black screen display on EditorView. It turns out the path of image taken by RNCamera contain 'file://', so I fix my code to:

takePicture = async () => {
    if (this.camera.current) {
      const options = { quality: 0.8, base64: true };
      const data = await this.camera.current.takePictureAsync(options);
      const imgPath = data.uri.replace('file://', '');

      RNPhotoEditor.Edit({
        path: imgPath,
        stickers: [
          'sticker0',
          'sticker1',
          'sticker2',
          'sticker3',
          'sticker4',
        ],
        hiddenControls: [],
        colors: undefined,
      });
    }
  };

But I faced another problem. The image now display on Editor View but it was rotated to horizontal:

And, the image still can't save. Error on Logcat same to above. @prscX Do you have any idea on this?

[dhung133]

I got the same issue, any solution on this?

[kle7]

I had same problem here. When I click save button on the first time, the permission modal did not display, and then the image can't save.

[d2luu]

I created PR to fix save image on Android. The problem Image was rotated to horizontal on Editor after taken by RNCamera can be solved by add property fixOrientation: true into options of RNCamera. So now js code become to:

takePicture = async () => {
    if (this.camera.current) {
      const options = {
        quality: 0.8,
        base64: true,
        fixOrientation: true, // Add this to prevent image rotated
      };
      const data = await this.camera.current.takePictureAsync(options);
      const imgPath = data.uri.replace('file://', '');

      RNPhotoEditor.Edit({
        path: imgPath,
        stickers: [
          'sticker0',
          'sticker1',
          'sticker2',
          'sticker3',
          'sticker4',
        ],
        hiddenControls: [],
        colors: undefined,
      });
    }
  };

I hope it can help.

[ahmedelsayed11]

how to save the image after editing ??

[prscX]

It automatically updates the edited image to the source path.