Nativebase: Button.js theme backgroundColor: null crashing on RN 0.59.1 Android NoSuchKey Exception: backgroundColor

[dguillamot]

I have gone through these following points

• [X] Check latest documentation: https://docs.nativebase.io/
• [X] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• [X] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• [X] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• [X] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• [X] 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

RN . 0.59.1 Android.. native-base 2.12.1

Expected behaviour

Using custom theme via ejectTheme.js should work on iOS and Android.

Actual behaviour

Android release crashing with error: NoSuchKeyException backgroundColor when using transparent and/or disabled style for Button.. native-base-theme/components/Button.js has multiple background: null entries.... changing these to background: transparent appears to resolve isssue.

Steps to reproduce

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

only Android, only release

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

[SupriyaKalghatgi]

Need Steps to reproduce

[jmcneese]

@dguillamot if you change any backgroundColor: null to backgroundColor: 'transparent', it fixes the issue

[SupriyaKalghatgi]

Any backgroundColor: null? which file?

[dguillamot]

For us it was line 177 of the native base theme file native-base/components/Button.js

Changing it to backgroundColor: 'transparent' resolves it for us.

[AmeerHamzaRiaz]

When passing transparent property to button, it crashes.

[Jlexyc]

The same issue I have. Trying to get why. iOS works.
It happened after i've updated to RN 0.59.1

[jeveloper]

I think its disabled property that crashes it.

i passed disabled transparent small

[artshevtsov]

I am also facing this issue on Android 7.0 (Samsung Galaxy A3) real device.
App crashes when I open screen with disabled Button, because of "backgroundColor: null," at native-base-theme/components/Button.js:85 (const buttonTheme)

"native-base": "^2.12.0",
"react": "^16.8.3",
"react-native": "^0.59.8"

05-21 17:09:58.659  5983  6115 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
05-21 17:09:58.659  5983  6115 E AndroidRuntime: Process: com.company.appName, PID: 5983
05-21 17:09:58.659  5983  6115 E AndroidRuntime: com.facebook.react.bridge.NoSuchKeyException: backgroundColor
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at com.facebook.react.bridge.ReadableNativeMap.getValue(Unknown Source)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at com.facebook.react.bridge.ReadableNativeMap.getValue(Unknown Source)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at com.facebook.react.bridge.ReadableNativeMap.getInt(Unknown Source)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at com.facebook.react.uimanager.av.a(Unknown Source)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at com.facebook.react.uimanager.l.a(Unknown Source)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at com.facebook.react.uimanager.l.a(Unknown Source)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at com.facebook.react.uimanager.aj.a(Unknown Source)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at com.facebook.react.uimanager.aj.a(Unknown Source)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at com.facebook.react.uimanager.UIManagerModule.createView(Unknown Source)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at java.lang.reflect.Method.invoke(Native Method)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at com.facebook.react.bridge.JavaMethodWrapper.invoke(Unknown Source)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at com.facebook.react.bridge.JavaModuleWrapper.invoke(Unknown Source)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at android.os.Handler.handleCallback(Handler.java:751)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at android.os.Handler.dispatchMessage(Handler.java:95)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(Unknown Source)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at android.os.Looper.loop(Looper.java:154)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(Unknown Source)
05-21 17:09:58.659  5983  6115 E AndroidRuntime:    at java.lang.Thread.run(Thread.java:762)

[jeveloper]

The fix right now is adding style with backgroundColour: 'transparent'
Its very annoying @SupriyaKalghatgi decided to not bother with this simple fix

[venkatmithun]

have the same issue

[tattivitorino]

Guys, changing all instances of backgroundColor:null to backgroundColor:"transparent" in the Buttons.js native-base-theme solved my issue.. in case you ejected the theme

[venkatmithun]

The fix right now is adding style with backgroundColour: 'transparent'
Its very annoying @SupriyaKalghatgi decided to not bother with this simple fix

this is adding a border around button

[Vadimushka]

[eng]
also crashes with such parameters in the Button component
<Button transparent dark>{this.props.children}</Button>
one by one, the props data works fine, everything falls together

[rus]
также же крушится при таких параметрах в компонент Button
<Button transparent dark>{this.props.children}</Button>
по одиночке данные props нормально работает, вместе все падает

[ivnnv]

this definitely needs an urgent fix, <Button transparent /> totally breaks at the moment.

[jeveloper]

@SupriyaKalghatgi whats happening with your organization?

[kpheasey]

Temporary workaround:

<Button transparent style={{backgroundColor: 'transparent'}}>

[Iamhere]

To remove a border around button: style={{backgroundColor: 'transparent', elevation: 0}}

[helielson]

I'm facing the same problem. @SupriyaKalghatgi any updates here?

[sanketsahu]

cc @sankhadeeproy007

[sankhadeeproy007]

Fixed in #2799. Will be available with the next version.

[PlabanJr]

Please try our latest release v.2.12.5.