React native Question posted in
The official React Native documentation can be found here.

Center an image using absolute position in React Native

I’m new to React, and am trying to center an <Image /> component within a larger <View />, per below:

import { Image, View } from 'react-native';

<View
  style={{
    width: 48,
    height: 48,
    alignSelf: "center",
    justifyContent: "center",
    alignItems: "center",
    position: "relative",
  }}
>
  <Image
    style={{
      width: 32,
      height: 32,
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      margin: "auto",
    }}
    source={spinner}
  />
</View>;

But instead of being centered, it is positioned on top left within <View />.

The above css would have worked in HTML, but what am I missing for React Native? Btw I have to use absolute position for the Image to overlay on other components inside <View />.

Thank you,

Tags:

3

Answers


  1. 0

    Adding this on your child element along with absolute will solve the issue.
    top: ‘50%’,
    left: ‘50%’,
    transform: "translate(-50%, -50%)"

    <SafeAreaView>
      <View
          style={{
            width: 48,
            height: 48,
            alignSelf: "center",
            justifyContent: "center",
            alignItems: "center",
            position: "relative",
            borderColor: '#000',
            borderWidth: 1
          }}
        >
          <Image
            style={{
              width: 32,
              height: 32,
              position: "absolute",
              top: '50%',
              left: '50%',
              transform: "translate(-50%, -50%)"
            }}
            source={{uri: 'image_url_here'}}
          />
        </View>
    </SafeAreaView>
    Login or Signup to reply.
  2. 0

    You’ve assigned top and left values to 0 which positions it to top-left.

    This should work:

    <Image
  style={{
    width: 32,
    height: 32,
    position: "absolute",
    margin: "auto",
  }}
  source={spinner}
/>
    Login or Signup to reply.
  3. 0

    I think the easiest would be to think of a new View as your overlay instead of the Image itself.

      return (
    <View
      style={{
        width: 48,
        height: 48,
        alignSelf: "center",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {/* Overlay */}
      <View
        style={{
          ...StyleSheet.absoluteFillObject,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Image
          style={{
            width: 32,
            height: 32,
          }}
          source={spinner}
        />
      </View>
    </View>
  );

    If the alignSelf, justifyContent, and alignItems on the parent View were added for the Image, they can be removed.

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

Back To Top
Search