'React native how to make an image take up full screen?

I have a component that when called should display an image for the whole screen of the phone. The issue is I cannot get the image centered. It is mostly off screen to the right with some barely visible. If anyone knows what I am doing wrong your help would be much appreciated. I am using react-native-image-zoom so the image can be zoomed on and swiped down to go away.

My image component:

const FullPicture = (props) => {
  return (
    <View style={{ height: '100%', width: '100%' }}>
      <ImageZoom
        cropWidth={Dimensions.get('window').width}
        cropHeight={Dimensions.get('window').height}
        enableSwipeDown
        onSwipeDown={() => props.closeImage()}
      >
        <Image
          style={{ height: props.picture.height, width: props.picture.width }}
          resizeMode={'cover'}
          source={{ uri: props.picture.uri }}
        />
      </ImageZoom>
    </View>
  );
};

react-native

Solution 1:^[1]

You need to use a Flexbox. Try to add flex: 1 to your Image's container:

<View style={{ flex: 1, height: '100%', width: '100%' }}>
  <ImageZoom> ... </ImageZoom>
</View>

Solution 2:^[2]

Try these:

set flex: 1 in your container view
use justifyContent: 'center'

check this out.

Solution 3:^[3]

I think this is the thing what you are looking for https://youtu.be/YRrji3BmHY4 you should use ImageBackground from react-native instead of react-native-image-zoom.

when you use ImageBackground don't forget resizeMode='contain' and styling the image, the image will not get off by any side.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Neeko
Solution 2	Oluwasayo Babalola
Solution 3	Shaik Salman

'React native how to make an image take up full screen?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]