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"?

User · Answer

For me setting alignItems to a parent did the trick  like   var styles   StyleSheet create     container        alignItems   flex-end

User · Answer

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   lt View gt     lt Text style   textAlign   right    gt Hello  World  lt  Text gt   lt  View gt     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   lt View gt     lt Text style   alignSelf   flex-end    gt Hello  World  lt  Text gt   lt  View gt    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   lt View style   alignItems   flex-end    gt     lt Text gt Hello  World  lt  Text gt   lt  View gt    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   lt View style   flexDirection   row   justifyContent   flex-end    gt     lt Text gt Hello  World  lt  Text gt   lt  View gt    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   lt View style   flexDirection   row    gt     lt Text style   marginLeft   auto    gt Hello  World  lt  Text gt   lt  View gt    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    lt View gt     lt Text style   position   absolute   right  0   gt Hello  World  lt  Text gt   lt  View gt    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

User · Answer

lt View style    flex  1  flexDirection   row   justifyContent   flex-end     gt     lt Text gt    Some Text    lt  Text gt   lt  View gt    flexDirection  If you want to move horizontally  row  or vertically  column   justifyContent  the direction you want to move

User · Answer

You can directly specify the item s alignment  for example   textright          alignSelf   flex-end

User · Answer

You can float right in react native using flex     lt View style   flex  1  flexDirection   row    gt           lt View style   width  50  height  50  backgroundColor   powderblue      gt           lt View style   width  50  height  50  backgroundColor   skyblue      gt           lt View style   width  50  height  50  backgroundColor   steelblue      gt   lt  View gt    for more detail  https   facebook github io react-native docs flexbox html flex-direction

User · Answer

using flex   lt View style    flexDirection   row     gt                     lt Text style   fontSize  12  lineHeight  30  color   9394B3     gt left lt  Text gt                     lt Text style    flex 1  fontSize  16  lineHeight  30  color   1D2359   textAlign  right     gt right lt  Text gt                  lt  View gt

User · Answer

you can use following these component to float right

alignItems aligns children in the cross direction. For example, if children are flowing vertically, alignItems controls how they align horizontally.

alignItems: 'flex-end'

justifyContent aligns children in the main direction. For example, if children are flowing vertically, justifyContent controls how they align vertically.

justifyContent: 'flex-end'

alignSelf controls how a child aligns in the cross direction,

alignSelf : 'flex-end'

User · Answer

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

[react-native] How can you float: right in React Native?

The answer is

Examples related to react-native

Tags