Is there a way in React Native to prevent text wrapping AND prevent ellipsis?

Viewed 119

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'
  },
0 Answers
Related