Is it possible to mirror text in react-native?

Question

I'm adding right-to-left (RTL) support to my RN app. In this app, I have included a typeface font file which contains vector icon images. Each icon corresponds to a character code.

I render my icons using the RN text component, like this:

 return <Text>{"\uE3B2"}</Text>

Some of these icons have directional meaning, and therefore, should be mirrored horizontally when using a RTL language.

The RN docs suggest using a scaleX transform to flip images. This works for images, but not for text components that contain icons like described above. I know that I can simply swap the icon to one that has the opposite direction, but I'm trying to find a better solution than that.

Does anyone know if there is a way to mirror a text component horizontally at runtime to accomplish this effect?

Answer 1

Yes ! it is possible for the text /View component, oh, and scaleX is deprecated

<Text style={{transform: [{rotateY: '180deg'}]}}>This should be flipped</Text>

Answer 2

Yes, you can apply this to mirror a text component:

transform: [{ scaleX: -1 }]