title: TypeError: TypeError: null is not an object (evaluating 'this.state.ischecked1')
body: <p>I see the above error, every time I try clicking on my checkboxes
  I want individual checks onto the four checkboxes shown below, but I am not able to do it. Please help!
  The code is as follows:</p>
  
  <pre class="lang-js prettyprint-override"><code>import * as React from 'react';
  import {
    Text,
    View,
    StyleSheet,
    TouchableOpacity,
    ScrollView,
    Button,
  } from 'react-native';
  import { Header, Icon } from 'react-native-elements';
  import { Constants } from 'expo';
  import { CheckBox } from 'react-native-elements';
  
  import {
    createStackNavigator,
    createNavigatorContainer,
  } from 'react-navigation';
  
  
  export default class UpdateTypes extends React.Component {
    static navigationOptions = {
      title: 'UPDATE TYPES',
      style: {
        display: 'flex',
        flexDirection: 'row',
        backgroundColor: '#FFD700',
      },
    };
  
    constructor(props) {
          super(props);     
  
          this.state = {
              ischecked1: true,
              ischecked2: false,
              ischecked3: true,
              ischecked4: false,
          } 
      }  
  
  
    onChangeCheck1() {
      this.setState({ ischecked1: !this.state.ischecked1 });
    }
    onChangeCheck2() {
      this.setState({ ischecked2: !this.state.ischecked2 });
    }
    onChangeCheck3() {
      this.setState({ ischecked3: !this.state.ischecked3 });
    }
    onChangeCheck4() {
      this.setState({ ischecked4: !this.state.ischecked4 });
    }
  
    render() {
  
      return (
        &lt;View style={styles.container}&gt;
          &lt;View style={styles.innerview}&gt;
            &lt;TouchableOpacity style={styles.options}&gt;
              &lt;Text&gt;Select All&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
            &lt;TouchableOpacity style={styles.options}&gt;
              &lt;Text&gt;Deselect All&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
  
          &lt;Text style={styles.writeup}&gt;
            Some random Texts. Below are some checkboxes. Bla Bla Bla!
          &lt;/Text&gt;
  
          &lt;View style={StyleSheet.create({ flex: 1 })}&gt;
            &lt;CheckBox
              center
              title="CheckBoxA"
              checkedIcon="dot-circle-o"
              uncheckedIcon="circle-o"
              value={this.state.ischecked1}
              checked={this.state.ischecked1}
              onPress={this.onChangeCheck1}
            /&gt;
  
            &lt;CheckBox
              center
              title="CheckBoxB"
              checkedIcon="dot-circle-o"
              uncheckedIcon="circle-o"
              checked={this.state.ischecked2}
              value={this.state.ischecked2}
              onPress={this.onChangeCheck2}
            /&gt;
  
            &lt;CheckBox
              center
              title="CheckBoxC"
              checkedIcon="dot-circle-o"
              uncheckedIcon="circle-o"
              checked={this.state.ischecked3}
              value={this.state.ischecked3}
              onPress={this.onChangeCheck3}
            /&gt;
  
            &lt;CheckBox
              center
              title="CheckBoxD"
              checkedIcon="dot-circle-o"
              uncheckedIcon="circle-o"
              value={this.state.ischecked4}
              checked={this.state.ischecked4}
              onPress={this.onChangeCheck4}
  
            /&gt;
          &lt;/View&gt;
  
          &lt;TouchableOpacity style={styles.adsense}&gt;
            &lt;Text&gt;Adsense Ad&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      display: 'flex',
      flexDirection: 'column',
    },
    options: {
      flex: 1,
      alignItems: 'center',
      borderColor: '#008080',
    },
    writeup: {
      flex: 0.3,
      backgroundColor: '#FFE4B5',
      justifyContent: 'center',
      alignItems: 'center',
      padding: 8,
    },
    innerview: {
      flex: 0.4,
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
    },
    adsense: {
      flex: 0.55,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#778899',
    },
  });
  </code></pre>
  
  <p>Also, I am confused, when to use:</p>
  
  <ul>
  <li><code>onChange</code></li>
  <li><code>onChangeCheck</code></li>
  <li><code>onIconPress</code></li>
  <li><code>onLongPress</code></li>
  <li><code>onPress</code></li>
  </ul>
  
  <p>Are these the same, or there are specific usages?</p>