Install.md

Install

yarn add react-native-image-picker

# RN >= 0.60
cd ios && pod install

# RN < 0.60
react-native link react-native-image-picker

⚠️ If you need to support React Native < 0.40, you must install this package: [email protected].

Post-install Steps

iOS

For iOS 10+:

Add the NSPhotoLibraryUsageDescription, NSCameraUsageDescription, NSPhotoLibraryAddUsageDescription and NSMicrophoneUsageDescription (if allowing video) keys to your Info.plist with strings describing why your app needs these permissions.

Note: You will get a SIGABRT crash if you don't complete this step

<plist version="1.0">
  <dict>
    ...
    <key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your camera</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your microphone (for videos)</string>
  </dict>
</plist>

⚠️ If you are planning on submitting your application to app store:

To be compliant with Guideline 5.1.1 - Legal - Privacy - Data Collection and Storage, the permission request alert should specify how your app will use this feature to help users understand why your app is requesting access to their personal data.

$(PRODUCT_NAME) would like access to your photo gallery to change your profile picture

Android

Add the required permissions in AndroidManifest.xml:

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

Android (Optional)

If you've defined project-wide properties (recommended) in your root build.gradle, this library will detect the presence of the following properties:

buildscript {...}
allprojects {...}

/**
  + Project-wide Gradle configuration properties
  */
ext {
    compileSdkVersion   = 27
    targetSdkVersion    = 27
    buildToolsVersion   = "27.0.3"
}

Customization settings of dialog android/app/res/values/themes.xml (android/app/res/values/style.xml is a valid path as well):

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="DefaultExplainingPermissionsTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
        <!-- Used for the buttons -->
        <item name="colorAccent">@color/your_color</item>

        <!-- Used for the title and text -->
        <item name="android:textColorPrimary">@color/your_color</item>

        <!-- Used for the background -->
        <item name="android:background">@color/your_color</item>
    </style>
</resources>

Manual Installation

iOS

1. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>.
2. Go to node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj.
3. Add libRNImagePicker.a to Build Phases -> Link Binary With Libraries.
4. Refer to Post-install Steps.
5. Compile and have fun.

Android

1. Add the following lines to 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')

2. Update the android build tools version to 2.2.+ in android/build.gradle:

   buildscript {
       ...
       dependencies {
           classpath 'com.android.tools.build:gradle:2.2.+' // <- USE 2.2.+ version
       }
       ...
   }
   ...

3. Update the gradle version to 2.14.1 in android/gradle/wrapper/gradle-wrapper.properties:

   ...
   distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
   

4. Add the implementation line to the dependencies in android/app/build.gradle:

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

5. Add the import and link the package in 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)
           );
       }
   }

6. If MainActivity is not instance of ReactActivity, you will need to implement OnImagePickerPermissionsCallback to MainActivity:

   import com.imagepicker.permissions.OnImagePickerPermissionsCallback; // <- add this import
   import com.facebook.react.modules.core.PermissionListener; // <- add this import
   
   public class MainActivity extends YourActivity implements OnImagePickerPermissionsCallback {
     private PermissionListener listener; // <- add this attribute
   
     // Your methods here
   
     // Copy from here
   
     @Override
     public void setPermissionListener(PermissionListener listener)
     {
       this.listener = listener;
     }
   
     @Override
     public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults)
     {
       if (listener != null)
       {
         listener.onRequestPermissionsResult(requestCode, permissions, grantResults);
       }
       super.onRequestPermissionsResult(requestCode, permissions, grantResults);
     }
   
     // To here
   }

   This code allows to pass result of request permissions to native part.

7. Refer to Post-install Steps.