Vertical text in react native is cut by it's original height (using transform) - react-native

Question

I have the following code in which I would like the black boxed text to be placed vertically, either centered or aligned to the top, and be cut by the end of the corresponding text view (sample text).
It seems like even though the text is transformed, it still measures its original height and thus shows only the first letter with ...
adding width:50 to the transformed view, will show better results, but the number of lines in the sample text is changing (and also the font sizes).
this is the result I'm getting:
And this is the required result (using paint.net ;)):
Does anyone have an idea how to do it?
Thanks!
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
class SideComponent extends Component{
render(){
return (
<View style={{flex:1, alignItems:'center', justifyContent:'center', borderColor:'black', borderWidth:0.5, width:20,}}>
<View style={{transform: [{ rotate: '90deg'}]}}>
<Text numberOfLines={1} style={{borderColor:'blue'}}>{this.props.text}</Text>
</View>
</View>
)
}
}
class LineComponent extends Component{
render(){
return (
<View style={{flex:1}}>
<Text numberOfLines={2} style={{backgroundColor:'yellow'}}>Sample text</Text>
<Text numberOfLines={2} style={{backgroundColor:'yellow'}}>Sample text</Text>
<Text numberOfLines={2} style={{backgroundColor:'yellow'}}>Sample text</Text>
</View>
)
}
}
export default class App extends Component{
render() {
return (
<View style={styles.container}>
<View style={{flexDirection:'row'}}>
<SideComponent text="Short"/>
<LineComponent/>
</View>
<View style={{flexDirection:'row'}}>
<SideComponent text="LongTextLong" style={{}}/>
<LineComponent/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
flexDirection: 'column',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

Answer 1

I tried something like this for vertical transformation:
<View style={{flexDirection:'row'}}>
<View style={{flex:0.1 }}>
<View style={{left:-130,width:300,height:20,alignItems:'flex-start',justifyContent:'flex-start',transform: [{ rotate: '270deg'}]}}>
<Text numberOfLines={1} style={[AppStyles.regularFontText,{fontSize:12,color:'#8160e5'}]}>Number of Users</Text>
</View>
</View>
<View style={{flex:0.9}}>
<BarChart
style={{height:200,width:width-100[enter image description here][1]}}
data={this.state.line_data}
chartDescription={{ text: '' }}
xAxis={this.state.xAxis}
animation={{durationX: 2000}}
legend={this.state.line_legend}
gridBackgroundColor={processColor('#ffffff')}
drawBarShadow={false}
drawValueAboveBar={true}
drawHighlightArrow={true}
onSelect={this.handleSelect.bind(this)}
highlights={this.state.highlights}
onChange={(event) => console.log(event.nativeEvent)}
/>
</View>
</View>