How to Make a Component Center Horizontal and Center Vertical in React Native

Aligning a component center horizontally and vertically is very easy to do in React Native. You have to assign two props to the parent view to get the desired result.

Use both the style props justifyContent and alignItems with the value ‘center‘ to make the component center to the parent view. The justifyContent prop aligns the child center vertically whereas the alignItems prop aligns the child center horizontally.

For example, in the code snippet given below, the text component is made to the center of the screen.

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

const Home = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 36,
  },
});

export default Home;

Following is the output of the above react native example.

That’s how you align an item center horizontal and vertical in react native.