react native mirror text
- Published
- Reading time
- 2 min read
- Length
- 400 words
On this page
How to Mirror Text in React Native#
If you want to flip/mirror your text horizontally or vertically in React Native, you can use the transform property in the StyleSheet component. Here are the steps to do it:
Horizontal Mirroring#
To mirror text horizontally, you can use the scaleX() function in the transform property. Here's an example:
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello World!</Text>
<Text style={[styles.text, styles.mirror]}>Hello World!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 30,
},
mirror: {
transform: [{ scaleX: -1 }],
},
});
In this example, we have two Text components inside a View component. The second Text component has an additional style called "mirror", which applies a horizontal mirror effect to the text via the scaleX() function. The negative value (-1) flips the text horizontally.
Vertical Mirroring#
To mirror text vertically, you can use the scaleY() function in the transform property. Here's an example:
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello World!</Text>
<Text style={[styles.text, styles.mirror]}>Hello World!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 30,
},
mirror: {
transform: [{ scaleY: -1 }],
},
});
In this example, the mirror style applies a vertical flip effect via the scaleY() function with a negative value (-1).
Multiple Mirrors#
You can also combine multiple mirror effects in the transform property by using an array of transformations. Here's an example:
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello World!</Text>
<Text style={[styles.text, styles.mirror]}>Hello World!</Text>
<Text style={[styles.text, styles.mirror, styles.rotate]}>Hello World!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 30,
},
mirror: {
transform: [{ scaleX: -1 }, { scaleY: -1 }],
},
rotate: {
transform: [{ rotate: '180deg' }],
},
});
In this example, we have a third Text component that has an additional style called "rotate", which applies a rotation effect via the rotate() function. The mirror style applies both horizontal and vertical flip effects by using an array of transformations in the transform property.
That's it! You can use these techniques to mirror text in your React Native projects.