Text element does not accept numbers in properties

[vovkasm]

Thats work:

  const value = '50';
  <Text>{value}</Text>

But this does not:

  const value = 50;
  <Text>{value}</Text>

This also does not work:

  const x = 10;
  <Text x={x}>some text</Text>

I forked magicismight/react-native-svg-example and show bugs in the expose-text-bug branch: https://github.com/vovkasm/react-native-svg-example/tree/expose-text-bug

To show:

1. git clone https://github.com/vovkasm/react-native-svg-example.git
2. git checkout expose-text-bug
3. npm install
4. npm start
5. react-native run-ios

I did not test android, only iOS.

BTW. Internal example in Example folder completely broken and requires bunch of exponent staff. In current stage it cannot be used for testing. (((

[magicismight]

https://github.com/magicismight/react-native-svg-example You can try this Example.
And which version did you use?
5882349 this have fixed the number in Text element issue.
Try to upgrade to 5.1.2.

[vovkasm]

Do you see package.json in my branch? ))
Ok, this bug can be reproduced with:

• iOS
• react-native 0.40.0
• react-native-svg 5.1.2

[magicismight]

Thanks for reporting this.
I'll fix this soon.
I had tested the number text by using this, and this works fine.

            <Text
                x="50"
                y="9"
                fill="red"
                textAnchor="middle"
            >111</Text>

But I haven't expected this would go wrong:

      const n = 111;
      return <Svg
            height="30"
            width="100"
        >
            <Text
                x="50"
                y="9"
                fill="red"
                textAnchor="middle"
            >{n}</Text>
        </Svg>;
    }

[vovkasm]

Good! Seems like react compiler translates all literal insertions to strings.

Please look also on

const n = 111;
<Text x={n}>some text</Text>

[magicismight]

Fix is shipped in 5.1.3

[vovkasm]

Thank you! 5.1.3 works within our application now.