I'm currently working on a scroll component that resembles a gallery of images. My goal is to center the images based on the device height with equal padding on both the top and bottom. However, I'm facing an issue where the top padding does not look consistent across different devices. I would appreciate any assistance in achieving a uniform appearance on all devices.
To retrieve the height and width of the device, I am utilizing the Dimension API.
const {width: screenWidth, height: screenHeight} =
Dimensions.get('window');
const width = screenWidth;
const height = screenHeight;
<View style={styles.DefaultView}>
<ScrollView
maximumZoomScale={1}
minimumZoomScale={1}
bouncesZoom={true}
style={styles.scrollView}
automaticallyAdjustContentInsets={true}
pagingEnabled={true}
horizontal={true}
showsHorizontalScrollIndicator={false}
onScroll={this._onScroll}
contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}}
>
{images.map((row, i) => (
<View key={i}>
<Image
resizeMode='contain'
style={{width, height}}
source={{uri: row.src}}
/>
</View>
))}
</ScrollView>
</View>
const styles = StyleSheet.create({
scrollView: {
flex: 1,
flexDirection: 'row',
},
DefaultView: {
flex: 1,
backgroundColor: '#000',
},
});
Please view the image linked here for the current output https://i.stack.imgur.com/vKYqt.png