title: Center Image React Native Loading Screen
body: <p><strong>Background</strong></p>
  
  <p>I have an image placed on a screen meant to show when the screen loads other content. </p>
  
  <p>I want to center the image so it is always center on all devices. </p>
  
  <p><strong>Problem</strong></p>
  
  <p>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. </p>
  
  <p><strong>Question</strong></p>
  
  <p>What is the solution to make sure the image is always centered and the right size for all devices? </p>
  
  <p>Example, </p>
  
  <p>My current code, </p>
  
  <p>In Photoshop</p>
  
  <p>Image is 300 Resolution
  Height is 776 px
  Width is 600 px</p>
  
  <p>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. </p>
  
  <pre><code>import React from 'react';
  import {
    StyleSheet,
    View,
    Image,
  } from 'react-native';
  
  const logo = require('../images/logo.jpg');
  
  const LoadingScreen = () =&gt; (
      &lt;View&gt;
          &lt;Image
              style={styles.logo}
              source={logo}
          /&gt;
      &lt;/View&gt;
  );
  
  const styles = StyleSheet.create({
      logo: {
          justifyContent: 'center',
          alignItems: 'center',
          width: 300,
          height: 400,
      },
  });
  
  export default LoadingScreen;
  </code></pre>