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

Last Updated on December 11, 2020.

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 props justifyContent and alignItems with 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.

center items react native

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

Leave a Reply

%d bloggers like this: