question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

borderColor, overlayColor don't work with platformColor on android.

See original GitHub issue

Description

when trying to using PlatformColor api with borderColor or overlayColor, they don’t work

Error while updating property borderColor of a view managed by: RCTView
com.facebook.react.bridge.ReadableNativeMap cannot be case to java.lang.integer
Warning: Failed prop type: Invalid prop `overlayColor` of type `object` supplied to `Image`, expected `string`.
Bad object: {
  "width": 100,
  "height": 100,
  "overlayColor": {
    "resource_paths": [
      "?attr/colorPrimary"
    ]
  }
}

Version

67.1

Output of npx react-native info

System: OS: macOS 11.6.1 CPU: (8) x64 Intel® Core™ i7-4770 CPU @ 3.40GHz Memory: 2.21 GB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.13.1 - /usr/local/bin/node Yarn: 1.22.15 - ~/.yarn/bin/yarn npm: 8.1.2 - ~/n/bin/npm Watchman: 2022.01.03.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.2 - /Users/ahmedelshentenawy/.rvm/gems/ruby-2.7.4/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0 Android SDK: API Levels: 28, 29, 30, 31 Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 31.0.0 System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: Arctic Fox 2020.3.1 Patch 4 Arctic Fox 2020.3.1 Patch 4 Xcode: 13.1/13A1030d - /usr/bin/xcodebuild Languages: Java: 1.8.0_292 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.67.1 => 0.67.1 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

  • provider a platformColor to either borderColor or shadowColor properties
  • run the app on android
<View style={{
borderColor:
  Platform.OS == 'android' ? PlatformColor('?attr/colorPrimary') : 'blue' 
}} />


<Image
  source={{
    uri: 'https://source.unsplash.com/user/c_v_r/1900x800',
  }}
  style={{
    width: 100,
    height: 100,
    overlayColor:
      Platform.OS == 'android'
        ? PlatformColor('?attr/colorPrimary')
        : 'blue',
  }}
/>

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

https://github.com/a-eid/platformColorIssueAndorid2

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
Gregoirevdacommented, Mar 9, 2022

PlatformColor is also not accepted in StatusBar backgroundColor prop for Android: <StatusBar backgroundColor={PlatformColor('?attr/surfaceColor')} />

backgroundColor defaults to ?attr/colorPrimaryDark, so changing the value for it in styles.xml without specifying it in JS works, but when updating the phone’s light/dark mode it’s not being updated (event without uiMode)

1reaction
a-eidcommented, Jan 24, 2022

ok so it was present even in earlier versions than 0.67?

Yes.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How can I change border's color independent of it's width and ...
Now I only want to change that border's color to Blue but don't mess up with the width and shape, how can I...
Read more >
Color Reference - React Native
PlatformColor lets you reference the platform's color system. ... but on Android values are stored in SRGB color mode (0xaarrggbb).
Read more >
a-eid ( Ahmed Eid ) - github record :)
borderColor, overlayColor don't work with platformColor on android. still an issue as of version 0.70 . a-eid. comment created time in 10 days....
Read more >
React Native Tutorial 42 - PlatformColor - YouTube
Welcome to this course on React Native, React Native is used hybrid mobile app development. Facebook's React Native user interface (UI) ...
Read more >
FR: Output to Quarto markdown flavour - Fredrikekre/Literate.Jl
Rive animation not importing after I drag and drop local riv file to rive app ... borderColor, overlayColor don't work with platformColor on...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found