Search code examples
react-nativecolor-space

React Native Linear Gradient: Colors washed out

I'm using the react-native-linear-gradient package to form a linear gradient. I've picked the exact same colors with color picker in XD design to form the same gradient in my app. Here is my code:

<LinearGradient start={{x:0,y:0}} end={{x:1,y:1}} style={StyleSheet.absoluteFill} colors={['#D300B5', '#FF5400']} >...

These hex values are the same values with the design, yet, here is the result compared with the design:

enter image description here

The colors are significantly washed out. I've checked the opacities to make sure everything is at 100%, there aren't anything over the gradient, the gradient view isn't extending beyond the screen, both XD, my Mac, and the iPhone X use the Display P3 color space.

Why are the colors washed out?

Solution

  • Note: This solution is iOS-only and applies to all colors used in app.

    After a long time of not being able to find out anything, I've created a patch of React Native itself, as the problem originates from how React Native creates colors itself in native code in RCTConvert.m:

    return [UIColor colorWithRed:... green:... blue:...]

    Switching both occurances (there are two as of writing) of colorWithRed to colorWithDisplayP3Red and rebuilding (don't forget as we're changing native code, hot reloading won't work) the app worked: Colors are now rendered in P3 color space. Please note that this approach changes all colors that you create/use in app, so every color will basically look more crisp.