klarna-incubator / platform-colors Goto Github PK
View Code? Open in Web Editor NEWGenerate platform native colors for iOS, Android & Web
License: Apache License 2.0
Generate platform native colors for iOS, Android & Web
License: Apache License 2.0
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! :)
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.
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.
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 ๐
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.