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,