React-Native checkbox styling-CodePudding

I'm using CheckBox from the react-native for react-native project.

I want to change the style to the following image. But there is no specific way to change the mark inside the checkbox.

I'm not an expert UI developer to implement this style. I tried different solutions to fix this styling issue, but I still can not fix it. Please help me to find a solution for this. Thanks in advance.

Expected Checkbox UI :

available UI with my stylings:

Code and Styles as below.

    import { CheckBox } from 'react-native';

    <CheckBox
     value={isItemSelected}
     onValueChange={() => [setItemSelection(!isItemSelected), 
 categorySelectHandler(item.category_name, !isItemSelected)]}
     style={styles.checkbox}
     onFillColor={"#C4C4C4"}
     color={'#FF8300'} />
    
    checkbox: {
     alignSelf: "center",
     borderRadius: 10,
     borderColor: '#C4C4C4',
    },

CodePudding user response：

Use @react-native-community/checkbox for customisation.

import CheckBox from '@react-native-community/checkbox';
          <CheckBox
            // disabled={disabled}
            offAnimationType="stroke"
            // onChange={() => setIsOpen(!isOpen)}
            onFillColor={'blue'}
            onCheckColor={'white'}
            // value={checked}
            boxType="square"
            style={styles.checkbox}
           />

Instead of using react-native-checkbox you can create a custom checkbox component that will work in the same way. You just have to use the checked image and the uncheck image for that and wrap it inside the Pressable. For example :

const [checked,setChecked] = useState(false);
<Pressable onPress={()=>setChecked(!checked)}>
   <Image source={checked?checkedImage:unCheckedImage} />
</Pressable>

where checked and unChecked images are the one you will import.

CodePudding user response：

Try this Library npm i react-native-check-box ,