CODEWITHSUNDEEP
cssreactjscheckboxreact-native
agm1984
agm1984

Reputation: 17132

How to style React Native <CheckBox> component?

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.

Upvotes: 24

Views: 62986

Answers (8)

Sameer Shoukat
Sameer Shoukat

Reputation: 17

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

};

Upvotes: -1

Atul Gupta
Atul Gupta

Reputation: 1

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

Upvotes: 0

khubaib-sarfraz
khubaib-sarfraz

Reputation: 1

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

Upvotes: -3

dooffy
dooffy

Reputation: 161

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

Upvotes: 16

Squirrl
Squirrl

Reputation: 4966

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>

Upvotes: 3

Jaichand Khatik
Jaichand Khatik

Reputation: 331

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

Upvotes: 18

Desarrollalab
Desarrollalab

Reputation: 397

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!

Upvotes: 2

VulfCompressor
VulfCompressor

Reputation: 1410

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.

Upvotes: 3

Related Questions