Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

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

Closed
a-eid opened this issue Jan 21, 2022 · 10 comments
Closed

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

a-eid opened this issue Jan 21, 2022 · 10 comments
Labels

Comments

@a-eid
Copy link

a-eid commented Jan 21, 2022

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(R) Core(TM) 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

@kelset
Copy link
Contributor

kelset commented Jan 24, 2022

Hey @a-eid, is this a regression? as in, before upgrading to 0.67 it was fine?

@a-eid
Copy link
Author

a-eid commented Jan 24, 2022

Hey @a-eid, is this a regression? as in, before upgrading to 0.67 it was fine?

No it's not a regression

@kelset
Copy link
Contributor

kelset commented Jan 24, 2022

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

@a-eid
Copy link
Author

a-eid commented Jan 24, 2022

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

Yes.

@Gregoirevda
Copy link
Contributor

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)

@github-actions
Copy link

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

@github-actions github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Sep 11, 2022
@a-eid
Copy link
Author

a-eid commented Sep 11, 2022

still an issue as of version 0.70.

@danilobuerger
Copy link
Contributor

@a-eid did you see my PR? It should fix your issue.

@github-actions github-actions bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Sep 12, 2022
dmytrorykun pushed a commit that referenced this issue Sep 14, 2022
Summary:
PlatformColor should work on all *color style attributes on all platform.

Partially fixes #32942

## Changelog

[Android] [Fixed] - Support PlatformColor in borderColor

Pull Request resolved: #33544

Test Plan: Open rn tester (USE_FABRIC=false) platform color api examples. Without the changes to ViewProps.java, it will error out.

Reviewed By: lunaleaps

Differential Revision: D39413519

Pulled By: NickGerleman

fbshipit-source-id: 58962ba2956aa3df45144108eec194aedf23886b
@mattmcdonald-uk
Copy link

@danilobuerger The latest RN (0.70.5) includes your PR, but this issue is still present.

OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this issue May 22, 2023
Summary:
PlatformColor should work on all *color style attributes on all platform.

Partially fixes facebook#32942

## Changelog

[Android] [Fixed] - Support PlatformColor in borderColor

Pull Request resolved: facebook#33544

Test Plan: Open rn tester (USE_FABRIC=false) platform color api examples. Without the changes to ViewProps.java, it will error out.

Reviewed By: lunaleaps

Differential Revision: D39413519

Pulled By: NickGerleman

fbshipit-source-id: 58962ba2956aa3df45144108eec194aedf23886b
@khagesh
Copy link

khagesh commented Oct 5, 2023

We should reopen this issue. It is not yet fixed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants