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!

Can you add some more code on how you are trying to implement this? — Roshan Gautam, Dec 14 '18 at 01:04

score 14 · Answer 1 · answered Dec 14 '18 at 08:34

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:

flexDirection is by default column, so if you don't say its a row, your views will stack vertically
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
Alignitems will align your items in the direction of your flex, so horizontally if it's a row, vertically if it's a column.
justifyContent aligns item in the crossaxis, so if your flex is a row, it will align items vertically

Ohey its the same as css

domdambrogia · Answer 2 · 2018-12-14T01:27:25.637

This fiddle should get you close: https://jsfiddle.net/1f8png0r/4/

I would stay away from styling using JS at all costs - (mainly $.css() and $.transform(), etc) It is much slower than CSS and CSS is much easier to maintain down the road -- especially if you can learn to style your selectors nicely!

To break it down a little - you want to create a .row a .left column and a .right column. Inside the .left column you want some text. You want to transform that text and rotate it -- rotate(90deg). I have never used the flex vs. inline-flex for this before now, but after needing to do horizontal text a handful of times I think it is the most robust IMHO.

The main focus is to create the grid as you need it, and to transform the content in the left column of the grid relative to the column (rather than relative to the row).

Hopefully this helps get you closer, cheers!

HTML

<div class="row">
    <div class="left">
        <span class="h-text">LEFT</span>
    </div>
    <div class="right">RIGHT</div>
</div>

CSS

.row {
    width: 756px;
    height: 100px;
    border: 2px solid green;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.right {
    width: 80%;
    height: 100%;
    background: red;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.left {
    width: 20%;
    height: 100%;
    background: blue;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.left .h-text {
    position: absolute;
    transform: rotate(-90deg);
}

Ah, very much appreciated but I'm actually doing this in `react-native` so styling HAS to be done with JS. Nice approach though, appreciate you taking the time. — inhwrbp, Dec 14 '18 at 01:33
Yes, that is a different story than the many who run multiple `$('el').css('color', 'blue');` commands or even worse jQueries `animate` command. Since this is pure CSS you should be able to throw this it into css-in-js syntax or something equivalent that will render in react-native correct? For example: https://github.com/airbnb/react-with-styles — domdambrogia, Dec 14 '18 at 01:38

Roshan Gautam · Answer 3 · 2018-12-14T01:52:37.120

I implemented this way giving fixed height and some tweak with flex:

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

          <View
            style={{
              flex: 1,
              backgroundColor: 'aqua',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text>Some text here....</Text>
          </View>
        </View>
      </View>

Here is the link to snack if you want to play around. Might have extra unnecessary styles. You can play with it in the snack.

I hope, you got the idea?

https://snack.expo.io/@roshangm1/humiliated-cookies

score 0 · Answer 4 · answered Dec 14 '18 at 01:40

you could do this.

https://codepen.io/anon/pen/yGepmm

This is an aproach using flexbox. I use sass for clear syntax (no ; )

.sass

  div:first-child
    display: flex
    justify-content: center
    align-items: center
    transform: rotate(270deg)
    width: 100px
    background: blue
    color: white
    text-align: center
    vertical-align: middle

  div:nth-child(2)
    display: flex
    padding-left: 2rem
    background: lightgreen
    justify-content: start-end
    align-items: center
    color: grey
    height: 91px
    width: 100%

.html

<section>
<div>
  Value
</div>
<div>
  Lorem Ipsum
</div>
</section>

It's a very less code implementation, you will have to calculate for now, manually the:

height of div:first-child (which it's the width because the rotation).
And the height div:nth-child(2).

Hope this helps

Vertical text next to Horizontal Text react native?

4 Answers4

HTML

CSS