Nativebase: Checkbox can't be clicked

Created on 8 Feb 2018 · 2Comments · Source: GeekyAnts/NativeBase

Hello, i had problem with checkbox, my list can't be clicked. what the major problem in my code ?

render() {
        return (
            <Container>
                <Content>
                    <Form>
                        <Text>Jumlah Saldo</Text>
                        <ListItem>
                            <CheckBox />
                            <Body>
                                <Text>IDR. 10000</Text>
                            </Body>
                        </ListItem>
                        <ListItem>
                            <CheckBox />
                            <Body>
                                <Text>IDR. 50000</Text>
                            </Body>
                        </ListItem>
                        <ListItem>
                            <CheckBox />
                            <Body>
                                <Text>IDR. 100000</Text>
                            </Body>
                        </ListItem>
                        <ListItem>
                            <CheckBox />
                            <Body>
                                <Text>IDR. 500000</Text>
                            </Body>
                        </ListItem>
                        <ListItem>
                            <CheckBox />
                            <Body>
                                <Input placeholder="Jumlah Lain"
                                    onChangeText={(text) => this.setState({ saldo: text })}
                                    value={this.state.saldo} />
                            </Body>
                        </ListItem>
                    </Form>
                </Content>
            </Container>
        );
    }

Using this package.json

"native-base": "^2.3.7",
"prop-types": "^15.6.0",
"react": "16.2.0",
"react-native": "0.52.0",

Source

fluvios

Most helpful comment

@fluvios tried your code. Modified a bit.

Code

import React, { Component } from 'react';
import { Container, Header, Content, ListItem, CheckBox, Text, Body, Form, Input } from 'native-base';
export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = { saldo: '', itemOne: false, itemTwo: false, itemThree: false, itemFour: false, itemFive: false }
  }

  render() {
    return (
      <Container>
        <Content padder>
          <Form>
            <Text>Jumlah Saldo</Text>
            <ListItem onPress={() => this.setState({ itemOne: !this.state.itemOne })}>
              <CheckBox checked={this.state.itemOne} onPress={() => this.setState({ itemOne: !this.state.itemOne })} />
              <Body>
                <Text>IDR. 10000</Text>
              </Body>
            </ListItem>
            <ListItem onPress={() => this.setState({ itemTwo: !this.state.itemTwo })} >
              <CheckBox checked={this.state.itemTwo} onPress={() => this.setState({ itemTwo: !this.state.itemTwo })} />
              <Body>
                <Text>IDR. 50000</Text>
              </Body>
            </ListItem>
            <ListItem onPress={() => this.setState({ itemThree: !this.state.itemThree })}>
              <CheckBox checked={this.state.itemThree} onPress={() => this.setState({ itemThree: !this.state.itemThree })} />
              <Body>
                <Text>IDR. 100000</Text>
              </Body>
            </ListItem>
            <ListItem onPress={() => this.setState({ itemFour: !this.state.itemFour })}>
              <CheckBox checked={this.state.itemFour} onPress={() => this.setState({ itemFour: !this.state.itemFour })} />
              <Body>
                <Text>IDR. 500000</Text>
              </Body>
            </ListItem>
            <ListItem onPress={() => this.setState({ itemFive: !this.state.itemFive })}>
              <CheckBox checked={this.state.itemFive} onPress={() => this.setState({ itemFive: !this.state.itemFive })} />
              <Body>
                <Input placeholder="Jumlah Lain"
                  onChangeText={(text) => this.setState({ saldo: text })}
                  value={this.state.saldo} />
              </Body>
            </ListItem>
          </Form>
        </Content>
      </Container>
    );
  }
}

Gif

checkbox

akhil-geekyants on 8 Feb 2018

👍2

All 2 comments

193

Also check NativeBase KitchenSink
https://github.com/GeekyAnts/NativeBase-KitchenSink

SupriyaKalghatgi on 8 Feb 2018

👎1

@fluvios tried your code. Modified a bit.

Code

import React, { Component } from 'react';
import { Container, Header, Content, ListItem, CheckBox, Text, Body, Form, Input } from 'native-base';
export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = { saldo: '', itemOne: false, itemTwo: false, itemThree: false, itemFour: false, itemFive: false }
  }

  render() {
    return (
      <Container>
        <Content padder>
          <Form>
            <Text>Jumlah Saldo</Text>
            <ListItem onPress={() => this.setState({ itemOne: !this.state.itemOne })}>
              <CheckBox checked={this.state.itemOne} onPress={() => this.setState({ itemOne: !this.state.itemOne })} />
              <Body>
                <Text>IDR. 10000</Text>
              </Body>
            </ListItem>
            <ListItem onPress={() => this.setState({ itemTwo: !this.state.itemTwo })} >
              <CheckBox checked={this.state.itemTwo} onPress={() => this.setState({ itemTwo: !this.state.itemTwo })} />
              <Body>
                <Text>IDR. 50000</Text>
              </Body>
            </ListItem>
            <ListItem onPress={() => this.setState({ itemThree: !this.state.itemThree })}>
              <CheckBox checked={this.state.itemThree} onPress={() => this.setState({ itemThree: !this.state.itemThree })} />
              <Body>
                <Text>IDR. 100000</Text>
              </Body>
            </ListItem>
            <ListItem onPress={() => this.setState({ itemFour: !this.state.itemFour })}>
              <CheckBox checked={this.state.itemFour} onPress={() => this.setState({ itemFour: !this.state.itemFour })} />
              <Body>
                <Text>IDR. 500000</Text>
              </Body>
            </ListItem>
            <ListItem onPress={() => this.setState({ itemFive: !this.state.itemFive })}>
              <CheckBox checked={this.state.itemFive} onPress={() => this.setState({ itemFive: !this.state.itemFive })} />
              <Body>
                <Input placeholder="Jumlah Lain"
                  onChangeText={(text) => this.setState({ saldo: text })}
                  value={this.state.saldo} />
              </Body>
            </ListItem>
          </Form>
        </Content>
      </Container>
    );
  }
}

Gif

checkbox

akhil-geekyants on 8 Feb 2018

👍2

Was this page helpful?

0 / 5 - 0 ratings