How to center an image in React Native

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;

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.