Native check box styling reduce height/size

I added a check box in native app page. I want to reduce its size/height. Default style is making it look a lot bigger. What style property can be used to do this? I have added this custom class and tried setting height on container and fontSize, lineHeight on the input element. Both didn’t work.   export const enabledBtn = { container: { // All ViewStyle properties are allowed width: 27, height: 14 }, input: { // thumbColorOn, thumbColorOff, trackColorOn, trackColorOff and all TextStyle properties are allowed thumbColorOn: backgroundDefaults.primaryLight, trackColorOn: "rgba(13, 129, 180, 1.0)", thumbColorOff: "rgba(167, 167, 167, 1.0)", trackColorOff: "white", fontSize: 14, lineHeight: 14 } } Default look: Desired look:
1 answers

Try adding !important at the end of the style line like so:

    container: {
        // All ViewStyle properties are allowed
        width: 27!important,
        height: 14!important

This should force an override of any default class settings that on a higher level than your custom class.


You can also try setting the style attribute in the widget configuration.