React Native rotateY results in blurry text

Question

I'm developing a flip card component in React Native for iOS devices, and this is how I approached it:

<Animated.View ref="container" style={{position:'relative',transform:[{rotateY:'0deg'}]}}>
    <View ref="frontFace"><Text>Front face</Text></View>
    <View ref="backFace" style={{transform:[{rotateY:'-180deg'}]}}><Text>Back face</Text></View>
</Animated.View>

1. overlap two Views using absolute position in side a container View
2. flip the back face using rotateY:'-180deg'
3. when the flip button is tapped, flip the container using Animated component by interpolating rotateY of the container from '0deg' to '180deg'

Sorry about the over-simplified code above - this code works fine and smoothly too. The problem is that the back face is blurry in the simulator, and ugly pixelated on a device.

Is there a way to fix this? Or any better suggestion on how to implement a flip card component?

Thank you!!!

Answer 1

Replace transform: [{ rotateY: '-180deg'}] style with: transform : [{scaleX: -1}] resolved it.

Answer 2

In my web page, also has blurry text problem, transform: scaleX(-1); fix the problem.