How to style React Native <CheckBox> component?

Question

Is it possible to style the React Native CheckBox component?

There is no style property listed here: https://facebook.github.io/react-native/docs/checkbox.html

I put an invalid style property on it, and the RN warning message that popped up told me all the valid CSS properties, but none of them did anything beneficial towards styling.

The component looks decent, but I want to change it from that teal color to a brand color.

Is it possible?

These properties are not working but are listed as valid style props for CheckBox:

{
  height: 50,             // changes the hitspace but not the checkbox itself
  width: 50,
  borderWidth: 1,         // does nothing
  backgroundColor: 'red', // makes the area around and inside the checkbox red
  borderColor: 'green',   // does nothing
  borderStyle: 'dotted'   // does nothing
}

I don't understand why it even exists if everyone just makes their own checkbox. If I did that, I wouldn't really have any use for because all it gives is

value={this.state.rememberMe}
onValueChange={() => this.toggleRememberMe()}

unless there is something magic it does under the hood. It has a decent onChange animation, but that would be deprecated instantly when I make my own and use something like <TouchableHighlight or Opacity> wrapped around an on/off image or <View>.

I can't find any info on Google except hundreds of custom checkboxes. It's actually really hard to search around them.

Styling options are limited in default checkbox. you need to try build a custom components or use libs like this: github.com/crazycodeboy/react-native-check-box — Victor
– Victor, Commented Oct 9, 2017 at 5:12
Possible duplicate of How to change the color of a CheckBox? — JuanR
– JuanR, Commented Nov 2, 2017 at 17:20
It's not a duplicate - it's not a CSS question, but a react props question — Rambatino
– Rambatino, Commented Jan 25, 2020 at 22:07

Jaichand Khatik · Accepted Answer · 2020-07-08 10:45:45Z

18

You can use https://github.com/react-native-community/react-native-checkbox

Android: you can use tintColors.

 import CheckBox from '@react-native-community/checkbox';
 .
 .
 .
 <CheckBox
      value={option.item.selected}  
      onValueChange={() => {}}
      tintColors={{ true: '#F15927', false: 'black' }}
 />

answered Jul 8, 2020 at 10:45

Jaichand Khatik

3312 silver badges12 bronze badges

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

2 Comments

Jaichand Khatik Over a year ago

it's working, I am using in my application. "@react-native-community/checkbox": "^0.4.2"

Filip Savic Over a year ago

YES! Be careful to use tintColors (with an 's' at the end) and not tintColor like I was...

dooffy · Accepted Answer · 2021-02-10 22:28:19Z

16

Transform can be used to change CheckBox size.

<CheckBox
  style={{ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }}
/>

checkbox examples

https://github.com/react-native-checkbox/react-native-checkbox

answered Feb 10, 2021 at 22:28

dooffy

1611 silver badge2 bronze badges

Comments

VulfCompressor · Accepted Answer · 2020-01-29 05:18:29Z

3

Short answer is you simply can't. React Native uses the native Android Checkbox component, and the only customization you get to do is changing the tint colors, as seen in the react-native-checkbox community project. This prop is undocumented in the official React Native docs.

Additionally, here's the TypeScript definition for this component: AndroidCheckBoxNativeComponent.js. Notice how the only props relayed to the native component are onChange, onValueChange, testID, on, enabled and tintColors.

answered Jan 29, 2020 at 5:18

VulfCompressor

1,3941 gold badge12 silver badges26 bronze badges

Comments

Squirrl · Accepted Answer · 2020-07-19 23:31:01Z

3

No I couldn't find a way, but wrapping it in a View was one option:

   <View style={{
      position: 'absolute',
      right: 0,
      width: 50,
      height: 50,
      margin: 10,
      zIndex: 100,
    }}>
      <Checkbox
        status={i === index ? 'checked' : 'unchecked'}
        className=""

      />
    </View>

answered Jul 19, 2020 at 23:31

Squirrl

4,9649 gold badges51 silver badges88 bronze badges

Comments

Wesely · Accepted Answer · 2020-02-24 08:19:37Z

2

Yes, you can, i recommend you that use react native elements, and with this library you have 2 options, checkedColor and uncheckedColor, by default in checkedColor is green, but you can change it to what you want, for example, checkedColor={"#fff"} or checkedColor="#fff" try them, it apply for 2 options, good luck!

edited Feb 24, 2020 at 8:19

Wesely

1,48514 silver badges23 bronze badges

answered Feb 24, 2020 at 7:19

Desarrollalab

3973 silver badges5 bronze badges

2 Comments

Desarrollalab Over a year ago

Check the documentation react-native-elements.github.io/react-native-elements/docs/…

fauzt Over a year ago

this really does not works, there is an "Unexpected token" error at the row, where I declared checkedColor or uncheckedColor.

Atul Gupta · Accepted Answer · 2022-03-25 09:56:22Z

0

For IOS use onTintColor and pass the value in string onTintColor={'red'}

     <CheckBox
      onTintColor={Color.theme}
      onCheckColor={Color.theme}
      value={isSelected}
      onValueChange={setSelection}
      style={Style OBJECT}
    />

edited Mar 25, 2022 at 9:56

answered Mar 14, 2022 at 7:10

Atul Gupta

12 bronze badges

1 Comment

law_81 Over a year ago

Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See How to Answer.

Sameer Shoukat · Accepted Answer · 2022-06-27 12:18:44Z

-1

import CheckBox from '@react-native-community/checkbox';    
const Checkbox = (props) => {
// const [isSelected, setSelection] = useState(false);
const [toggleCheckBox, setToggleCheckBox] = useState(false)
return (
    <View style={[useTailwind``, styles.container]}>
        <View style={styles.checkboxContainer}>
            <CheckBox
                disabled={false}
                value={toggleCheckBox}
                tintColors={{true: '#368098'}}
                onCheckColor={'#6F763F'}
                onValueChange={(newValue) => setToggleCheckBox(newValue)}
            />
            <Text style={[useTailwind`font-normal text-base font-sans`, styles.label]}>{props.value}</Text>
        </View>
        {/* <Text>Is CheckBox selected: {isSelected ? "👍" : "👎"}</Text> */}
    </View>
);

};

edited Jun 27, 2022 at 12:18

answered Mar 29, 2022 at 8:54

Sameer Shoukat

174 bronze badges

1 Comment

Christopher Ransom Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

khubaib-sarfraz · Accepted Answer · 2021-06-10 06:31:41Z

-3

its possible now.. just simply gives tint color of the same color of background

answered Jun 10, 2021 at 6:31

khubaib-sarfraz

1

Collectives™ on Stack Overflow

How to style React Native <CheckBox> component?

8 Answers 8

2 Comments

Comments

Comments

Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related