How to set absolute positioning horizontal center with React Native?

Sometimes, we want to set absolute positioning horizontal center with React Native.

In this article, we’ll look at how to set absolute positioning horizontal center with React Native.

How to set absolute positioning horizontal center with React Native?

To set absolute positioning horizontal center with React Native, we can set the position and flexbox styles.

For instance, we write:

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

const App = () => {
  return (
    <View
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Centered text</Text>
    </View>
  );
};
export default App;

to set the position of the view to 'absolute' to add absolute positioning.

Then we set top, left, right, and bottom to 0 to set the position,

And then we set justifyContent and alignItems to 'center' to center align horizontally and vertically respectively.

Conclusion

To set absolute positioning horizontal center with React Native, we can set the position and flexbox styles.