How to convert string to jsx in react native

Question

I'm trying to display javascript string as jsx, it seems there's no way of display a string as jsx in react native, e.g. const test = '<Text>hello</Text>' render() { return ({test})}.

Given the following string

const svg = '<Svg.G fill="none" fill-rule="evenodd"> <Svg.Path fill="none" d="M0 0h24v24H0z"/> <Svg.Path stroke="#333" stroke-linecap="round" stroke-linejoin="round" d="M3.5 12.5h17v9h-17zM13.5 12.5v9M10.5 12.5v9M1.883 9.602l18.353-4.918.776 2.898L2.66 12.5z"/> <Svg.Path stroke="#333" stroke-linejoin="round" d="M6 6.857c.957.553 4.675.393 4.675.393S8.957 3.945 8 3.393a2 2 0 1 0-2 3.465zM15.296 4.366c-.546.956-3.852 2.674-3.852 2.674s-.164-3.718.388-4.674a2 2 0 1 1 3.464 2z"/> <Svg.Path stroke="#333" stroke-linecap="round" stroke-linejoin="round" d="M12.508 6.755l.777 2.897M9.61 7.531l.776 2.899"/></Svg.G>';

Then I want render it like the following

render() {
    return (
      <View>
        <Svg>
          {svg}
        </Svg>
      </View>
    );
}

This renders nothing, How can I render this string, or maybe I should turn the string into an array and render it as an array?

Why declare it as string rather than React element directly? — Roy Wang, Jul 02 '18 at 01:03
Maybe you can use this https://stackoverflow.com/questions/29334984/render-html-in-react-native — Burgan, Jul 02 '18 at 18:05
You could check out this library: https://stackoverflow.com/questions/36104302/how-do-i-convert-a-string-to-jsx — yeshashah, Jul 03 '18 at 11:04

score 9 · Answer 1 · answered Jul 04 '18 at 13:12

It's not an answer to your question, but maybe it helps you to figure out how to do what you want. I strongly not recommend using this approach ;)

So you can't just use eval for this string because you need to convert jsx to js. Babel doing it for us on building stage, but you can parse a string and convert it to React.createElement shape.

It will work only if you know what format of string with components you receive

I provide example only for your example (<Text>hello</Text>) because it is much easier, but it'll help you get an idea.

import React, { PureComponent } from 'react';
import RN, { View } from 'react-native';

function mapStringToComponent(stringToRender) {
    const parseResult = stringToRender.match(/<([a-z]*)>(.*)<\/[a-z]*>/i);
     // result of this regex ["<Text>hello</Text>", "Text", "hello"]

    if (parseResult !== null) {
      const [, compName, innerText] = parseResult;

      return React.createElement(
        RN[compName],
        null, // here may be an object with attributes if your node has any
        innerText,
      );
    }

    return null;
}


export default class MyDynamicComponent extends PureComponent {
  render() {
    const component = mapStringToComponent('<Text>hello</Text>');

    return (
      <View>
       {component}
      </View>
    );
  };
}

Here you can check how should looks your converted svg string: babel link

I've tried to google some lib that can do it for you but hasn't found any. Maybe I'm bad at googling :)

This looks like it could work, but the version of react-native we are using no longer has a default export. So babel chokes on `import RN ...` Is there a possibility of an update to this? I'm yet to find a workaround. — Dawson B, Nov 09 '18 at 19:39

score 1 · Answer 2 · answered Jul 31 '21 at 05:23

Well we could do this using import react-jsx-parser Added a line to filter out the lines and spaces as parser throws an error when their is space in the SVG code

Eg.

    var svg = `<Svg
    width={286}
    height={335}
    viewBox="0 0 286 335"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
    >
    <Path
      d="M63.763 25.066h17.72L107.542 1l14.593 16.741L248.258 32.39V140.16L284.74 257.35c-3.822 3.488-20.013 15.486-54.202 35.575-51.7 25.112-174.419 37.668-229.315 40.807l11.465-193.571c5.56.698 23.557 1.675 51.075 0 34.398-2.092 37.525 2.093 43.779-15.694 6.254-17.788-6.254-35.576-13.55-49.178-5.838-10.882-22.585-14.997-30.229-15.695V25.065z"
      fill="#F8F9F8"
      stroke="#22223B"
      strokeOpacity={0.8}
      strokeWidth={1.06988}
      strokeLinecap="round"
      strokeDasharray="6.42 6.42"
    />
    <Path
    onPress={handleOnPress}
      transform="rotate(3.757 16.59 146.446)"
      fill="#9A8C98"
      fillOpacity={0.22}
      d="M16.5894 146.446H40.5513V192.058H16.5894z"
    />
  </Svg>`
    svg = svg.replace(/\n/g, ' ').replace(/\>[\t ]+\</g, "><");
    return (
        <JsxParser
            components={{ Svg, Path }}
            renderInWrapper={false}
            bindings={{
                foo: 'foo',
                handleOnPress: () => alert('sasas'),
            }}
            blacklistedAttrs={[]} // this line should fix your issue
            jsx={svg}
        />
    );

score 0 · Answer 3 · answered Jul 03 '18 at 18:48

0

i saved the svg const you are trying to display as svg file and open it but it is blank

so try to fix it

the best way to display svg in react native is this way

import Image from 'react-native-remote-svg';
<View>
    <Image source={require('./assets/picture.svg')} />
</View>

answered Jul 03 '18 at 18:48

André Abboud

1,864
2
14
23

Building on this, if you're unable to pre-save the file you could potentially use a promise chain to write it to a file, then render the newly saved svg https://github.com/itinance/react-native-fs – RasTheDestroyer Jul 08 '18 at 19:24

How to convert string to jsx in react native

3 Answers3

Linked