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

k3nda · 2019-09-02T10:04:02Z

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

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

Describe what you expected to happen:

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

The text was updated successfully, but these errors were encountered:

msand · 2019-09-02T16:41:12Z

This seems to work in v9.8.4

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

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 || 'black'} 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>
);

msand · 2019-09-02T16:41:27Z

Perhaps you're having a caching issue?

dinhtrumdieu · 2019-09-05T03:27:30Z

same issue

msand · 2019-09-05T08:52:08Z

I'm unable to replicate. Can you make a clonable git repo demonstrating the issue?

alradadi · 2019-09-09T02:48:43Z

@msand I tested your snippet on v9.8.4 and v9.8.5 and i'm getting the same issue.

This is what i get:

JSON value 'rgba(72, 33, 15, 0.54)' of type NSString cannot be converted to a UIColor. Did you forget to call processColor() on the JS side?

alradadi · 2019-09-09T03:38:51Z

Nvm. I actually created a fresh project and it seems to work fine.

My problem was passing SvgComponent directly into a UI library i'm using which was probably giving it invalid props.
Simply passing () => <SvgComponent/> instead solved my issue.

iwikal · 2019-09-09T13:33:49Z

I'm having the same issue and it's driving me insane. I recently upgraded from v9.5.3, and now it crashes when I build on my dev machine - even when going back to a previously working commit. It has to be some sort of caching issue because the CI server produces working builds from the very same commits. I've run out of ideas for caches to purge.

msand · 2019-09-09T18:29:31Z

@iwikal Have you tried a different emulator/simulator? In a fresh project?

iwikal · 2019-09-09T19:07:44Z

@msand no, after giving up on bisecting I tried my hand at actually addressing the error instead. It seems to be related to a svgr template of ours, and how it passes through props to the underlying Svg tags like @abdullah-sr mentioned. Still haven't figured out why I can't get past releases to work again, but it's probably user error somehow.

Blizard · 2019-09-10T04:01:20Z

@msand no, after giving up on bisecting I tried my hand at actually addressing the error instead. It seems to be related to a svgr template of ours, and how it passes through props to the underlying Svg tags like @abdullah-sr mentioned. Still haven't figured out why I can't get past releases to work again, but it's probably user error somehow.

Hi, try to downgrade as temporary solution to version "react-native-svg": "9.4.0". It works for us. Also just for sure you can remove everything (node_modules etc.) with git clean -xfd. May help

moahammadalt · 2019-09-18T17:02:49Z

same issue

iwikal · 2019-09-18T17:06:25Z

It went away when I stopped using the "color" prop on the root Svg element. I replaced it with "fill" instead.

SimenB · 2019-09-24T16:17:35Z

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

SimenB · 2019-09-25T07:56:56Z

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

superKalo · 2019-09-25T13:13:26Z

Same issue. Here's how we managed to solve it.

Problematic SVG:

import React from 'react';
import Svg, { Path } from 'react-native-svg';

interface Props { color: string; }

export const Icon = (props: Props): JSX.Element => (
    <Svg width={32} height={25} {...props}>
        <Path
            d="M15 1H6.333A.333.333 0 0 0 6 1.333V10c0"
            fill="none"
            stroke={props.color}
            stroke-miterlimit="50"
        />
    </Svg>
);

See how the <Svg /> receives an additional attribute color (from spreading all the props). However in our case we didn't actually need that. So we did:

import React from 'react';
import Svg, { Path } from 'react-native-svg';

interface Props { color: string; }

export const Icon = ({ color, ...props }: Props): JSX.Element => (
    <Svg width={32} height={25} {...props}>
        <Path
            d="M15 1H6.333A.333.333 0 0 0 6 1.333V10c0"
            fill="none"
            stroke={color}
            stroke-miterlimit="50"
        />
    </Svg>
);

And the error is gone. Or long story short: do not add a color attribute to the <Svg />.

Credits to @HristoEftimov for finding this one!

## [9.9.5](v9.9.4...v9.9.5) (2019-09-25) ### Bug Fixes * handling of color/tintColor, fixes [#1088](#1088) and [#1115](#1115) ([1eaf3a6](1eaf3a6))

msand · 2019-09-25T13:49:05Z

🎉 This issue has been resolved in version 9.9.5 🎉

The release is available on:

Your semantic-release bot 📦🚀

msand · 2019-09-25T13:51:26Z

Can you try with v9.9.5?

SimenB · 2019-09-25T13:57:11Z

Seems to do the trick! Happy it works with managed Expo without needing them to update 🎉

SimenB · 2019-10-02T09:07:10Z

To follow up, this broke on Android for us 😅

So I now use patch-package to apply this diff, which makes it work:

diff --git a/node_modules/react-native-svg/src/elements/Svg.tsx b/node_modules/react-native-svg/src/elements/Svg.tsx
index fa9a244..1494ef1 100644
--- a/node_modules/react-native-svg/src/elements/Svg.tsx
+++ b/node_modules/react-native-svg/src/elements/Svg.tsx
@@ -7,6 +7,7 @@ import {
   MeasureOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureInWindowOnSuccessCallback,
+  Platform,
 } from 'react-native';
 import {
   Color,
@@ -151,7 +152,7 @@ export default class Svg extends Shape<
         }
       : null;

-    const tint = extractColor(color);
+    const tint = Platform.OS === 'ios' ? extractColor(color) : color;
     return (
       <RNSVGSvg
         {...props}

This might be broken because of Expo and work properly if using a normal version as the java changes in the fix is not applied when I upgrade RN SVG in a managed Expo app.

msand · 2019-10-02T09:51:09Z

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

…tware-mansion#1115 Manually cherry-picked from 1eaf3a6

## [9.9.5](software-mansion/react-native-svg@v9.9.4...v9.9.5) (2019-09-25) ### Bug Fixes * handling of color/tintColor, fixes [#1088](software-mansion/react-native-svg#1088) and [#1115](software-mansion/react-native-svg#1115) ([1eaf3a6](software-mansion/react-native-svg@1eaf3a6))

msand added the Missing repro This issue need minimum repro scenario label Sep 5, 2019

msand closed this as completed in 1eaf3a6 Sep 25, 2019

msand pushed a commit that referenced this issue Sep 25, 2019

chore(release): 9.9.5 [skip ci]

3c7dafa

## [9.9.5](v9.9.4...v9.9.5) (2019-09-25) ### Bug Fixes * handling of color/tintColor, fixes [#1088](#1088) and [#1115](#1115) ([1eaf3a6](1eaf3a6))

msand added the released label Sep 25, 2019

SimenB mentioned this issue Sep 25, 2019

chore: bump version of react-native-svg in bundled modules expo/expo#5770

Merged

msand mentioned this issue Sep 25, 2019

Colors are not being displayed in Android 9. #1115

Closed

SimenB mentioned this issue Nov 2, 2019

pin react-native-svg to 9.9.5 expo/expo#6148

Merged

matias-la added a commit to ExodusMovement/react-native-svg that referenced this issue Jun 2, 2022

fix: handling of color/tintColor, fixes software-mansion#1088 and sof…

f8118fd

…tware-mansion#1115 Manually cherry-picked from 1eaf3a6

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

k3nda commented Sep 2, 2019

msand commented Sep 2, 2019

msand commented Sep 2, 2019

dinhtrumdieu commented Sep 5, 2019

msand commented Sep 5, 2019

alradadi commented Sep 9, 2019

alradadi commented Sep 9, 2019 •

edited

Loading

iwikal commented Sep 9, 2019

msand commented Sep 9, 2019

iwikal commented Sep 9, 2019

Blizard commented Sep 10, 2019

moahammadalt commented Sep 18, 2019

iwikal commented Sep 18, 2019

SimenB commented Sep 24, 2019

SimenB commented Sep 25, 2019 •

edited

Loading

superKalo commented Sep 25, 2019

msand commented Sep 25, 2019

msand commented Sep 25, 2019

SimenB commented Sep 25, 2019

SimenB commented Oct 2, 2019

msand commented Oct 2, 2019

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

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

Comments

k3nda commented Sep 2, 2019

Bug

Environment info

Steps To Reproduce

Reproducible sample code

msand commented Sep 2, 2019

msand commented Sep 2, 2019

dinhtrumdieu commented Sep 5, 2019

msand commented Sep 5, 2019

alradadi commented Sep 9, 2019

alradadi commented Sep 9, 2019 • edited Loading

iwikal commented Sep 9, 2019

msand commented Sep 9, 2019

iwikal commented Sep 9, 2019

Blizard commented Sep 10, 2019

moahammadalt commented Sep 18, 2019

iwikal commented Sep 18, 2019

SimenB commented Sep 24, 2019

SimenB commented Sep 25, 2019 • edited Loading

superKalo commented Sep 25, 2019

msand commented Sep 25, 2019

msand commented Sep 25, 2019

SimenB commented Sep 25, 2019

SimenB commented Oct 2, 2019

msand commented Oct 2, 2019

alradadi commented Sep 9, 2019 •

edited

Loading

SimenB commented Sep 25, 2019 •

edited

Loading