CODEWITHSUNDEEP
javascriptiosreactjsreact-nativecamera
Jamison Whitehill
Jamison Whitehill

Reputation: 1

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

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);

Upvotes: 0

Views: 1665

Answers (3)

mcssym
mcssym

Reputation: 944

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: [] };
}

Upvotes: 0

gugy
gugy

Reputation: 21

in MyCameraClass' you should add 

  constructor(){
  super();

  this.state={
    photos: []
  }

}

before render

Upvotes: 1

Titus
Titus

Reputation: 22474

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).

Upvotes: 0

Related Questions