react-native camera roll "null is not an object (evaluating 'this.state.photos')"

react native camera roll expo
react-native camera roll base64
react native access camera
react-native-image-picker
react-native-camera-kit
react-native-camera stream
rctcameraroll
react-native-camera npm

So I'm trying to add camera roll functionality to my camera roll demo app and I keep getting this error. "null is not an object (evaluating 'this.state.photos')" iOS Error Message Please note: I am a very new developer and this is my first react-native app. Any help would be greatly appreciated.

Below is the contents of my index.ios.js file.

//index.ios.js


import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Dimensions,
    View,
    TouchableOpacity,
    Image,
    CameraRoll,
    ScrollView,
    Button,
} from 'react-native';


import Camera from 'react-native-camera';
import { createStackNavigator } from 'react-navigation'

export default class MyCamera extends Component {
    render() {

        return (

            <View style={styles.container}>

                <Camera
                    ref={(cam) => {
                        this.camera = cam;
                    }}
                    style={styles.preview}
                    aspect={Camera.constants.Aspect.fill}>

                    <TouchableOpacity style={styles.button} onPress={this.takePicture.bind(this)}>
                        <Image source={require("./resources/images/shutter_button.png")}/>
                    </TouchableOpacity>

                </Camera>

                <Button title="Load Images" onPress={this._handleButtonPress}/>


                {this.state.photos.map((p, i) => {
                    <Image
                        key={i}
                        style={{
                            width: 300,
                            height: 100,
                        }}
                        source={{uri: p.node.image.uri}}
                    /> // Closing IMG Tag

                })}

            </View>
        ); //Closing Return 
    } //Closing Render 

    takePicture() {
        this.camera.capture()
            .then((data) => console.log(data))
            .catch(err => console.error(err));
    }// Closing takePicture

    _handleButtonPress = () => {
        CameraRoll.getPhotos({
            first: 20,
            assetType: 'Photos',
        })
            .then(r => {
                this.setState({photos: r.edges});
            })
            .catch((err) => {
                //Error Loading Images
            });
    }; //Closing handleButtonPress

};// Closing MyCamera

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width
    },
    capture: {
        flex: 0,
        backgroundColor: '#fff',
        borderRadius: 10,
        color: '#000',
        paddingRight: 20,
        margin: 40
    }
});

AppRegistry.registerComponent('MyCamera', () => MyCamera);

in MyCameraClass' you should add

  constructor(){
  super();

  this.state={
    photos: []
  }

}

before render

CameraRoll · React Native, CameraRoll provides access to the local camera roll or photo library. On iOS, the CameraRoll API requires the RCTCameraRoll library to be linked. You can  CameraRoll is a react-native native module that provides access to the local camera roll or photo library.

The photos value is only set after you press the Load Images button which means that until then, this.state.photos is undefined, to account for that, you can do something like this:

{!!this.state.photos && this.state.photos.map((p, i) => {
      <Image
          key={i}
          style={{
              width: 300,
              height: 100,
           }}
           source={{uri: p.node.image.uri}}
     /> // Closing IMG Tag

})}

The !! simply converts truthy values to true and falsy values to false which means that when this.state.photos is undefined, the this.state.photos.map.... statement is not evaluated (the error is prevented).

Mastering the Camera Roll in React Native, Accessing, sharing, and saving images to the device Camera Roll using React Native. In this post, I'll walk through how to: View images in the device camera roll​  A framework for building native apps using React,CameraRoll provides access to the local camera roll or photo library.On iOS, the CameraRoll API requires the R React Native 0.57 Docs

The first value of the state is null so you have set it like an object.

// like a property of your class
state = {
    photos: []
};

// or in constructor 
constructor(props) {
    super(props);

    this.state = { photos: [] };
}

CameraRoll · React Native, CameraRoll` provides access to the local camera roll / gallery. Saves the photo or video to the camera roll / gallery. On Android, the tag must be a local image or video URI, such as "file:///sdcard/img.png" . On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs) or a local video file URI (remote or data URIs are not supported for saving video at this time).

@react-native-community/cameraroll, CameraRoll provides access to the local camera roll / gallery. require('react'); const ReactNative = require('react-native'); const { CameraRoll, Image, Slider,  React Native - CameraRoll - In this chapter, we will show you how to use Camera.

react-native-camera-roll-picker, React Native - CameraRoll - In this chapter, we will show you how to use Camera​. One of the advantages of React Native is the ease of access the framework gives developers to the actual device APIs. One of those that is especially impressive is the native camera roll.

CameraRoll, This guide will help you implement the camera roll API for accessing pictures on a device. Feel free to also check out the official React Native  react-native-camera-roll-gallery uses React Native's CameraRoll API. It requires the RCTCameraRoll library to be linked. Learn more about Linking Libraries (iOS) clicking here or read for further instructions.