react-native-svg: iOS: JSON value ‘#000000’ of type NSString cannot be converted to a UIColor. Did you forget to call processColor() on the JS side?

Bug

When screen with any SVG icon appears app crash with following error:

JSON value ‘#000000’ of type NSString cannot be converted to a UIColor. Did you forget to call processColor() on the JS side?

Environment info

Platform: only iOS react-native: 0.59.10 react: 16.8.6

React native info output:

  React Native Environment Info:
    System:
      OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
      CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
      Memory: 7.33 GB / 31.21 GB
      Shell: 4.4.20 - /bin/bash
    Binaries:
      Node: 8.10.0 - /usr/bin/node
      Yarn: 1.12.3 - /usr/bin/yarn
      Watchman: 4.9.0 - /usr/local/bin/watchman

Library version: 9.8.1 Working previous library version (before we updated): 9.4.0

Steps To Reproduce

  1. Go to screen with some component Svg from react-native-svg (import Svg from 'react-native-svg'
  2. App crash

Describe what you expected to happen:

  1. App not crash - screen is working and display icon

Reproducible sample code

import Svg, { Defs, Circle, Path, G, Mask, Use } from 'react-native-svg'

import { appTheme } from '../../../app/theme'

export default (props) => (
  <Svg
    width={58}
    height={58}
    {...props}
  >
    <Defs>
      <Circle
        id='prefix__a'
        cx={24}
        cy={24}
        r={24}
      />
      <Path
        id='prefix__d'
        d='M0 .009h41.823v43.8H0z'
      />
    </Defs>
    <G
      transform='translate(5 4)'
      fill='none'
      fillRule='evenodd'
    >
      <Mask
        id='prefix__c'
        fill='#fff'
      >
        <Use
          xlinkHref='#prefix__a'
        />
      </Mask>
      <Use
        fill='#000000'
        filter='url(#prefix__b)'
        xlinkHref='#prefix__a'
      />
      <Use
        fill={props.color || appTheme.main.colors.themePrimary}
        xlinkHref='#prefix__a'
      />
      <G
        mask='url(#prefix__c)'
      >
        <G
          transform='translate(10.667 7.619)'
        >
          <Mask
            id='prefix__e'
            fill='#fff'
          >
            <Use
              xlinkHref='#prefix__d'
            />
          </Mask>
          <Path
            fillOpacity={0.15}
            fill='#000000'
            mask='url(#prefix__e)'
            d='M41.678 42.169v-.146h-.146v-.146h-.145v-.146h-.145v-.146h-.146v-.146h-.145v-.145h-.145v-.146h-.146v-.146h-.145v-.146h-.145v-.145h-.146v-.147h-.145v-.145h-.145v-.146h-.01v-.16h-.145v-.146h-.146v-.146h-.144v-.146h-.019V25.672h.454v-1.234h-.145v-.145h-.146v-.146h-.144v-.146h-.019v-.385h.604l-.198-.145h.053l-.2-.146h.054l-.197-.146h.052l-.168-.123v-.023h.023l-.023-.016v-.31L25.397 8.887 13.574.2 1.749 8.888l.758.822H1.9v1.234l1.536 1.594v12.024l.636.823H1.9v1.233l.63.79-.043.033H0v1.83l10.715 11.336h.62v.04h.145v.145h.145v.145h.145v.146h.146v.146h.145v.147h.145v.145h.146v.146h.145v.146h.145v.145h.146v.146h.145v.146h.145v.146h.145v.146h.146v.146h.145v.146h.146v.145h.145v.146h.145v.146h.145v.146h.146v.145h.145v.147h.145v.145h.146V44h27.146v-1.831z'
          />
        </G>
        <Path
          fill='#FFF'
          d='M10.667 36.762h27.047v-1.905H10.667zM12.571 18.286H35.81v-1.143H12.57zM12.571 33.905H35.81v-1.143H12.57zM14.095 32h2.857V19.238h-2.857zM20.19 32h2.858V19.238H20.19zM25.714 32h2.857V19.238h-2.857zM31.429 32h2.857V19.238h-2.857zM24.191 7.81l-11.81 8.571H36z'
        />
      </G>
    </G>
  </Svg>
)

You can also contact for more detail information @Blizard

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 10
  • Comments: 20

Commits related to this issue

Most upvoted comments

Since this is labelled with reproduction needed here is an App.tsx that works using Expo 34 (which uses RN SVG 9.5) and broken on Expo 35 (which uses RN SVG 9.9) - I’m unsure which exact patch versions are used.

import * as React from 'react';
import { View } from 'react-native';
import { Path, Rect, Svg } from 'react-native-svg';

const EmailIcon = props => (
  <Svg
    width={23}
    height={23}
    viewBox="0 0 23 23"
    fill="none"
    aria-hidden="true"
    {...props}
  >
    <Rect
      x={3}
      y={4}
      width={17}
      height={15}
      rx={2.5}
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <Path
      d="M3.166 8l7.477 3.589a2 2 0 0 0 1.717.007L20.01 8"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </Svg>
);

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <EmailIcon color="black" />
  </View>
);

export default App;

Removing color from the svg removes the error, but then the icon is blue instead of black (same as if dismissing the error). color also has no effect (probably due to the error). This works correct on Android

+3
SimenB on Sep 25, 2019

Can you try with v9.9.5?

+2
msand on Sep 25, 2019

That sounds correct. Either using plain react-native or waiting for the next upgrade in expo should resolve it.

+1
msand on Oct 2, 2019

🎉 This issue has been resolved in version 9.9.5 🎉

The release is available on:

Your semantic-release bot 📦🚀

+1
msand on Sep 25, 2019

color is the culprit here as well. We cannot use fill though as we use currentColor in other places in the svg

+1
SimenB on Sep 24, 2019
Read more comments on GitHub
← react-native-svg: iOS Build Started Failing with 9.5.0
react-native-svg: Not rendering local images →