How to align content to the right in React Native?

Sometimes, we want to align content to the right in React Native.

In this article, we’ll look at how to align content to the right in React Native.

How to align content to the right in React Native?

To align content to the right in React Native, we can use flexDirection and justifyContent.

For instance, we write:

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Text } from 'react-native-paper';

const MyComponent = () => {
  return (
    <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
      <Text>Hello World!</Text>
    </View>
  );
};

export default MyComponent;

to set the style prop of the View to { flexDirection: 'row', justifyContent: 'flex-end' }.

Now we see that ‘Hello World!’ is displayed at the right end of the screen.

Conclusion

To align content to the right in React Native, we can use flexDirection and justifyContent.