How to output < inside Text component in React Native?

Question

Like this: <Text> Math inequality: 3 < 2x </Text>

How do I escape such characters so that JSX doesn't think it's a part of the component syntax?

Answer 1

After some testing, I found out that @stackdave's answer does not work. I don't know if it works on other versions of RN, but on [email protected], I got the following error: Cannot add a child that doesn't have a YogaNode to a parent without a measure function.

Your best option (safest/better syntax highlighting wise) is to do it like so:

<Text>2 {'>'} 1</Text>

Answer 2

You could do it easily using the following manner:

let localizableString = 'Math inequality: 3 < 2x' //It is better to separate string literals from code for easier localization.

And then in your Component's file:

<Text {...textProps}>{localizableString}</Text>