check box in react native

share link

by mharisa628 dot icon Updated: Jun 8, 2023

technology logo
technology logo

Guide Kit Guide Kit  

import { StyleSheet, Text, View,TouchableOpacity } from 'react-native'
import React from 'react'
import { COLORS } from '../Theme'
import { ICONS } from '../Assets'

const CheckBox = ({setIsAllFieldFill,setToggleButton,toggleButton,isAllFieldFill}) => {
    const handleCheckBox = ()=>{
        console.log(toggleButton)
        setToggleButton(!toggleButton)
        if(!toggleButton){
            setIsAllFieldFill({
            ...isAllFieldFill,
            acceptConditions : true,
           })
        }
        else{
            setIsAllFieldFill({
            ...isAllFieldFill,
            acceptConditions : false,
           })
        }
      }
  return (
    <>
     
    {
        toggleButton ? <TouchableOpacity onPress={ handleCheckBox}><ICONS.CheckBox width={18} height={18}/></TouchableOpacity> : <TouchableOpacity onPress={ handleCheckBox} style={styles.box}>
    </TouchableOpacity> 
    }
       
    </>
  
  )
}

export default CheckBox

const styles = StyleSheet.create({
    box :{
        width :17,
        height :17,
        borderWidth :1,
        borderColor : COLORS.BLACK,
        borderRadius :2,
    }
})