How can you float: right in React Native?

Question

I have an element that I want to float right, for example

<View style={{width: 300}}>
  <Text style={{backgroundColor: "#DDD"}}>Hello</Text>
</View>

How can the Text be floated / aligned to the right? Also, why does the Text take up the full space of the View, instead of just the space for "Hello"?

I wonder if you found an answer because the top 3 answers all say to use 3 different style attributes! `justifyContent`, `alignItems`, `alignSelf`. I wonder which is correct. — , Sep 30 '18 at 20:41

Mark Amery · Accepted Answer · 2018-10-19T18:43:29.483

why does the Text take up the full space of the View, instead of just the space for "Hello"?

Because the View is a flex container and by default has flexDirection: 'column' and alignItems: 'stretch', which means that its children should be stretched out to fill its width.

(Note, per the docs, that all components in React Native are display: 'flex' by default and that display: 'inline' does not exist at all. In this way, the default behaviour of a Text within a View in React Native differs from the default behaviour of span within a div on the web; in the latter case, the span would not fill the width of the div because a span is an inline element by default. There is no such concept in React Native.)

How can the Text be floated / aligned to the right?

The float property doesn't exist in React Native, but there are loads of options available to you (with slightly different behaviours) that will let you right-align your text. Here are the ones I can think of:

1. Use `textAlign: 'right'` on the `Text` element

<View>
  <Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>

(This approach doesn't change the fact that the Text fills the entire width of the View; it just right-aligns the text within the Text.)

2. Use `alignSelf: 'flex-end'` on the `Text`

<View>
  <Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>

This shrinks the Text element to the size required to hold its content and puts it at the end of the cross direction (the horizontal direction, by default) of the View.

3. Use `alignItems: 'flex-end'` on the `View`

<View style={{alignItems: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

This is equivalent to setting alignSelf: 'flex-end' on all the View's children.

4. Use `flexDirection: 'row'` and `justifyContent: 'flex-end'` on the `View`

<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

flexDirection: 'row' sets the main direction of layout to be horizontal instead of vertical; justifyContent is just like alignItems, but controls alignment in the main direction instead of the cross direction.

5. Use `flexDirection: 'row'` on the `View` and `marginLeft: 'auto'` on the `Text`

<View style={{flexDirection: 'row'}}>
  <Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>

This approach is demonstrated, in the context of the web and real CSS, at https://stackoverflow.com/a/34063808/1709587.

6. Use `position: 'absolute'` and `right: 0` on the `Text`:

<View>
  <Text style={{position: 'absolute', right: 0}}>Hello, World!</Text>
</View>

Like in real CSS, this takes the Text "out of flow", meaning that its siblings will be able to overlap it and its vertical position will be at the top of the View by default (although you can explicitly set a distance from the top of the View using the top style property).

Naturally, which of these various approaches you want to use - and whether the choice between them even matters at all - will depend upon your precise circumstances.

None of these solutions work. :( My goal was to float a caption, and then the text coming from the left would go around it. Like this - https://stackoverflow.com/q/19179424/1828637 - So I was hoping to do: `FLOAT TEXTmulti line text here which wraps around float text`. Or same but with image like this: `multi line text which wrap around float image`. — Noitidart, Apr 05 '18 at 05:19
Thank you for the answer @Mark Amery! I really like the fifth (5th) approach as I don't like to set a constant for the View/container's height as it auto-size itself. — Monero Jeanniton, Oct 19 '18 at 17:53
No. 4 worked a treat for me. I suspect anyone having issues needs to look at how the View's are contained this can have a bearing on the flex layout of child elements. — Trevor, Dec 06 '19 at 14:59
Your answer is so detailed and full of great solutions, that it still holds up, 3 years after you gave it. Great job! — p-syche, Oct 10 '20 at 23:30

score 93 · Answer 2 · edited Dec 24 '17 at 15:10

93

You can directly specify the item's alignment, for example:

textright: {    
  alignSelf: 'flex-end',  
},

edited Dec 24 '17 at 15:10

Mark Amery

143,130
81
406
459

answered Sep 16 '16 at 06:14

goodhyun

4,814
3
33
25

3

@goodniceweb You're confused; there *are* no inline elements in React Native. The only valid [`display`](https://facebook.github.io/react-native/docs/layout-props.html#display) values are `'flex'` and `'none'`. – Mark Amery Dec 24 '17 at 15:10
3

does not work if parent is flexDirection: 'row' – Yusuf Jul 08 '21 at 06:04

score 36 · Answer 3 · answered Feb 01 '16 at 07:53

36

For me setting alignItems to a parent did the trick, like:

var styles = StyleSheet.create({
  container: {
    alignItems: 'flex-end'
  }
});

answered Feb 01 '16 at 07:53

Ivan Chernykh

41,617
13
134
146

score 21 · Answer 4 · edited Dec 24 '17 at 13:56

21

You are not supposed to use floats in React Native. React Native leverages the flexbox to handle all that stuff.

In your case, you will probably want the container to have an attribute

justifyContent: 'flex-end'

And about the text taking the whole space, again, you need to take a look at your container.

Here is a link to really great guide on flexbox: A Complete Guide to Flexbox

edited Dec 24 '17 at 13:56

Mark Amery

143,130
81
406
459

answered Aug 16 '15 at 12:50

eyal83

3,893
3
19
30

score 21 · Answer 5 · edited Dec 24 '17 at 15:06

21

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
  <Text>
  Some Text
  </Text>
</View>

flexDirection: If you want to move horizontally (row) or vertically (column)

justifyContent: the direction you want to move.

edited Dec 24 '17 at 15:06

Mark Amery

143,130
81
406
459

answered May 19 '17 at 04:59

Santosh Pillai

8,169
1
31
27

1

A bit misleading; [`justifyContent`](https://facebook.github.io/react-native/docs/layout-props.html#justifycontent) doesn't choose a *direction* per se; it offers a bunch of options about how things are positioned and spaced along the main flex direction. – Mark Amery Dec 24 '17 at 15:08

score 5 · Answer 6 · answered Jul 06 '21 at 16:09

5

Use flex: 1 and alignItems: 'flex-end' in View styling. Make sure to include flex: 1. That is the key to make the element float right

answered Jul 06 '21 at 16:09

Ritik Jain

143
1
6

score 3 · Answer 7 · answered Aug 29 '20 at 14:57

using flex

 <View style={{ flexDirection: 'row',}}>
                  <Text style={{fontSize: 12, lineHeight: 30, color:'#9394B3' }}>left</Text>
                  <Text style={{ flex:1, fontSize: 16, lineHeight: 30, color:'#1D2359', textAlign:'right' }}>right</Text>
               </View>

score 0 · Answer 8 · answered Jun 22 '18 at 05:43

0

You can float:right in react native using flex:

 <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>

for more detail: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction

answered Jun 22 '18 at 05:43

Jitendra Suthar

2,111
2
16
22

1

This just repeats an approach I'd already posted (it's option 4 in [my answer](https://stackoverflow.com/a/47961683/1709587)) and I don't see any added value. – Mark Amery Jul 20 '18 at 13:08

score 0 · Answer 9 · answered Jan 04 '23 at 13:46

0

You can just style the text with alignSelf: 'flex-end':

<View style={{width: 300}}>
  <Text style={{backgroundColor: "#DDD", alignSelf: 'flex-end'}}>Hello</Text>
</View>

answered Jan 04 '23 at 13:46

Alexie01

101
1
7

OGBO FRIDAY · Answer 10 · 2022-12-06T11:26:01.763

-1

const styles = StyleSheet.create({ flowRight: { flex:1, justifyContent: 'end', alignContent: 'end', }, });

Then call styles.flowRight in your style

edited Dec 06 '22 at 11:26

answered Sep 28 '21 at 07:23

OGBO FRIDAY

1
2

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 28 '21 at 07:47

How can you float: right in React Native?

10 Answers10

1. Use `textAlign: 'right'` on the `Text` element

2. Use `alignSelf: 'flex-end'` on the `Text`

3. Use `alignItems: 'flex-end'` on the `View`

4. Use `flexDirection: 'row'` and `justifyContent: 'flex-end'` on the `View`

5. Use `flexDirection: 'row'` on the `View` and `marginLeft: 'auto'` on the `Text`

6. Use `position: 'absolute'` and `right: 0` on the `Text`:

Linked

How can you float: right in React Native?

10 Answers10

1. Use textAlign: 'right' on the Text element

2. Use alignSelf: 'flex-end' on the Text

3. Use alignItems: 'flex-end' on the View

4. Use flexDirection: 'row' and justifyContent: 'flex-end' on the View

5. Use flexDirection: 'row' on the View and marginLeft: 'auto' on the Text

6. Use position: 'absolute' and right: 0 on the Text:

Linked

1. Use `textAlign: 'right'` on the `Text` element

2. Use `alignSelf: 'flex-end'` on the `Text`

3. Use `alignItems: 'flex-end'` on the `View`

4. Use `flexDirection: 'row'` and `justifyContent: 'flex-end'` on the `View`

5. Use `flexDirection: 'row'` on the `View` and `marginLeft: 'auto'` on the `Text`

6. Use `position: 'absolute'` and `right: 0` on the `Text`: