Getting all media from Mobile gallery in React-native

Introduction

React native provides many packages to access the gallery and camera. To get all types of media from mobile, react-native provides the cameraRoll. It is a native module of react-native which provides access to the local camera roll or photo library.

Installation using npm:

$ npm install @react-native-community/cameraroll –save

Automatic Linking:

react-native link @react-native-community/cameraroll

Manual Linking

iOS

1. In XCode, first, go to the project navigator, then right-click on Libraries ➜ Add Files to [project’s name]
2. Go to node_modules ➜ @react-native-community/cameraroll and add RNCCameraroll.xcodeproj
3. In XCode, go to the project navigator, select your project. Add libRNCCameraroll.a to your project’s Build Phases tab ➜ Link Binary With Libraries
4. Run your project.

Android

1. Open android/app/src/main/java/[…]/MainApplication.java file.
2. Add import com.reactnativecommunity.cameraroll.CameraRollPackage; to the imports at the top of the file.
3. Add new CameraRollPackage() to the list returned by the getPackages() method
4. Append the following lines to android/settings.gradle:
   include ‘:@react-native-community_cameraroll’ project(‘:@react-native-community_cameraroll’).projectDir = new File(rootProject.projectDir, ‘../node_modules/@react-native-community/cameraroll/android’)
5. Insert the following lines inside the dependencies section in android/app/build.gradle:
   compile project(‘:@react-native-community_cameraroll’)

Permissions:
In android and iOS user permissions are required in order to access cameraRoll and gallery. For iOS you need to add the following permissions in the info.plist file:

<key>NSPhotoLibraryAddUsageDescription</key>
<string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) would like access to your photo gallery</string>

Where $(PRODUCT_NAME) is your application name.
For Android. you need to add the following permissions in the AndroidManifest.xml file:

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

Usage:

import React, {Component} from 'react';
import CameraRoll from "@react-native-community/cameraroll";
export default class App extends Component<Props>{
constructor(props){
super(props);
}
_handleButtonPress = () => {
   CameraRoll.getPhotos({
first: 20,
       assetType: 'Photos',
     })
     .then(r => {
       this.setState({ photos: r.edges });
     })
     .catch((err) => {
        //Error Loading Images
     });
   };
render() {
 return (
   <View>
     <Button title="Load Images" onPress={this._handleButtonPress} />
     <ScrollView>
       {this.state.photos.map((p, i) => {
       return (
         <Image
           key={i}
           style={{
             width: 300,
             height: 100,
           }}
           source={{ uri: p.node.image.uri }}
         />
       );
     })}
     </ScrollView>
   </View>
 );
}
}

The first parameter used in above example is required for cameraRoll.
first : {number} : The number of photos needed in reverse order.
assetType : {string} : Specifies the filter on the asset type. Valid values are:

• All
• Videos
• Photos // default

For example, to get photos and videos only, you can pass Photos|Videos also
There are so many parameters present in it that you can pass for filtration.

Result: The above example will display 20 images from the gallery on Load Images button press.

Being the most extensively used JavaScript library, a jQuery certification will add enormous value to your skill-set. jQuery provides various functionalities to the developer in order to develop complex applications with ease and efficiency.