Center Image React Native Loading Screen

Answer :

You need to set the style of <View> for justifyContent andalignItemsfor centering the`.

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.

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 view:

justifycontent:center 

And in child:

alignself:center 

And perform in task.