Question 313756 in React native Question posted in
The official React Native documentation can be found here.

How can I center a component on the screen in React Native?

I’m having trouble centering a component on the screen using React Native. I’ve tried a few approaches, such as using justifyContent and alignItems, but haven’t been able to achieve the desired result.

My current code looks something like this:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text>My Component</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    // Styles to center the component on the screen
    // I've tried justifyContent, alignItems, but without success
  },
});

export default App;

Could someone provide me with a simple solution to center this component on the screen? I appreciate it in advance!"

Tags:

3

Answers


  1. 0

    Change your styling to the following

    const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: "100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  },
});

    The width and height property is needed in order for your application to know how large the View has to be.

    Login or Signup to reply.
  2. 0

    Use the below style in your StyleSheet component

    const styles = StyleSheet.create({
    container: {
    flex:1,
    justifyContent: "center",
    alignItems: "center"
    },
    });

    Login or Signup to reply.
  3. 0

    You will need to set this as your styling

    const styles = StyleSheet.create({
   container: {
       flex: 1, // Allows the container to take up the entire available space
       justifyContent: "center", // Aligns children elements along the primary axis (horizontal) at the center
       alignItems: "center" // Aligns children elements along the cross-axis (vertical) at the center
    },
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search