klarna-incubator / platform-colors Goto Github PK

Can we document what version of React Native starts supporting PlatformColor? I'm having a trouble finding it and it would be nice/easy to just plop in these docs for us that stumble upon this tool. I'm still looking 😄

Is it possible to make a platform specific color declaration which points to another native color value? Suppose I want to use the native labelColor on iOS but fallback to #000/#FFF on web.

I guess src/colors with some Platform.select to handle these cases would work but it would also bloat the catalog with unused colors and would be kind of cumbersome.

sometimes you need to give the user the ability to choose dark or light mode and preserve it regardless of the device theme.
would that be possible

I'm currently looking how it's done on ios/android natively.

Motivation:

Some features of rn don't currently allow to use platform color: for example tintColor for ActionSheetIOS or interpolating colors for animations. For those use cases it would be nice to get the resolved color value for the current scheme (Appearance.getColorScheme()).

Example:

// platform-colors.config.js
module.exports = {
  "colors": {
    "background": {
      "light": "#ffffff",
      "dark": "#000000"
    },
    "accent": "pink"
  },
}

// somewhereelse.js
resolveColor("background")
resolveColor(Colors.background)

In this case resolveColor would query Appearance.getColorScheme() for the appropriate scheme and then return the actual color value.

Of course, this could already be done by importing the config and selecting from colors but it would be nice to have a importable function and type checked color names for this.

same issue happens with the example app.

STR:

• init a new react-native project
• run npx @klarna/platform-colors in the root directory

Hello and thanks for the package!

based on the readme

Using platform colors enables you to change from light/dark mode instantly and without any additional rerenders.

I'm starting with an assumption that colors in the example app should update with the system theme change. However, on device / emulator I tested this on, it is not the case, as seen in the video below (Honor 20 pro, android 10 / Pixel_2_Android_11(AVD)).

Is this a bug? I know that this may not be the package where the bug is happening (it probably is in the RN core?) but I wanted to ask anyway. Note that the useColorScheme() hook from rn core does pick up the change (also seen in the video). I have tested this also with RN 67-rc6 with the same result.

The same issue applies to icons not "refreshing" in https://github.com/klarna-incubator/react-native-vector-drawable

The bug goes away if I remove uiMode from

The colors are rendered properly when the app is killed and started again.

Thanks for your thoughts! :)

I think it would be good to return the light colors when the device is running iOS 13 or below, otherwise there will be no color at all.

wdyt?

I can do a PR if so