{"id":3112,"date":"2020-08-13T06:24:19","date_gmt":"2020-08-13T06:24:19","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=3112"},"modified":"2023-02-20T12:53:55","modified_gmt":"2023-02-20T12:53:55","slug":"getting-all-media-from-mobile-gallery-in-react-native","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/getting-all-media-from-mobile-gallery-in-react-native\/","title":{"rendered":"Getting all media from Mobile gallery in React-native"},"content":{"rendered":"

Introduction<\/h2>\n

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

Installation using npm:<\/h3>\n

$ npm install @react-native-community\/cameraroll –save<\/em><\/p>\n

Automatic Linking:<\/h3>\n

react-native link @react-native-community\/cameraroll<\/em><\/p>\n

Manual Linking<\/h3>\n

iOS<\/strong><\/p>\n

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

    Android<\/strong><\/p>\n

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

      Permissions:<\/strong>
      \nIn 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:<\/p>\n

      <key>NSPhotoLibraryAddUsageDescription<\/key>\r\n<string>$(PRODUCT_NAME) would like to save photos to your photo gallery<\/string>\r\n<key>NSPhotoLibraryUsageDescription<\/key>\r\n<string>$(PRODUCT_NAME) would like access to your photo gallery<\/string><\/pre>\n
      Where $(PRODUCT_NAME) is your application name.
      \nFor Android. you need to add the following permissions in the AndroidManifest.xml file:<\/p>\n
      <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"\/><\/pre>\n
      Usage:<\/p>\n
      import React, {Component} from 'react';\r\nimport CameraRoll from \"@react-native-community\/cameraroll\";\r\nexport default class App extends Component<Props>{\r\nconstructor(props){\r\nsuper(props);\r\n}\r\n_handleButtonPress = () => {\r\n   CameraRoll.getPhotos({\r\nfirst: 20,\r\n       assetType: 'Photos',\r\n     })\r\n     .then(r => {\r\n       this.setState({ photos: r.edges });\r\n     })\r\n     .catch((err) => {\r\n        \/\/Error Loading Images\r\n     });\r\n   };\r\nrender() {\r\n return (\r\n   <View>\r\n     <Button title=\"Load Images\" onPress={this._handleButtonPress} \/>\r\n     <ScrollView>\r\n       {this.state.photos.map((p, i) => {\r\n       return (\r\n         <Image\r\n           key={i}\r\n           style={{\r\n             width: 300,\r\n             height: 100,\r\n           }}\r\n           source={{ uri: p.node.image.uri }}\r\n         \/>\r\n       );\r\n     })}\r\n     <\/ScrollView>\r\n   <\/View>\r\n );\r\n}\r\n}<\/pre>\n
      The first parameter used in above example is required for cameraRoll.
      \nfirst : {number} : The number of photos needed in reverse order.
      \nassetType : {string} : Specifies the filter on the asset type. Valid values are:<\/p>\n
        \n
      • All<\/li>\n
      • Videos<\/li>\n
      • Photos \/\/ default<\/li>\n<\/ul>\n
        For example, to get photos and videos only, you can pass Photos|Videos also
        \nThere are so many parameters present in it that you can pass for filtration.<\/p>\n
        Result: The above example will display 20 images from the gallery on Load Images<\/strong> button press.<\/p>\n
        Being the most extensively used JavaScript library, a jQuery certification<\/a> 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.<\/small><\/p>\n