Pay attention to

I'm currently using the react Native version: "react-native": "0.63.4"

React Native Image Picker introduction

This is the component for selecting pictures or videos on the phone

The installation

npm i react-native-image-picker

Link libraries

android\settings.gradle

include ':react-native-image-picker' project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '.. /node_modules/react-native-image-picker/android')Copy the code

android\app\build.gradle

dependencies {
     implementation project(':react-native-image-picker')
}

Copy the code

Set up theAndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.social_app" xmlns:tools="http://schemas.android.com/tools">
................
    <uses-permission android: />
    <uses-permission android:/>
    <uses-sdk tools:overrideLibrary="com.imagepicker"/>
    <application
      android:requestLegacyExternalStorage="true">
................
    </application>

</manifest>


Copy the code

Register the React Native PickerI didn’t register, but I made a mistake after I registered. It should be above version 0.6, and most third-party packages introduced do not require registration.

//android\app\src\main\java\com\social_app\MainApplication.java import com.imagepicker.ImagePickerPackage; // <-- add this import public class MainApplication extends Application implements ReactApplication { @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new ImagePickerPackage(), // <-- add this line // OR if you want to customize dialog style new ImagePickerPackage(R.style.my_dialog_style) ); } } //android\app\src\main\java\com\social_app\MainActivity.java // 1. Add the following two lines: import com. The imagepicker. Permissions. OnImagePickerPermissionsCallback; // <- add this import import com.facebook.react.modules.core.PermissionListener; // <- add this import public class MainActivity extends ReactActivity { // 2. Add the following line: private PermissionListener Listener; // <- add this attribute /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */ @Override protected String getMainComponentName() { return "native_camera"; }}Copy the code

Problems that may be encountered during use

1, an error prompt image – picker and SDK version problem, you can open your project under android/app/SRC/main/AndroidManifest. The XML file to add the following two lines of code:

xmlns:tools="http://schemas.android.com/tools"
<uses-sdk tools:overrideLibrary="com.imagepicker"/>

Copy the code

Debug the error

  • Task :app:processDebugManifest FAILED

Why it’s wrong: This Manifest merger can really boil down to configuration problems in Androidmanifest.xml or build.gradle. Gradle Console is located in the lower right corner of as.

Packaging error

  • The reason:

This problem was not originally caused by the RN version, the reason is that 0.61.3 has updated the Android SDK version to 28, which is incompatible with some native code plug-ins, because the third party does not update in time, the SDK is still the old version.



Modify these places

  • Reference ReactNative packaging error: Execution failed for task ‘: XXXXX: verifyReleaseResources’.

reference

React-native image-picker 2.x and 3.x (latest version