Image is not fitting to full screen in iOS

Question

I am using react-native-image-viewer to render images and code looks like this

   <View style={{flex: 1}}>
        <ImageViewer 
             imageUrls={images}
             renderImage={() => <Image style={{height: '100%', width: '100%'}} resizeMode={'contain'} source={{uri:`${axios.defaults.baseURL}${url}`, headers}} />}
             enableImageZoom={true}
             backgroundColor={TEXT_HEADERBLACK}
             maxOverflow={0}
             renderIndicator={() => <></>}
        />
    </View>

Result of this code is as follows in iOS

As you can see, Image is not fitting to entire screen. But in android it's occupying entire screen.

Do I have do any styling changes to make it occupy entire screen?

Answer 1

Ran the following code as a snack and it seemed fine on my device. Though I removed the renderImage prop.

import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';

const images = [{
    // Simplest usage.
    url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',

    // width: number
    // height: number
    // Optional, if you know the image size, you can set the optimization performance

    // You can pass props to <Image />.
    props: {
        // headers: ...
    }
}, {
    url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
}]
// test

export default function App() {
  return (
   <View style={{flex: 1}}>
        <ImageViewer 
             imageUrls={images}
             enableImageZoom={true}
             backgroundColor={'#ffffff'}
             maxOverflow={0}
             renderIndicator={() => <></>}
        />
    </View>
  );
}

const styles = StyleSheet.create({

});

Can you possibly link the image you are using above?

Answer 2

My understanding of <Image> on iOS requires absolute values instead of relative values. You can also add a conditional rendering based on the platform your app is running on.

const {
  width: deviceWidth,
  height: deviceHeight,
} = Dimensions.get('window');

<Image
  style={{
    height: Platform.OS === 'ios' ? deviceHeight * 0.9 : '100%',
    width: Platform.OS === 'ios' ? deviceWidth * 0.9 : '100%'
  }}
  resizeMode={'contain'}
  source={{uri:`${axios.defaults.baseURL}${url}`, headers}}
/>