React-native-navigation: PlatformColor crashes on Android

[rosskhanas]

Issue Description

The app crashes when PlatformColor is defined via ?attr/XXX.

Steps to Reproduce / Code Snippets / Screenshots

Navigation.setDefaultOptions({
  backButton: {
    color: PlatformColor("?attr/colorOnBackground"),
  },
}

---

Environment

• React Native Navigation version: 7.0.0
• React Native version: 0.63.2
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Debug

[guyca]

@rosskhanas Have your tried with one of the latest snapshot versions? 7.0.0-snapshot.1225 perhaps. I think this issue is already resolved by @danilobuerger

[rosskhanas]

@guyca hm, it seems not fixed. Everything works well when I use PlatformColor("@color/XXX"), but not when ?attr/XXX.

Here are more details about the crash:

com.facebook.react.bridge.JSApplicationCausedNativeException: ColorValue: None of the paths in the `resource_paths` array resolved to a color resource.
    at com.facebook.react.bridge.ColorPropConverter.getColor(ColorPropConverter.java:71)
    at com.reactnativenavigation.options.parsers.ColorParser.parse(ColorParser.java:25)
    at com.reactnativenavigation.options.TitleOptions.parse(TitleOptions.java:31)
    at com.reactnativenavigation.options.TopBarOptions.parse(TopBarOptions.java:33)
    at com.reactnativenavigation.options.Options.parse(Options.java:22)
    at com.reactnativenavigation.react.NavigationModule.parse(NavigationModule.java:194)
    at com.reactnativenavigation.react.NavigationModule.lambda$setDefaultOptions$1$NavigationModule(NavigationModule.java:104)
    at com.reactnativenavigation.react.-$$Lambda$NavigationModule$N2JlaPHmovMYN5T38Ah4GsF6njg.run
    at com.reactnativenavigation.react.NavigationModule.lambda$handle$13$NavigationModule(NavigationModule.java:200)
    at com.reactnativenavigation.react.-$$Lambda$NavigationModule$_KMLiCFir6_k6qF7P2pzVizFOwk.run
    at android.os.Handler.handleCallback(Handler.java:873)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loop(Looper.java:193)
    at android.app.ActivityThread.main(ActivityThread.java:6762)
    at java.lang.reflect.Method.invoke(Method.java)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

[guyca]

@rosskhanas Thanks. What's the exact color value you're trying to use? What's XXX ?

[rosskhanas]

@guyca I tried several of them, for example PlatformColor("?attr/colorOnBackground") which is defined as <item name="colorOnBackground">@color/on_background_light</item> in styles.xml.

[danilobuerger]

@rosskhanas If its defined as an xml resource, using @ is correct. The ? is for style references to the current theme. Also see the implementation detail here: https://github.com/facebook/react-native/pull/27908

[guyca]

@danilobuerger Thanks for looking into this! 💯

[rosskhanas]

@danilobuerger right, PlatformColor("?attr/colorOnBackground") is the way to define theme-specific colors, correct? This way of using colors is supported in React Native, but once it is used for setting navigation colors, the app crashes...

[danilobuerger]

@rosskhanas Even so, PlatformColor is coming from react-native. The only time we can accept it as a bug here is if you can use the same PlatformColor on a react-native view element (for example <Text style={color: PlatformColor("?attr/colorOnBackground")}>...</Text>) without it crashing and it working and if you can provide a minimal reproduction showing that the same PlatformColor is working on a react-native view element but not working when passed through react-native-navigation.

[rosskhanas]

@danilobuerger exactly, this color works with View but not when passed through react-native-navigation. Here is a link to the repo: https://github.com/rosskhanas/platformcolor/tree/7e3a8fa0efd34ea07f8c4f50d588d741329625c6

Here is the line you can uncomment to get the app crashed: https://github.com/rosskhanas/platformcolor/blob/7e3a8fa0efd34ea07f8c4f50d588d741329625c6/index.js#L22

[danilobuerger]

Awesome, thanks for the reproduction

[guyca]

Thanks for the reproduction @rosskhanas, I'm on vacation for the next two weeks. Will get to this when I get back.

[rosskhanas]

@guyca did you have a chance to look at this? 🥺 Thank you.

[guyca]

@rosskhanas Not yet, but it's in the planning for this Q. If you'd like to look into it you're more than welcome! Don't wait for me.

[rosskhanas]

@guyca I wish I could, I'm not an Android expert 🙈 I'm open to providing some testing assistance if needed.