Nativebase: Checkbox shows black tick when not selected

[imbudhiraja]

I have gone through these following points

• [] Check latest documentation: https://docs.nativebase.io/
• [] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• [] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• [] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• [] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• [] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

react-native - v0.60.5
native-base - v2.13.5

Expected behaviour

It should show blank no tick box

Actual behaviour

It shows black tick

Steps to reproduce

<CheckBox
   style={{ borderColor: type.checked ? 'blue' : 'black' }}
  checked={false}
  color={'blue'}
  onPress={() => true}
/>               

Is the bug present in both iOS and Android or in any one of them?

Yes

Any other additional info which would help us debug the issue quicker.

[imbudhiraja]

@SupriyaKalghatgi please check

[OrLavy]

I also experience the same problem

[Rionardo]

yep same issue, this occurs after upgrading to 2.13.x

[digitalalien]

Was just going to open an issue for this as well. Happens when there is a theme added via "StyleProvider" if you remove the theme then it works as expected. 2.13.4 and 2.13.5

[digitalalien]

FYI: The issue seems to have been introduced in "CheckBox Cleanup (#2777)"
It used to default the checkBoxBgColor to "transparent" but now sets it to "checkboxDefaultColor" which from what I can tell doesn't exists in the theme variables.
Workaround is to add this to your "variable.js" file:
"checkboxDefaultColor": "transparent"

[imbudhiraja]

@digitalalien i already have "checkboxDefaultColor": "transparent" in my variable.js.

[digitalalien]

@imbudhiraja Are you using that as your StyleProvider theme?

[imbudhiraja]

yes @digitalalien i'm using style provider after ejecting the theme

[digitalalien]

Darn... that fixed it for me. So many variables though, but seems like something would have to be overriding that then. My version of themes dis not already set the "checkboxDefaultColor", but maybe yours does?

[imbudhiraja]

@digitalalien yes it was overridden in variable.js>material.js. thanks. But this needs to be fixed in library itself.

[OrLavy]

As a temp solution, you can add a them variable named 'checkboxDefaultColor'.

Make sure it suits the ' containerBgColor' though.

There should really be a tool or at lest documentation for the changes in the theme variables between versions...

[sirajalam049]

Same solution. I just need to do it in my platform.js file.

[lpaz010]

@digitalalien Thank you for the solution.
I solve this by adding "checkboxDefaultColor": "transparent" to variables>commonColor.js with version "native-base": "^2.13.12".

[nullmicgo]

I am using "native-base": "2.13.8" with "checkboxDefaultColor": "transparent" inside variables>commonColor.js.

Checkbox still shows black tick when not selected.

Need some help

[unitedpalletnetwork]

I found that re-ejecting the theme fixed it for me: https://docs.nativebase.io/Customize.html#theaming-nb-headref .