react native text horizontal cutting, need full text in one line how to do that? - react-native

Question

react-native version: "0.62.0", I tried this code
ui coming like this:
React Native
</View>
<View style={{flex:8}}>
<View style={{padding: 20, height: 200, backgroundColor: 'red'}}>
<Text style={fonts.bold}>View 1</Text>
</View>
<View style={{padding: 20, height: 200, backgroundColor: 'red'}}>
<Text style={fonts.bold}>View 1</Text>
</View>
<View style={{padding: 20, height: 200, backgroundColor: 'yellow'}}>
<Text>View 1</Text>
</View>
<View style={{padding: 20, height: 200, backgroundColor: 'green'}}>
<Text>View 1</Text>
</View>
</View>
</View>
How to do it?

Answer 1

give Text width greater than space occupied by characters with some padding

Answer 2

It looks like you did not provide the code for intended green view. The green view in your code is different. It is under yellow view.
Tip: For intended view try to remove height and width properties.

Answer 3

Created a sample according to your problem
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.wrapperStyle}>
<View style={styles.leftStyle}>
<Text style={styles.textStyle}>Trending</Text>
</View>
<View style={styles.rightStyle}>
<Text>View 1</Text>
</View>
</View>
<View style={styles.wrapperStyle}>
<View style={[styles.leftStyle, { backgroundColor: 'green' }]}>
<Text style={styles.textStyle}>Top_games</Text>
</View>
<View style={[styles.rightStyle, { backgroundColor: 'yellow' }]}>
<Text>View 2</Text>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: 20,
},
wrapperStyle: {
height: 200,
flexDirection: 'row'
},
leftStyle: {
flex: 2,
backgroundColor: 'gray',
alignItems: 'center',
justifyContent: 'center'
},
rightStyle: {
flex: 8,
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center'
},
textStyle: {
transform: [{ rotate: '-90deg' }]
}
});
Somtetimes you have to change flex value according to your requirements.
Hope this helps you. Feel free for doubts.