mardi 20 novembre 2018

expo react native element echeckbox

I have some checkbox based value true/false is from sqlite database. with code below sqlite updated with i expected, i only have problem in state for checked={this.state.KUSENINS1}, checked={this.state.KUSENINS2} i got error, Failed prop type: Invalid prop checked of type string supplied to CheckBox, expected boolean. and checkbock alaways on checked/true even in my database value is false the checkbox keep on checked.Any help or link for the same problem.thxu

import Expo, { SQLite } from 'expo';
import React from 'react';
import { StyleSheet, Text, View, ScrollView, ActivityIndicator, SafeAreaView, AppRegistry } from 'react-native';
import { CheckBox } from 'react-native-elements';
import database from './database';

export default class AreaSpecify extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            numberOfRefresh: 0,
            //checked: null,
            data: null,
            NO: null,
            NOKAMAR: null,
            NP: null,
            LT: null,
            KUSENINS1: false,
            KUSENINS2: false,
            KUSENINS3: false,
            KUSENINS4: false,
            KUSENFIN1: false,
            KUSENFIN2: false,
            KUSENFIN3: false,
            KUSENFIN4: false,
            KUSENFIN5: false,
        };
    }

    componentDidMount(){
        const { navigation } = this.props;
        var NO = navigation.getParam('NO');

        //var datas = projectData;
        database.transaction(
            tx => {
                tx.executeSql('select * from List where NO = ?', [NO], (_, { rows: { _array } }) =>
                    {
                        //var data = rows._array;

                        this.setState({
                            isLoading: false,
                            data: _array,
                            NO: _array[0].NO,
                            NOKAMAR: _array[0].NOKAMAR,
                            NP: _array[0].NP,
                            LT: _array[0].LT,
                            KUSENINS1: _array[0].KUSENINS1,
                            KUSENINS2: _array[0].KUSENINS2,
                            KUSENINS3: _array[0].KUSENINS3,
                            KUSENINS4: _array[0].KUSENINS4,
                            KUSENFIN1: _array[0].KUSENFIN1,
                            KUSENFIN2: _array[0].KUSENFIN2,
                            KUSENFIN3: _array[0].KUSENFIN3,
                            KUSENFIN4: _array[0].KUSENFIN4,
                            KUSENFIN5: _array[0].KUSENFIN5,
                        });
                        console.log(this.state.data);
                        console.log(this.state.KUSENINS2);


                    }
                );
            },
            null
        );

    }



    render() {

        if (this.state.isLoading){

                return (
                    <SafeAreaView style=>
                        <View style=>
                            <ActivityIndicator size="small" color="#f7c744"/> 
                        </View>
                    </SafeAreaView>
                )

            }else{

                console.log(this.state.numberOfRefresh);

                    return (
                    <View style=> 
                        <View style={styles.title}>
                            <Text style={styles.textTittle}>Project:{this.state.NP}</Text>
                            <Text style={styles.textTittle}>Area:{this.state.LT} | No.Kamar/Rumah:{this.state.NOKAMAR}</Text>
                        </View>
                        <ScrollView style=>
                        <View style=>
                            <Text style={styles.textTittle}>Instalasi Kusen</Text>
                        </View>
                        <View style={styles.row}>
                        <Text style={styles.text}>Selesai</Text>
                        <Text style={styles.text}>Control Job</Text>
                        </View>
                        <View style={styles.row}>
                            <CheckBox checked={this.state.KUSENINS1}
                            title='Konsistensi Leveling Kusen'
                            containerStyle=
                            onPress={() => {

                                var NO = this.state.NO;
                                var check = !this.state.KUSENINS1;
                                database.transaction(
                                tx => {
                                    tx.executeSql("update List set KUSENINS1 = '"+ check +"' where NO = '"+ NO +"';");
                                    this.setState({KUSENINS1:!this.state.KUSENINS1})
                                    console.log(NO, !this.state.KUSENINS1);
                                },
                                null
                                );

                            }}/>
                        </View>
                        <View style={styles.row}>
                            <CheckBox checked={this.state.KUSENINS2}
                            title='Lot sudah tegak lurus'
                            containerStyle=
                            onPress={() => {

                                var NO = this.state.NO;
                                var check = !this.state.KUSENINS2;
                                database.transaction(
                                tx => {
                                    tx.executeSql("update List set KUSENINS2 = '"+ check +"' where NO = '"+ NO +"';");
                                    this.setState({KUSENINS2:!this.state.KUSENINS2})
                                    console.log(NO, !this.state.KUSENINS2);
                                },
                                null
                                );

                            }}/>
                        </View>
                        </ScrollView>
                    </View>
                    );
        }

    }
}

And this data fetch from sqlite for a row

Array [
Object {
  "ARCDATE": "",
  "ARCHFIN1": "true",
  "ARCHFIN2": "true",
  "ARCHFIN3": "true",
  "ARCHFIN4": "true",
  "ARCHFIN5": "true",
  "ARCHINS1": "true",
  "ARCHINS2": "true",
  "ARCHITRAVE": "true",
  "DEFPINTULEBAR": 90,
  "DEFPINTUPANJANG": 200,
  "DOORSTOP": "false",
  "DSDATE": "",
  "ENDDATE": "2018-12-18T17:00:00.000Z",
  "GLOBALSTATUS": 0,
  "HANDATE": "",
  "HANDLE": "true",
  "KET": "",
  "KETARCHI": "",
  "KETDOORSTOP": "",
  "KETHANDLE": "",
  "KETKUSEN": "",
  "KETPINTU": "",
  "KUSDATE": "",
  "KUSEN": "true",
  "KUSENFIN1": "false",
  "KUSENFIN2": "true",
  "KUSENFIN3": "true",
  "KUSENFIN4": "true",
  "KUSENFIN5": "true",
  "KUSENGMBR": "",
  "KUSENINS1": "true",
  "KUSENINS2": "false",
  "KUSENINS3": "false",
  "KUSENINS4": "true",
  "LASTUPDATE": "2018-10-31T17:00:00.000Z",
  "LT": "1",
  "NO": 53,
  "NOKAMAR": 107,
  "NP": "Novotel",
  "PINTU": "true",
  "PINTUDATE": "",
  "PINTUFIN1": "true",
  "PINTUFIN2": "true",
  "PINTUFIN3": "true",
  "PINTUFIN4": "true",
  "PINTUFIN5": "true",
  "PINTUGMBR": "",
  "PINTUINS1": "true",
  "PINTUINS2": "true",
  "PINTUINS3": "true",
  "PINTUINS4": "true",
  "PINTUINS5": "true",
  "REV": "",
  "SEALENT": "true",
  "SEALENTRAPIH": "true",
  "STARTDATE": "2018-10-31T17:00:00.000Z",
  "STATUS": 0,
  "SUBKON": "SUBKON A",
  "UKURANPINTUST": 0,
  "UPINTULEBAR": 90,
  "UPINTULEBAR2": 90,
  "UPINTULEBAR3": 90,
  "UPINTUPANJANG": 200,
},
]




Aucun commentaire:

Enregistrer un commentaire