React Native FullScreen api and Photo Upload Component
npm install rn-photo-upload-pageInstall the npm package rn-photo-upload-page.
``bash`
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')include
NOTE : If you have included other libraries in your project, the 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 :`java
import com.rn.photo.upload.page.FullScreenPackage; // add this import
public class MainApplication extends Application implements ReactApplication {
//...
@Override
protected List
return Arrays.
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 :
`java
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 :
`javascript
import PhotoUpload from 'rn-photo-upload-page';
//...
return (
<...>
<...>
)
`
Next, don't forget to add this to your build.gradle dependency to make sure the gif image work correctly:
`java`
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:
`xml`
Next, if have an issues on dependencies, you need to add this to your build.gradle, setting.gradle, MainApplication.java dependency :
`java`
dependencies {
implementation project(':react-native-device-info')
// implementation project(':KeepScreenOn')
implementation project(':react-native-system-setting')
}
`java`
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')
`java
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
@SuppressWarnings("UnnecessaryLocalVariable")
List
// 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 :
`json`
"react-native-qrcode-svg",
"react-native-svg",
"react-native-device-info",
"react-native-system-setting",
"react-native-keep-screen-on"react-native link
Version below < 0.60, need to run .react-native link
For version above >= 0.60, if still got an error, you can run
For iOS you only need to wrap your own component using View instead of SafeAreaView.