How to fix textAlign: ‘right’ not styling correctly with React Native?

Sometimes, we want to fix textAlign: ‘right’ not styling correctly with React Native.

In this article, we’ll look at how to fix textAlign: ‘right’ not styling correctly with React Native.

How to fix textAlign: ‘right’ not styling correctly with React Native?

To fix textAlign: ‘right’ not styling correctly with React Native, we can set textAlign to 'right' on the Text component in addition to using flexbox.

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={{ flex: 1, flexDirection: 'row' }}>
      <View style={{ flex: 1 }}>
        <Text>100 Views 0 Comments</Text>
      </View>
      <View style={{ flex: 1 }}>
        <Text style={{ textAlign: 'right' }}>View</Text>
      </View>
    </View>
  );
}

to set flexDirection to 'row' to let us display the inner views side by side.

Then we set textAlign to 'right' on the 2nd Text component to align the text of that on the right.

Conclusion

To fix textAlign: ‘right’ not styling correctly with React Native, we can set textAlign to 'right' on the Text component in addition to using flexbox.