Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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

Closed
retyui opened this issue Jul 25, 2023 · 2 comments
Labels
Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: Android Android applications. Resolution: Fixed A PR that fixes this issue has been merged.

Comments

@retyui
Copy link
Contributor

retyui commented Jul 25, 2023

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
@github-actions github-actions bot added the Platform: Android Android applications. label Jul 25, 2023
@cortinico cortinico added the Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. label Jul 25, 2023
@shubhamguptadream11
Copy link
Collaborator

@cortinico This issue is resolved now. We can close it.

@retyui
Copy link
Contributor Author

retyui commented Aug 25, 2024

I re-tested in on React Native 0.75.x and issue is gone
closing it

@retyui retyui closed this as completed Aug 25, 2024
@cortinico cortinico added Resolution: Fixed A PR that fixes this issue has been merged. and removed Needs: Triage 🔍 labels Aug 27, 2024
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: Android Android applications. Resolution: Fixed A PR that fixes this issue has been merged.
Projects
None yet
Development

No branches or pull requests

3 participants