Center Image React Native Loading Screen

The View container should have styling as

flexDirection: 'column'
justifyContent: 'center'
alignItems: 'center'
height: '100%'

The height makes sure it spans throughout the page, thus making the image become both vertically and horizontally aligned.

For the image size, I think using percentage will do the trick instead of defining definite width/height.

Set in parent view:

justifycontent:center

And in child set:

alignself:center

Set in view:

justifycontent:center

And in child:

alignself:center

And perform in task.

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.