Vertical text next to Horizontal Text react native?

Question

I am basically trying to create something like this:

Two boxes, the red one is vertical text and the blue one is horizontal text. The height of the red box should be the same as the blue box

I know that I can make text sideways like that by doing:

transform: [{ rotate: '-90deg'}]

on it, but I am having issues getting the rest to work correctly and having the boxes be aligned and sized properly. Any help would be greatly appreciated!

Answer 1

You should really try playing with the layout of React Native and post what you have tried but here's a sample code

<View style={{ height: 100, flexDirection: 'row'}}>
    <View style={{ flex: 1, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center' }}><Text style={{transform: [{ rotate: '-90deg'}]}}>Value</Text></View>
    <View style={{ flex: 8, backgroundColor: 'blue', alignItems: 'center', justifyContent: 'center'}}><Text>Short Text</Text></View>
</View>

Result:

So little style pointers:

1. flexDirection is by default column, so if you don't say its a row, your views will stack vertically
2. flex fills your screen in the flexDirection. I have 2 elements in my row with flex, so view1 will take up 1/9th of the space and view2 will take up 8/9th
3. Alignitems will align your items in the direction of your flex, so horizontally if it's a row, vertically if it's a column.
4. justifyContent aligns item in the crossaxis, so if your flex is a row, it will align items vertically

Ohey its the same as css