CODEWITHSUNDEEP
cssreact-nativeflexboxvertical-text
inhwrbp
inhwrbp

Reputation: 629

Vertical text next to Horizontal Text react native?

I am basically trying to create something like this:

enter image description here

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!

Upvotes: 3

Views: 12108

Answers (4)

Syph
Syph

Reputation: 1319

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: enter image description here

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

Upvotes: 15

Roshan Gautam
Roshan Gautam

Reputation: 510

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

Upvotes: 0

Yoarthur
Yoarthur

Reputation: 917

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

Upvotes: 0

domdambrogia
domdambrogia

Reputation: 2243

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);
}

Upvotes: 0

Related Questions