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.

Answer 1

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

Answer 2

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