Center Image React Native Loading Screen

Question

Background

I have an image placed on a screen meant to show when the screen loads other content.

I want to center the image so it is always center on all devices.

Problem

Currently the image shows up top center. I would like it to be aligned vertically as well. Also to be sure that it will always look the same on all devices.

Question

What is the solution to make sure the image is always centered and the right size for all devices?

Example,

My current code,

In Photoshop

Image is 300 Resolution Height is 776 px Width is 600 px

I want the image to be centered horizontally and vertically in all devices and look good without pixelating. Natively I know I need to set the image sizes. But from my understanding in React Native I can use on image but then use JSX to handle it being responsive.

import React from 'react'; import {   StyleSheet,   View,   Image, } from 'react-native';  const logo = require('../images/logo.jpg');  const LoadingScreen = () => (     <View>         <Image             style={styles.logo}             source={logo}         />     </View> );  const styles = StyleSheet.create({     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.