React Native Checkbox not working

Question

I have my react-native app consisting of a form. I have implemented two check-boxes with their state set to boolean true. I want boolean true or false to get submitted to the database from those check-boxes but the check-box button won't work. Here's my code:

import React, { Component } from 'react';
import { View, Text, Button, TextInput, StyleSheet } from 'react-native';
import { CheckBox } from 'react-native-elements';
import axios from 'axios';

export default class Delivery extends Component {
    constructor(props) {
      super(props);
      this.state = { 
          trackingNo: '',
          weight: '',
          length: '',
          width: '',
          //checked: true,
          delivered: { checked: true }

     };
    }


    componentDidMount(){

      fetch('https://courierapp-test.herokuapp.com/products/')
     .then(
       function(response) {
         if (response.status !== 200) {
           console.log('Looks like there was a problem. Status Code: ' +
             response.status);
           return;
         }

         // Examine the text in the response
         response.json().then(function(data) {
           console.log(data);
         });
       }
     )
     .catch(function(err) {
       console.log('Fetch Error :-S', err);
     });


    }


    onPressSubmit(){

        axios.post('https://courierapp-test.herokuapp.com/products/', {
          requestId: this.state.trackingNo,
          parcelWeight: this.state.weight,
          parcelLength: this.state.length,
          parcelWidth: this.state.width,
          parcelPickup: this.state.pickup,
          parcelDelivered: this.state.delivered,

        })


        .then(function (response) {
          console.log(response, "data sent");
        })


        .catch(function (error) {
          console.log(error, "data not sent");
        });
    }


    render() {

      return (

        <View style={{padding: 15}}>

        <TextInput
          style={styles.inputStyle}
          placeholder="Request Id"
          onChangeText={(trackingNo) => this.setState({trackingNo})}
          value={this.state.trackingNo}
        />

          <CheckBox style={styles.checkStyle}
            title='Pickup'
            checked={this.state.checked}
          />

          <CheckBox style={styles.checkStyle}
            title='Delivered'

            onValueChange={() => this.setState({ checked: !this.state.checked })}
          />

        <TextInput
          style={styles.inputStyle}
          placeholder="Enter Parcel Weight(Kg)"
          onChangeText={(weight) => this.setState({weight})}
          value={this.state.weight}
        />  

        <TextInput
          style={styles.inputStyle}
          placeholder="Enter Parcel Length(Cm)"
          onChangeText={(length) => this.setState({length})}
          value={this.state.length}
        />

        <TextInput
          style={styles.inputStyle}
          placeholder="Enter Parcel Width(Cm)"
          onChangeText={(width) => this.setState({width})}
          value={this.state.width}
        />


        <Button
        onPress={() => {
            this.onPressSubmit()
            }
        }
            title="Submit"
            color="#1ABC9C"

        />

        </View>
      );
    }
  }

  const styles = StyleSheet.create({
    inputStyle: {
      color: '#1ABC9C',
      height: 40, 
      borderWidth: 0
    }
  });

I have tried every work around but could not solve it. the checkbox keeps on blinking only upon clicking but could not change the state checked or unchecked and also no value getting submitted to database.

Answer 1

Define variable checked in state

 this.state = {
        checked: false
    };  

create a method

 onChangeCheck() {
    this.setState({ checked: !this.state.checked})
}

And use onChange() prop of Chekbox to update the state and provide value to the check box like this

<CheckBox
  style={styles.checkBox}
  value={this.state.checked}
  onChange={() => this.onChangeCheck()} />