CODEWITHSUNDEEP
react-nativecheckboxaxios
Priya
Priya

Reputation: 31

React Native Checkbox not working

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.

Upvotes: 3

Views: 14250

Answers (2)

Ninja Coding
Ninja Coding

Reputation: 1404

Try changing value inside event onValueChange

<CheckBox value={this.aBooleanField} onValueChange={() => {
        this.aBooleanField = !this.aBooleanField;
        this.updateView();
}}/>

The updateView is like this:

updateView() {
    this.setState({ viewChanged: !this.state.viewChanged})
}

Also works for < Switch /> component, and you can use updateView to only to refresh the view, setState it's to keep state values (when you resume app, rotate screen, etc).

Upvotes: -1

Jay Thummar
Jay Thummar

Reputation: 2299

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()} />

Upvotes: 2

Related Questions