[Android] borderBottomColor=null causes crash

[vinayan3]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.1
      CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
      Memory: 68.88 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.4.0 - /usr/local/bin/node
      npm: 6.5.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 25, 26, 27
        Build Tools: 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.3
        System Images: android-27 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild
    npmPackages:
      react: ^16.6.3 => 16.6.3
      react-native: ^0.57.8 => 0.57.8
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

borderBottomColor set to null causes a crash. Here is the stack trace

12-19 19:59:21.365 17350 20247 E unknown:ReactNative: com.facebook.react.bridge.NoSuchKeyException: borderBottomColor
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at com.facebook.react.bridge.ReadableNativeMap.getValue(ReadableNativeMap.java:122)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at com.facebook.react.bridge.ReadableNativeMap.getValue(ReadableNativeMap.java:126)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at com.facebook.react.bridge.ReadableNativeMap.getInt(ReadableNativeMap.java:180)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at com.facebook.react.uimanager.ViewProps.isLayoutOnly(ViewProps.java:245)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at com.facebook.react.uimanager.NativeViewHierarchyOptimizer.isLayoutOnlyAndCollapsable(NativeViewHierarchyOptimizer.java:445)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at com.facebook.react.uimanager.NativeViewHierarchyOptimizer.handleCreateView(NativeViewHierarchyOptimizer.java:92)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at com.facebook.react.uimanager.UIImplementation.handleCreateView(UIImplementation.java:306)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:298)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:408)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at java.lang.reflect.Method.invoke(Native Method)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:160)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at android.os.Handler.handleCallback(Handler.java:790)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at android.os.Handler.dispatchMessage(Handler.java:99)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:29)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at android.os.Looper.loop(Looper.java:164)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:192)
12-19 19:59:21.365 17350 20247 E unknown:ReactNative: 	at java.lang.Thread.run(Thread.java:764)

Reproducible Demo

import React, { Component } from 'react'

import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native'

const styles = StyleSheet.create({
  inputContainer: {
    borderBottomColor: Platform.OS === 'ios' ? 'white' : null,
    borderBottomWidth: Platform.OS === 'ios' ? StyleSheet.hairlineWidth : 0
  }
})

class CrashableComponent extends Component {
  render() {
    return (
      <View style={[styles.childScene, styles.childWithKeyboard]}>
        <View style={styles.contentContainer}>
          <Text style={styles.introText}>How tall are you?</Text>
          <View style={styles.inputContainer}>
            <Text>I will crash</Text>
          </View>)
  }
} 

Workaround

  inputContainer: {
    borderBottomColor: Platform.OS === 'ios' ? 'white' : undefined,
    borderBottomWidth: Platform.OS === 'ios' ? StyleSheet.hairlineWidth : 0
  }

[Exilz]

This is also happening to me since I updated to 0.58.4 from 0.57.2. The weirdest thing is that my app works as long as I have my debugger opened... Setting the value to undefined fixed it for me but I kinda fear setting null to other keys might make my app crash later on.

This is android specific.