React Native SVG rendering different color than original

[hoangdv198]

Description

The rendered SVG in React Native appears darker than the original file.

original svg:

screenshot using react-native-svg:

Here is the code:

import React from 'react'
import { SvgXml } from 'react-native-svg';
import { deviceHeight } from '@src/configs/theme/common';
import { deviceWidth } from '@src/configs/theme/common';

interface ImageBackgroundSvgProps {
  width?: number;
  height?: number;
  xml: string;
  children: React.ReactNode;
}

const ImageBackgroundSvg = ({width, height, xml, children}: ImageBackgroundSvgProps) => {
  if (!xml || typeof xml !== 'string') {
    return (
      <View style={styles.container}>
        {children}
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <View style={styles.background}>
        <SvgXml width={deviceWidth} height={deviceHeight} xml={xml} />
      </View>
      {children}
    </View>
  )
}

export default ImageBackgroundSvg

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative',
  },
  background: {
    position: 'absolute',
    top: 0,
    left: 0,
  },
})

Steps to reproduce

1. Import the SVG file into the React Native project using react-native-svg.
2. Render the SVG as a background image or as a standalone element.
3. Compare the displayed SVG in the app with the original SVG file (opened in a browser or an image viewer).

Snack or a link to a repository

https://snack.expo.dev/@expo.hoangdv/rn-svg-bug

SVG version

15.8.0

React Native version

0.73.1

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

iOS simulator

Device model

iPhone 16 Pro

Acknowledgements

Yes