{"id":3094,"date":"2020-08-11T04:35:02","date_gmt":"2020-08-11T04:35:02","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=3094"},"modified":"2023-03-06T10:45:11","modified_gmt":"2023-03-06T10:45:11","slug":"cameraroll-in-react-native","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/cameraroll-in-react-native\/","title":{"rendered":"CameraRoll in React Native"},"content":{"rendered":"

Introduction<\/h2>\n

Currently, I am working on a React Native project. It is a cross-platform framework to build apps for android, IOS, and desktop with a single code base.
\nIn my project, there is a need for a gallery view where I need to show images stored in the device. So there is a package to get images from the local storage of the device. Before starting the implementation of the camera roll functionality make sure you have already set up the Nodejs<\/a>, npm, and React Native on your machine.<\/p>\n

Follow the below steps to bootstrap the React Native project:<\/h3>\n
    \n
  1. Run \u201creact-native init projectName\u201d<\/em>.<\/li>\n
  2. Install the CameraRoll package in your project using the below command. These commands will install the dependencies and will link all the dependencies.\n
      \n
    • npm install @react-native-community\/cameraroll –save<\/em><\/li>\n
    • react-native link @react-native-community\/cameraroll && cd ios && pod install<\/em><\/li>\n<\/ul>\n<\/li>\n
    • Now replace the code of App.js file with the below code.
      \n
      \nimport React, { Component } from 'react';
      \nimport { View, Image, Dimensions, FlatList } from 'react-native';
      \nimport CameraRoll from '@react-native-community\/cameraroll';
      \nconst imageWidth = Dimensions.get('window').width\/3;
      \nconst imageHeight = 150;<\/code><\/code>export default class App extends Component {
      \nconstructor(props){
      \nsuper(props);
      \nthis.state = {
      \ndata:[],
      \n};
      \n}
      \ncomponentDidMount(){
      \nthis.getPhotos(); \/\/ It will get images when component will be mounted and it will run only once.
      \n}<\/p>\n

      <\/code><\/code>getPhotos = () => {
      \nCameraRoll.getPhotos(
      \n{
      \nfirst: 15, \/\/ to get only first storage
      \nassetType: ‘Photos’, \/\/ to get only photos
      \n})
      \n.then(r => {
      \nvar photos = r.edges.map((asset) => {
      \nreturn {…asset.node.image};
      \n});
      \nthis.setState({ data:photos})
      \n}); \/\/ this is the function from camera roll which will run the native code to get the images from local storage.
      \n}
      \nrenderItem = ({item}) => {
      \nreturn (
      \n<View style={{padding:5}}>
      \n<Image style={{height:imageHeight, width:imageWidth – 10}} source={{uri:item.uri}}\/>
      \n<\/View>
      \n)
      \n}<\/p>\n

      <\/code><\/code>render() {
      \nreturn (
      \n<View
      \nstyle={{
      \npaddingTop: 50,
      \nflexDirection: ‘row’,
      \njustifyContent: ‘center’
      \n}}>
      \n<FlatList
      \ndata={this.state.data}
      \nnumColumns={3}
      \nrenderItem={this.renderItem}
      \n\/>
      \n<\/View>
      \n)
      \n}
      \n}<\/p>\n

      <\/code><\/code> <\/li>\n

    • After replacing the App.js code run \u201creact-native run-android\u201d<\/em> or \u201creact-native run-ios\u201d<\/em><\/li>\n
    • When your app will run, the view of the app will look like the below image.\"gallery\"<\/li>\n
    • This is a very basic example of Camera Roll. You can do more than this by reading documentation from this link<\/a>.<\/li>\n<\/ol>\n

      If you have skills in PHP programming and you want to enhance your career in this field, a PHP certification from StudySection can help you reach your desired goals. Both beginner level and expert level PHP Certification Exams<\/a> are offered by StudySection along with other programming certification exams. <\/em><\/small><\/p>\n