Question 312033 in React native Question posted in
The official React Native documentation can be found here.

How to use CheckBoxes in React Native

I am creating a todo list app with react native, and now I am stuck with one thing, I need to use CheckBoxes.

I tried some libraries like:
react-native-community/checkbox,
react-native-check-box,
react-native-elements

Only react-native-community/checkbox worked, but there was one problem that the checkbox was animated on IOS and the animation was so slow.

Which library fits this best? Or if there is other way to do it, please let me know.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Hello thanks to everyone who answered to this post. If there is someone who wants to answer no need 'cuz I solved this :D


  2. 0

    You can use expo checkbox if you dont need to customize it too much:

    import Checkbox from 'expo-checkbox';
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const [isChecked, setChecked] = useState(false);

  return (
    <View style={styles.container}>
      <View style={styles.section}>
        <Checkbox style={styles.checkbox} value={isChecked} onValueChange={setChecked} />
        <Text style={styles.paragraph}>Normal checkbox</Text>
      </View>
      <View style={styles.section}>
        <Checkbox
          style={styles.checkbox}
          value={isChecked}
          onValueChange={setChecked}
          color={isChecked ? '#4630EB' : undefined}
        />
        <Text style={styles.paragraph}>Custom colored checkbox</Text>
      </View>
      <View style={styles.section}>
        <Checkbox style={styles.checkbox} disabled value={isChecked} onValueChange={setChecked} />
        <Text style={styles.paragraph}>Disabled checkbox</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginHorizontal: 16,
    marginVertical: 32,
  },
  section: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  paragraph: {
    fontSize: 15,
  },
  checkbox: {
    margin: 8,
  },
});

    If you want one that is has more customization like dark mode and Icons you can just create one from scratch like this:

    import React, { Component, useState, useEffect } from 'react';
import { StyleSheet, Text, Platform, View, Image, TouchableWithoutFeedback, Pressable } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons'; 

import * as Icons  from '../assets';
import { pastelBlue } from '../helpers/colors';
import Scheme from '../helpers/colors';

export default function CheckBox(props) {

    const [checked, setChecked] = useState(false);
    const currentTextColor = Scheme.getCurrentText();

    useEffect(()=>{
      setChecked(props.checked);
    })

    const handleCheckboxChange = event => {
      setChecked(!checked);
      props.handler(!checked);
    }

    const createIcons = ( ) => {
      let parent = [];
      if (!!props.icon) {
        parent.push(
          <Image
            source={Icons[`${props.icon}`]}
            style={[styles.icon, {
              tintColor: checked ? Scheme.getCurrentText():"gray",
            }]}
          />
        )
      } 
      return parent;
    }

    if (Platform.OS == "web") {
      return (
        <View style={[
          styles.webCheckBoxWrapper,
          {
            borderWidth: !props.isValid?1:0,
            borderColor: "red",
          }
        ]}>
          <MyCheckbox 
            checked={checked}
            value={checked}
            color={pastelBlue}
            onChange={handleCheckboxChange}/>
          
          <TouchableWithoutFeedback
            onPress={()=>{
              handleCheckboxChange()
            }}
          >
            <View style={styles.flexBox}>
              <Text 
                style={{
                  fontSize: 14,
                  marginLeft: 20,
                  color:checked ? currentTextColor:"gray",
                  fontWeight:checked ? "bold" :"normal",
                }}
                allowFontScaling={false}
                numberOfLines={1}
              >
              {props.label}
            </Text>
            {createIcons()}
            </View>
          </TouchableWithoutFeedback>
        </View>    
      ) 
    } else {
      return (
        <View style={[
          styles.checkBoxWrapper, 
          {
            borderWidth: !props.isValid?1:0,
            borderColor: "red",
          }
        ]}>
          <MyCheckbox 
            checked={checked}
            value={checked}
            color={pastelBlue}
            onChange={handleCheckboxChange}/>
          <TouchableWithoutFeedback
            onPress={()=>{
              handleCheckboxChange()
            }}
          >
            <View style={styles.flexBox}>
              <Text 
                style={{
                  fontSize: 14,
                  marginLeft: 20,
                  color:checked ? currentTextColor:"gray",
                  fontWeight:checked ? "bold" :"normal",
                }}
                allowFontScaling={false}
                numberOfLines={1}
              >
                {props.label}
              </Text>
              {createIcons()}
            </View>
          </TouchableWithoutFeedback>  
        </View>    
      ) 
    }
  }

  function MyCheckbox({
    checked,
    onChange,
    buttonStyle = {},
    activeButtonStyle = {},
    inactiveButtonStyle = {},
    activeIconProps = {},
    inactiveIconProps = {},
  }) {

    const iconProps = checked ? activeIconProps : inactiveIconProps;
    const textColor = Scheme.getCurrentText();

    if (textColor == "black") {
      return (
        <Pressable
          style={[
            buttonStyle,
            checked
              ? activeButtonStyle
              : inactiveButtonStyle,
          ]}
          onPress={() => onChange(!checked)}>
          { checked ?
            <View>
              <View style={{backgroundColor: textColor, position: "absolute", width: 15, height: 15, margin: 4}}/>
              <MaterialIcons {...iconProps} name="check-box" size={24} color={pastelBlue} />
            </View>:
            <MaterialIcons {...iconProps} name="check-box-outline-blank" size={24} color={"grey"} />
          }
        </Pressable>
      );
    } else {
      return (
        <Pressable
          style={[
            buttonStyle,
            checked
              ? activeButtonStyle
              : inactiveButtonStyle,
          ]}
          onPress={() => onChange(!checked)}>
          { checked ?
            <MaterialIcons {...iconProps} name="check-box" size={24} color={pastelBlue} />:
            <MaterialIcons {...iconProps} name="check-box-outline-blank" size={24} color={pastelBlue} />
          }
        </Pressable>
      );
    }
  }


const styles = StyleSheet.create({
  checkBoxWrapper: {
      flexDirection:"row",
      alignItems: "center",
      justifyContent: "center",
      height: 40,
      flex: 1,
      minWidth: 200,
  },
  webCheckBoxWrapper: {
    flexDirection:"row",
    alignItems: "center",
    justifyContent: "center",
    height: 35,
    flex: 1,
    minWidth: 200,
    margin: 3,
  },
  flexBox: {
    flexDirection:"row",
    alignItems: "center",
    justifyContent: "center",
  },
  checkBoxText: {
    fontSize: 10,
    marginLeft: 10,
  },
  icon: {
    marginLeft: 10,
    width: 30,
    height: 30,
    elevation: 0, 
    shadowOffset: { height: 0, width: 0 }, 
    shadowOpacity: 0, 
    shadowRadius: 0
  }
});

    Here is a guide to creating your own checkbox component

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search