borderBottomColor does not override borderColor on Android (RN 0.72)

[matthieugicquel]

Description

When using a borderColor and borderBottomColor with different values on the same View:

Expected result: 3 borders have the borderColor color, and 1 has the borderBottomColor color.

Actual result (on Android, with RN 0.72): the 4 borders have the borderColor color.

This seems to be a regression from RN 0.71.8, where the issue is not present.

React Native Version

0.72.3

Output of npx react-native info

System:
  OS: macOS 13.5
  CPU: (10) arm64 Apple M1 Pro
  Memory: 104.83 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.16.1
    path: ~/Library/Caches/fnm_multishells/21852_1689230437449/bin/node
  Yarn:
    version: 3.6.1
    path: /opt/homebrew/bin/yarn
  npm:
    version: 9.5.1
    path: ~/Library/Caches/fnm_multishells/21852_1689230437449/bin/npm
  Watchman:
    version: 2023.07.10.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.11.3
    path: /Users/matthieugicquel/.gem/ruby/3.1.0/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK:
    API Levels:
      - "33"
      - "33"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 33.0.2
    System Images:
      - android-33-ext5 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2022.1 AI-221.6008.13.2211.9619390
  Xcode:
    version: 15.0/15A5160n
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.19
    path: /usr/bin/javac
  Ruby:
    version: 3.1.4
    path: /opt/homebrew/opt/ruby@3.1/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.3
    wanted: 0.72.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Steps to reproduce

Here are screenshots and a minimal example:

const App = () => {
  return <View style={styles.buggy} />;
};

const styles = StyleSheet.create({
  buggy: {
    height: 100,
    width: 100,
    borderWidth: 1,
    backgroundColor: "lightgray",
    borderColor: "transparent",
    borderBottomColor: "blue",
  },
});

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/@matthieugc/border-color-wrongly-combined

⚠️ snack doesn't provide expo SDK 49 so you won't see the bug here for now

[Titozzz]

Issue is due to the android implementation of borderBlockColor, you can use borderBlockBottomColor as a workaround for now... I've already found the bug cause and will try submitting a PR

[abhayagrawal-fareye]

I am using "native-base-shoutem-theme" https://www.npmjs.com/package/native-base-shoutem-theme in my project.
Facing this issue and its a big task to manually fix it at every place in codebase

Do we have any other solution for this? Is it fixed in future RN versions?
@Titozzz @matthieugicquel

[asyncwaiter]

I'm waiting for this to be fixed. The colors of 'boderRight' and 'borderBottom' only works in horizontal, vertical ways, as does 'borderBolockStartColor' and 'boderBlockEndColor' on android. if anyone knows the way out... plz let me know.

[youcefswoo]

what worked for me is define borderBottomColor, borderTopColor, borderRightColor and borderLeftColor . one bye one .
worked for both android and ios

[asyncwaiter]

what worked for me is define borderBottomColor, borderTopColor, borderRightColor and borderLeftColor . one bye one . worked for both android and ios

that didnt work for me🥲

[vwong22]

having the same issue on RN0.72.7. Using 'borderBolockStartColor' and 'borderBlockEndColor' fixed the horizontal border colour but not the vertical.

Updates: For vertical i am using border start color and border end color.

Android issue only.

[santiagoseek]

RN0.72.10 only android repro
hive fix plan ?

[pedrofpaiva]

I had the same issue. What worked for me was set borderBottomWidth a value, borderWidth value of zero and borderColor the color you like.

borderBottomWidth: 1,
borderColor: 'blue',
borderWidth: 0`

[arminsalcin]

If you still have an issue try this:

.someView{
  border-left-color: $gs-500;
  border-top-color: $gs-500;
  border-bottom-color: $gs-500;
  border-right-color: $gs-500;
}
.someViewFocus {
  border-left-color: $gs-500;
  border-top-color: $primary;
  border-bottom-color: $primary;
  border-right-color: $primary;
}

sry for classes i use sass transformer, but it should be same so when setting you need to set everything specifically and when focusing do the same.