Float: right in React Native

[Src: https://stackoverflow.com/questions/32030050/how-can-you-float-right-in-react-native]

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

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

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

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

  3. Use alignItems: 'flex-end' on the View
    <View style={{alignItems: 'flex-end'}}>
    Hello, World!

  4. Use flexDirection: 'row' and justifyContent: 'flex-end' on the View
    <View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
    Hello, World!

  5. Use flexDirection: 'row' on the View and marginLeft: 'auto' on the Text
    <View style={{flexDirection: 'row'}}>
    <Text style={{marginLeft: 'auto'}}>Hello, World!

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

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

comments powered by Disqus