How can you swim: right in React Native?

Question

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

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

How can Text be placed / aligned to the right? Also, why does Text take up the full View space and not just the space for "Hello"?

Answer 1

why does the text occupy the entire presentation space and not just "Hello"?

Since View is a flexible container and by default has flexDirection: 'column' and alignItems: 'stretch' , this means that its child alignItems: 'stretch' must be stretched to fill its width.

(Note that for Docs , all components in React Native are display: 'flex' by default and display: 'inline' . Doesn’t exist at all. Therefore, the default behavior for Text inside a View in React Native is different from the default behavior for span within the div within the network, in the latter case, the span will not fill the width of the div because the span is a built-in element by default. There is no such thing in React Native.)

How can text be moved / aligned right?

The float property does not exist in React Native, but there are many options available to you (with slightly different behavior) that will allow you to align the text to the right. Here are the ones I can think of:

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

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

(This approach does not alter the fact that Text fills the entire width of the View ; it right justifies the text in Text .)

2. Use alignSelf: 'flex-end' for Text

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

This shrinks the Text element to the size needed to hold its contents and places it at the end of the transverse direction (horizontal direction, by default) from the View .

3. Use alignItems: 'flex-end' in View

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

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

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

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

flexDirection: 'row' sets the main direction of the layout as horizontal rather than vertical; justifyContent similar to alignItems , but controls alignment in the main direction, not in the transverse direction.

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

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

This approach is demonstrated in the context of the Internet and real CSS at https://stackoverflow.com/a/212632/2/16 .

6. Use position: 'absolute' and right: 0 in Text :

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

As in real CSS, this takes Text out of the stream, which means that its siblings will be able to overlap it, and its vertical position will default to the top of the View (although you can explicitly set the distance from the top). from View using the top style property).

---

Naturally, which of these various approaches you want to use - and whether the choice between them is important at all - will depend on your specific circumstances.

Answer 2

You can directly specify the alignment of an element, for example:

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

Answer 3

For me, setting alignItems for the parent did the trick, for example:

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

Answer 4

You should not use float in React Native. React Native uses flexbox to handle all this.

In your case, you probably want the attribute in the container

 justifyContent: 'flex-end' 

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

Here is a link to the really great flexbox guide: The Complete Flexbox Guide

Answer 5

 <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.

Answer 6

A more detailed explanation in this link to githum https://github.com/Awadhesh786/ReactNativeExample/blob/master/src/screen/Texts.js click on the link on github

Answer 7

You can use float: right according to 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 details: https://facebook.imtqy.com/react-native/docs/flexbox.html#flex-direction