Sometimes, we want to make a component float right with flexbox and React Native.

In this article, we’ll look at how to make a component float right with flexbox and React Native.

How to make a component float right with flexbox and React Native?

To make a component float right with flexbox and React Native, we can set justifyContent to 'space-between' and set textAlign to 'right'.

For instance, we write:

import * as React from 'react';
import { View, Text } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
      <Text>foo</Text>
      <Text style={{ textAlign: 'right' }}>bar</Text>
    </View>
  );
}

to set flexDirection to 'row' to set the flex direction to horizontal.

justifyContent is set to 'space-between' so we spread the child components in a row.

Next, we set textAlign to 'right' on the 2nd Text component to align the text to the right.

Conclusion

To make a component float right with flexbox and React Native, we can set justifyContent to 'space-between' and set textAlign to 'right'.