I am new to RN and I have this issue: My page will have 3 sections with titles on the left side. To maximize space I want these titles to be rotated by -90 degrees. My problem is that the words will break and wrap to the next line on the longer titles.
I can add numberOfLines={1} and that prevents the wrapping. But that now truncates the text and adds an ellipsis. Is there a way I can do both (rotate the text and NOT have the text truncate)?
<View style={styles.budget}>
<View style={styles.boxTitle}>
<Text style={styles.titleText} numberOfLines={1}>Transform</Text>
</View>
<View style={styles.boxBody}>
<View style={styles.budgetBar}>
</View>
</View>
</View>
boxTitle: {
borderColor: 'red',
borderWidth: 2,
width: '15%',
justifyContent: 'center',
flexWrap: 'nowrap',
},
titleText: {
transform: [{ rotate: '-90deg'}],
fontSize: 20,
fontWeight: 'bold',
textDecorationLine: 'underline',
},
boxBody: {
borderWidth: 2,
width: '85%',
flexDirection: 'row'
},