rn-photo-upload-page

Android Installation

Install the npm package rn-photo-upload-page.

npm install --save rn-photo-upload-page

In android/settings.gradle, remove the line include ':app' and add the following lines

include ':rn-photo-upload-page'
project(':rn-photo-upload-page').projectDir = file('../node_modules/rn-photo-upload-page/android')

NOTE : If you have included other libraries in your project, the include line will contain the other dependencies too.

In android/app/build.gradle, add a dependency to ':rn-photo-upload-page'

dependencies {
    compile project(':rn-photo-upload-page')
}

Next, you need to change the MainApplication of your app to register FullScreenPackage :

import com.rn.photo.upload.page.FullScreenPackage; // add this import

public class MainApplication extends Application implements ReactApplication  {
    //...

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new FullScreenPackage() // add this manager
      );
    }

Next, you need to add the MainActivity of your app to register LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES :

import android.view.WindowManager;
import android.os.Build;
import android.os.Bundle;

public class MainActivity extends ReactActivity {
    //...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
          WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
          layoutParams.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
          getWindow().setAttributes(layoutParams);
        }
        super.onCreate(savedInstanceState);
    }
    

Next, you need to add the these to your own component :

import PhotoUpload  from 'rn-photo-upload-page';

 //...

  return (
    <...>
      <PhotoUpload token={yourToken} instructions={yourTokenText} style={yourOwnStyle} />
    <...>
  )

Next, don't forget to add this to your build.gradle dependency to make sure the gif image work correctly:

  dependencies {
    // For animated GIF support
    implementation 'com.facebook.fresco:animated-gif:0.11.0'
    // For RN >= 0.60
    implementation 'com.facebook.fresco:fresco:2.0.0'
    implementation 'com.facebook.fresco:animated-gif:2.0.0'
  }

Next, don't forget to add this to your AndroidManifest.xml, to make sure you can restore to previous brightness:

  <uses-permission android:name="android.permission.WRITE_SETTINGS" />

Next, if have an issues on dependencies, you need to add this to your build.gradle, setting.gradle, MainApplication.java dependency :

  dependencies {
    implementation project(':react-native-device-info')
    // implementation project(':KeepScreenOn')
    implementation project(':react-native-system-setting')
  }

include ':react-native-device-info'
project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')
// include ':KeepScreenOn'
// project(':KeepScreenOn').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keep-screen-on/android')
include ':react-native-system-setting'
project(':react-native-system-setting').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-system-setting/android')

import com.learnium.RNDeviceInfo.RNDeviceInfo;
// import com.gijoehosaphat.keepscreenon.KeepScreenOnPackage;
import com.ninty.system.setting.SystemSettingPackage;

public class MainApplication extends Application implements ReactApplication  {
    //...

    @Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      packages.add(new RNDeviceInfo());
      // packages.add(new KeepScreenOnPackage());
      packages.add(new SystemSettingPackage());
      
      return packages;
    }

If there is any error, please take a look at these dependencies below :

    "react-native-qrcode-svg",
    "react-native-svg",
    "react-native-device-info",
    "react-native-system-setting",
    "react-native-keep-screen-on"

Version below < 0.60, need to run react-native link <package>. For version above >= 0.60, if still got an error, you can run react-native link <package> or do manual linking based on those package npm/github documentation.

For iOS you only need to wrap your own component using View instead of SafeAreaView.