How to style React Native 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: https://github.com/crazycodeboy/react-native-check-box — Victor, Oct 09 '17 at 05:12
Possible duplicate of [How to change the color of a CheckBox?](https://stackoverflow.com/questions/5854047/how-to-change-the-color-of-a-checkbox) — JuanR, Nov 02 '17 at 17:20
It's not a duplicate - it's not a CSS question, but a react props question — Rambatino, Jan 25 '20 at 22:07

score 16 · Answer 1 · answered Jul 08 '20 at 10:45

16

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 08 '20 at 10:45

Jaichand Khatik

191
1
10

it's working, I am using in my application. "@react-native-community/checkbox": "^0.4.2" – Jaichand Khatik Sep 17 '20 at 14:14
2

YES! Be careful to use tintColors (with an 's' at the end) and not tintColor like I was... – Filip Savic Dec 25 '20 at 11:02

score 14 · Answer 2 · answered Feb 10 '21 at 22:28

14

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 '21 at 22:28

dooffy

141
1
2

score 3 · Answer 3 · answered Jul 19 '20 at 23:31

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>

score 2 · Answer 4 · answered Jan 29 '20 at 05:18

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.

score 2 · Answer 5 · edited Feb 24 '20 at 08:19

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 '20 at 08:19

Wesely

1,425
14
23

answered Feb 24 '20 at 07:19

Desarrollalab

337
2
5

Check the documentation https://react-native-elements.github.io/react-native-elements/docs/checkbox.html#checkedcolor – Desarrollalab Feb 24 '20 at 07:20
this really does not works, there is an "Unexpected token" error at the row, where I declared checkedColor or uncheckedColor. – fauzt Aug 05 '20 at 20:00

Atul Gupta · Answer 6 · 2022-03-25T09:56:22.033

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 '22 at 09:56

answered Mar 14 '22 at 07:10

Atul Gupta

1
2

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](https://stackoverflow.com/help/how-to-answer). – Sfili_81 Mar 17 '22 at 15:37

Sameer Shoukat · Answer 7 · 2022-06-27T12:18:44.123

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>
);

};

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](/help/how-to-answer). — Nick Song, Mar 29 '22 at 09:16

score -3 · Answer 8 · answered Jun 10 '21 at 06:31

-3

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

answered Jun 10 '21 at 06:31

khubaib-sarfraz

1

How to style React Native component?

8 Answers8