Skip to content

borderTopColor, borderRightColor, borderLeftColor, borderBottomColor don't work with PlatformColor on Android #38614

@retyui

Description

@retyui

Description

If you try to apply the next styles on Android app will crash with the next error:

"Error while updating property 'border TopColor' of a view managed by: RCTView"

Platform.select({
      ios: {
        borderTopColor: PlatformColor("systemTealColor"),
        borderRightColor: PlatformColor('systemTealColor'),
        borderLeftColor: PlatformColor('systemTealColor'),
        borderBottomColor: PlatformColor('systemTealColor'),
      },
      android: {
        borderTopColor: PlatformColor('@android:color/holo_blue_bright'),
        borderRightColor: PlatformColor('@android:color/holo_blue_bright'),
        borderLeftColor: PlatformColor('@android:color/holo_blue_bright'),
        borderBottomColor: PlatformColor('@android:color/holo_blue_bright'),
      }
})

React Native Version

0.72.3

Output of npx react-native info

System:
  OS: macOS 13.4.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 413.83 MB / 32.00 GB
  Shell:
    version: 3.6.1
    path: /opt/homebrew/bin/fish
Binaries:
  Node:
    version: 20.4.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 9.7.2
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2023.07.10.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.1
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.4
      - iOS 16.4
      - macOS 13.3
      - tvOS 16.4
      - watchOS 9.4
  Android SDK:
    API Levels:
      - "33"
    Build Tools:
      - 30.0.3
      - 34.0.0
    System Images:
      - android-33 | Google APIs ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: Flamingo 2022.2.1 Patch 2 Flamingo 2022.2.1 Patch 2
  Xcode:
    version: 14.3.1/14E300c
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.19
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/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

Create a new project and put the next code to App.tsx

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.androidIssue} />
      <View style={styles.test1} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'white',
    padding: 8,
  },
  test1: {
    ...Platform.select({
      ios: {
        backgroundColor: PlatformColor('systemTealColor'),
      },
      android: {
        backgroundColor: PlatformColor('@android:color/holo_blue_bright'),
      },
    }),
    width: 100,
    height: 100,
    marginTop: 20,
  },
  androidIssue: {
    backgroundColor: 'gold',
    width: 100,
    height: 100,
    borderWidth: 20,
    ...Platform.select({
      ios: {
        borderTopColor: PlatformColor('systemTealColor'),
        borderRightColor: PlatformColor('systemTealColor'),
        borderLeftColor: PlatformColor('systemTealColor'),
        borderBottomColor: PlatformColor('systemTealColor'),
      },
      android: {
        borderTopColor: PlatformColor('@android:color/holo_blue_bright'),
        borderRightColor: PlatformColor('@android:color/holo_blue_bright'),
        borderLeftColor: PlatformColor('@android:color/holo_blue_bright'),
        borderBottomColor: PlatformColor('@android:color/holo_blue_bright'),
      },
    }),
  },
});

Snack, screenshot, or link to a repository

https://snack.expo.dev/@retyui/rn-issue-bordertopcolor-and-platformcolor

Screenshot 2023-07-25 at 13 56 41 Screenshot 2023-07-25 at 14 00 39

Metadata

Metadata

Assignees

No one assigned

    Labels

    Issue: Author Provided ReproThis issue can be reproduced in Snack or an attached project.Platform: AndroidAndroid applications.Resolution: FixedA PR that fixes this issue has been merged.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions