Photoshop Question posted in
The official user guide can be found here.

Center Image React Native Loading Screen – Photoshop

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;
Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    Set in view:

    justifycontent:center

    And in child: 

    alignself:center

    And perform in task.

    Login or Signup to reply.
  4. 0

    Set in parent view:

    justifycontent:center

    And in child set:

    alignself:center
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search