Is there a react-native checkbox example?

Question

Are there any simple examples of implementing a react-native CheckBox? Facebook does not provided any examples. The CheckBox component that I am referring to can be found in the documentation here: http://facebook.github.io/react-native/docs/checkbox.html

The checkbox provided by react native is just a checkbox UI. If you want one just as we use in web, check out this library github.com/Rinkuk1993/rn-checkbox-list — rkkkk
– rkkkk, Commented Jan 16, 2020 at 11:42

Kurt Harrison · Accepted Answer · 2019-07-27 07:29:31Z

27

Currently, the CheckBox component is only supported on Android as it is stated here. You should use the Switch component for iOS.

For Android, usage is pretty straight forward:

<View style={{ flexDirection: 'column'}}>
  <CheckBox />
  <View style={{ flexDirection: 'row' }}>
    <CheckBox
      value={this.state.checked}
      onValueChange={() => this.setState({ checked: !this.state.checked })}
    />
    <Text style={{marginTop: 5}}> this is checkbox</Text>
  </View>
</View>

View and Text components are optional, just to show how CheckBox can be used along with those. Code above will produce this screen on Android device:

This is how the above code appears on an iOS device:

edited Jul 27, 2019 at 7:29

Kurt Harrison

256 bronze badges

answered Nov 18, 2017 at 4:29

magneticz

2,4601 gold badge21 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Greg Over a year ago

oh - ok - didn't seem to mention it on the doc page

magneticz Over a year ago

yeah, react-native docs are usually under-documented. Best approach is to go to github issues and search there

sekrett Over a year ago

Switch looks very different from a CheckBox.

Allef Douglas · Accepted Answer · 2019-04-11 16:03:08Z

You can create your own.

You will need to install react-native-vector-icons (or you can use images).

yarn add react-native-vector-icons
react-native link react-native-vector-icons

Creating file components/CheckBox/index.js

import React from 'react'
import Icon from 'react-native-vector-icons/MaterialIcons'

import styles from './styles'

import { TouchableOpacity, Text } from 'react-native'

const CheckBox = ({ selected, onPress, style, textStyle, size = 30, color = '#211f30', text = '', ...props}) => (
    <TouchableOpacity style={[styles.checkBox, style]} onPress={onPress} {...props}>
        <Icon
            size={size}
            color={color}
            name={ selected ? 'check-box' : 'check-box-outline-blank'}
        />

        <Text style={textStyle}> {text} </Text>
    </TouchableOpacity>
)

export default CheckBox

Creating file components/CheckBox/styles.js

import { StyleSheet } from 'react-native'

const styles = StyleSheet.create({
    checkBox: {
        flexDirection: 'row',
        alignItems: 'center'
    }
})

export default styles

How to usage

import React, { Component } from 'react'

import styles from './styles'

import { CheckBox } from '../../components'

import { View } from 'react-native'

class Signup extends Component {

    state = {
        termsAccepted: false
    }

    handleCheckBox = () => this.setState({ termsAccepted: !this.state.termsAccepted })

    render() {
        return (
            <View style={{}}>
                <CheckBox 
                    selected={this.state.termsAccepted} 
                    onPress={this.handleCheckBox}
                    text='Accept terms and conditions'
                />               
            </View>
        )
    }
}

export default Signup

Bahu · Accepted Answer · 2018-10-22 11:17:51Z

9

For starters who are not understood the above answers

import React, { Component } from 'react';
import { Platform, View, Text, CheckBox } from 'react-native';


var tempCheckValues = [];
export default class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      checkBoxChecked: []
    }
  }

  checkBoxChanged(id, value) {

    this.setState({
      checkBoxChecked: tempCheckValues
    })

    var tempCheckBoxChecked = this.state.checkBoxChecked;
    tempCheckBoxChecked[id] = !value;

    this.setState({
      checkBoxChecked: tempCheckBoxChecked
    })

  }

  render() {

    const products = [{
      id: 1
    },
    {
      id: 2
    },
    {
      id: 3
    }];

    return (

      products.map((val) => {

        { tempCheckValues[val.id] = false }

        return (

          <View key={val.id} style={{ flexDirection: 'column' }}>

            <CheckBox

              value={this.state.checkBoxChecked[val.id]}

              onValueChange={() => this.checkBoxChanged(val.id, this.state.checkBoxChecked[val.id])}

            />

          </View >

        )

      }

      )

    );
  }
}

edited Oct 22, 2018 at 11:17

answered Sep 24, 2018 at 15:55

Bahu

1,5843 gold badges30 silver badges51 bronze badges

1 Comment

user938363 Over a year ago

Nice explanation! What is the key={val.id} in View? I did not find key as a props for View component in react native 0.59.

Abdennour TOUMI · Accepted Answer · 2018-10-26 02:52:24Z

5

Using react-native-elements, the mission is easier and examples are available :

 import { CheckBox } from 'react-native-elements'

<CheckBox
  title='Click Here'
  checked={this.state.checked}
/>

<CheckBox
  center
  title='Click Here'
  checked={this.state.checked}
/>

<CheckBox
  center
  title='Click Here'
  checkedIcon='dot-circle-o'
  uncheckedIcon='circle-o'
  checked={this.state.checked}
/>

<CheckBox
  center
  title='Click Here to Remove This Item'
  iconRight
  iconType='material'
  checkedIcon='clear'
  uncheckedIcon='add'
  checkedColor='red'
  checked={this.state.checked}
/>

edited Oct 26, 2018 at 2:52

answered Nov 18, 2017 at 3:24

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

5 Comments

Greg Over a year ago

understood - I'm just trying to get the "native" react-native "CheckBox" component working here....

Waqar Over a year ago

@Greg did you manage to do anything about it ? Im struggling with checkbox in react-native 0.49 aswell.. it seems to work ONCE only and then the state does not change back.

Greg Over a year ago

Seems there isn't one in react native itself

user938363 Over a year ago

Where is the value for each checkbox? There is only title of checkbox.

Cris69 Over a year ago

Do I need an entire components library for a checkbox?

George Fean · Accepted Answer · 2020-12-30 20:37:50Z

2

Checkbox has been removed from react-native, you can install and import it from @react-native-community/checkbox. https://github.com/react-native-checkbox/react-native-checkbox

answered Dec 30, 2020 at 20:37

George Fean

99111 silver badges16 bronze badges

Comments

rkkkk · Accepted Answer · 2020-01-16 11:41:37Z

1

You can also try this git repo that provides the checkbox and checkbox list. Try this - https://github.com/Rinkuk1993/rn-checkbox-list

answered Jan 16, 2020 at 11:41

rkkkk

1331 gold badge1 silver badge9 bronze badges

Comments

Nasreen Ustad · Accepted Answer · 2020-09-02 16:41:35Z

import { MaterialIcons } from "@expo/vector-icons";

const [genderIndex, setGenderIndex] = useState(0);   
const genderList = ["Male", "Female", "Other"];

const genderChangeHandler = 
(index) => {
  // console.log("index \t", index);
  setGenderIndex((preIndex) => index);
}


 <View style={{ flexDirection: "row" }}>
                    {genderList.map((data, index) => (
                      <TouchableOpacity
                        key={data}
                        style={{
                          flexDirection: "row",
                          margin: 10,
                          flex: 3,
                          justifyContent: "space-evenly",
                        }}
                        onPress={genderChangeHandler.bind(this, index)}
                      >
                        <MaterialIcons
                          name={
                            index === genderIndex
                              ? "radio-button-checked"
                              : "radio-button-unchecked"
                          }
                          size={18}
                          color='#ccc'
                        />
                        <Text style={styles.termsText}>{data}</Text>
                      </TouchableOpacity>
                    ))}
</View>

challet · Accepted Answer · 2019-11-30 21:56:48Z

-3

You can make customize button using state facility in react native instead of using checkbox or picker.

https://jsfiddle.net/kyazbs3j/2/

<TouchableOpacity onPress={() =>this.setState({stateExample:'Good'})}>
   <View style={this.state.stateExample=='Good styles.chooseItem:styles.chooseItem1'}>
       <Text style={styles.choosetxt}>Good</Text>
   </View>
</TouchableOpacity>

edited Nov 30, 2019 at 21:56

challet

99010 silver badges22 bronze badges

answered Nov 30, 2019 at 18:18

JYOTISH SINGH

1

Collectives™ on Stack Overflow

Is there a react-native checkbox example?

8 Answers 8

3 Comments

1 Comment

1 Comment

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

1 Comment

1 Comment

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related