Color rendered by react-native-skia is inconsistent with native rendering

[zhuscat]

Description

The color I'm using is #F0605C. It's apparent that the color rendered by Skia differs from the native rendering.

React Native Skia Version

2.1.1

React Native Version

0.79.5

Using New Architecture

• Enabled

Steps to Reproduce

Use the code below

I use iOS simulator(iOS 18.2)

Snack, Code Example, Screenshot, or Link to Repository

import { View, Text } from 'react-native'
import {
  Canvas,
  Circle,
} from '@shopify/react-native-skia'

function Demo() {
  return (
    <View>
      <Text>Skia</Text>
      <Canvas style={{ width: 40, height: 40 }}>
        <Circle cx={20} cy={20} r={20} color="#F0605C" />
      </Canvas>
      <Text>RN View</Text>
      <View
        style={{
          width: 40,
          height: 40,
          backgroundColor: '#F0605C',
          borderRadius: 100,
        }}
      />
    </View>
  )
}

[wcandillon]

Indeed this is because <View /> is not using wide-gamut color space.
We can offer an option to disable it for iOS.
Can you confirm that this is an iOS only issue? On Android wide-gamut color space is also enable for native views, right? We can do more testing there.

I am also curious to know how did you take the screenshot? Sometimes these differences between color spaces are lost when doing a screenshot.

[wcandillon]

While we work on the details of this.
You can play with this file to disable wide gamut colors on iOS: https://github.com/Shopify/react-native-skia/pull/3153/files

There is also some math you can use to get to srgb(#F0605C) in wide gamut color space.

[bigcupcoffee]

Hey, coincidentally I was also debugging/making a repro for this, noticed it on the gradients. It does seem like the color is about the same on Android, but the problem of gradient mismatching, which was my main concern, remains. I'm obviously not sure if that's a bug at all for either react-native or skia, but I wanted to highlight this

Repro (expo snack works just fine, not on android though):

import { View } from 'react-native';
import { SafeAreaProvider, SafeAreaView, initialWindowMetrics } from 'react-native-safe-area-context';
import { Canvas, Rect, rect, vec, LinearGradient } from '@shopify/react-native-skia';
import { useSharedValue, useDerivedValue } from 'react-native-reanimated';

const color = '#C19DB4';
export default function App() {
  return (
    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
      <SafeAreaView style={{ flexDirection: 'row', flex: 1, alignItems: 'stretch' }}>
        <SkiaGradient color={color} />
        <RNGradient color={color} />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const RNGradient = ({ color }) => (
  <View style={{ flex: 1, experimental_backgroundImage: `linear-gradient(${color}00, ${color}, rgba(0,0,0,0.4))`}} />
)

const SkiaGradient = ({ color }) => {
  const size = useSharedValue({ width: 0, height: 0 });
  const grect = useDerivedValue(() => rect(0, 0, size.value.width, size.value.height));
  const gend = useDerivedValue(() => vec(0, size.value.height));

  return (
    <Canvas style={{flex: 1}} onSize={size}>
      <Rect rect={grect}>
        <LinearGradient colors={[color + '00', color, 'rgba(0,0,0,0.4)']} start={vec(0, 0)} end={gend} />
      </Rect>
    </Canvas>
  )
}

[zhuscat]

Hi @wcandillon

I tried to run the corresponding code on the Android Emulator. The two colors are very close to the naked eye, but there is still a difference when using a color picker. However, the difference is not as obvious as it is in the iOS Simulator.

Regarding my screenshot method, I run the program on my MacBook Pro using an emulator and use Shottr to capture the screen.

Here is the device I'm using, if it helps:

MacBook Pro (2024 model)
macOS 15.5 (24F74)

[zhuscat]

Hi @wcandillon

May I ask if there is any progress on this issue? If you need any help from my side, like providing more reproduction info or helping with testing, please feel free to let me know. Thanks!

[wcandillon]

I have investigated it and it looks on Android colors are always matching but on iOS we need to add a prop to disable p3 colors, do you agree that this is the fix? I want to make sure I am not missing something.

…

On Thu, Jul 31, 2025 at 8:57 AM Liangzhen Zhu ***@***.***> wrote: Hi @wcandillon May I ask if there is any progress on this issue? If you need any help from my side, like providing more reproduction info or helping with testing, please feel free to let me know. Thanks! — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you were mentioned. Triage notifications on the go with GitHub Mobile for iOS or Android.

[github-actions]

🎉 This issue has been resolved in version 2.2.0 🎉

The release is available on:

• v2.2.0
• GitHub release

Your semantic-release bot 📦🚀