borderColor (top left bottom right) styling ignored on Android

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.5
      CPU: x64 Intel(R) Core(TM) i7-3520M CPU @ 2.90GHz
      Memory: 36.54 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.5.0 - /usr/local/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 6.1.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 23.0.1, 23.0.3, 25.0.1, 25.0.3, 26.0.1, 27.0.3
        API Levels: 23, 25, 26, 27
    IDEs:
      Android Studio: 3.1 AI-173.4720617
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.4.1 => 16.4.1 
      react-native: 0.56.0-rc.4 => 0.56.0-rc.4 
    npmGlobalPackages:
      eslint-plugin-react-native: 1.2.0
      react-native-cli: 0.2.0
      react-native-git-upgrade: 0.2.7

Description

How my app should look, and did on 0.54.4: (I know, I’m using iOS screenshot above. But my app looks identical so I’m using this for demo purposes. Pretend this is android)

How my app looks on android, on 0.56.0-rc.4:

The issue being my defined borderColors (top left bottom right) on each of the text boxes being ignored, and defaulting to black. Related to the number of changes to border styling I see on 0.56’s changelog, I assume.

Reproducible Demo

Relevant snippet from my styles.js. The text boxes being styled by summaryTouchable:

  summaryTouchable: {
    overflow: 'hidden',
    marginBottom: 10,
    borderTopColor: '#e5e6e9',
    borderLeftColor: '#dfe0e4',
    borderRightColor: '#dfe0e4',
    borderBottomColor: '#d0d1d5',
    borderWidth: 1,
    borderRadius: 3,
  },

My workaround on 0.56 for now is add this line only for Android to style summaryTouchable (no issue on iOS):

borderColor: Platform.OS === 'ios' ? null : '#dfe0e4',   // RN 0.56: workaround for Android ignoring 4 colors above

With this, Android on 0.56 would look similar to 0.54.4 screenshot above with light gray borders.

[parkpoom2984]

I solved like this style react native 0.57.1

    borderBottomLeftRadius: 10/2,
    borderBottomRightRadius: 10/2,
    borderTopLeftRadius: 10/2,
    borderTopRightRadius: 10/2,
    borderBottomWidth: 2,
    borderRightWidth: 2,
    borderTopWidth: 2,
    borderLeftWidth: 2,
    borderBottomColor: 'blue',
    borderRightColor: 'bule',
    borderTopColor: 'yellow',
    borderLeftColor: 'yellow'

@NicWickman

[raymochi]

Hey guys, I ran into this issue too and noticed my borderRadius was too high. Make sure your borderRadius is exactly half your height and width for the best results.

Note that you need to use borderBottomWidth, borderTopWidth, borderLeftWidth, borderRightWidth instead of borderWidth

Cheers.