CODEWITHSUNDEEP
react-native
goolius_boozler
goolius_boozler

Reputation: 253

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>
  );
};

Upvotes: 1

Views: 4756

Answers (3)

Shaik Salman
Shaik Salman

Reputation: 1

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.

Upvotes: 0

Sayo Komolafe
Sayo Komolafe

Reputation: 998

Try these:

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

check this out.

Upvotes: 1

Neeko
Neeko

Reputation: 1149

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>

Upvotes: 2

Related Questions