React-Native checkbox styling - React native

PasinduWeerakoon
September 30, 2022
272 views
0 votes
2 Answers

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',
    },

Answers

- abdemirza
- September 30, 2022 at 10:00 am
- 0 votes
0
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.
Login or Signup to reply.