How to center an image in React Native

Question

Background

I have an image meant to be displayed while other content is loading.
I want it to be centered and look the same on all devices.

Problem

Currently, the image shows up at the top left.
I would like it to be centered – horizontally and vertically.

Question

What is the solution to make the image centered and have the right size?

---

The height of my image is 776 px, and the width is 600 px. I know I need to set the image size in the style sheet. From my understanding, I can use JSX to do this.

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

const logoImage = require('../assets/images/logo.jpg');

const LoadingScreen = () => (
  <View style={styles.container}>
    <Image style={styles.logo} source={logoImage} />
  </View>
);

const styles = StyleSheet.create({
  container: {
  },
  logo: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 300,
    height: 400,
  },
});

export default LoadingScreen;

Answer 1

You need to set the style of <View> for justifyContent and alignItems for centering the <Image>.

Should be like this :

const LoadingScreen = () => (
<View style={styles.container}>
    <Image
        style={styles.logo}
        source={logo}
    />
</View>
);

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 300,
    height: 400,
  },
});

Or you can use alignSelf on the <Image> to make it center, but it will still need to add justifyContent on <View> to make it center vertically.