React-Native-Swiper images Overflow ONLY ON ANDROID

345 Views Asked by At

I have a problem with react-native-swiper on Android ONLY. The same code works for iOS!

Below is an image of what is happening:

enter image description here

The area is blue is supposed to be a square and all images should be within it. Something like this (I only render 1 image here):

enter image description here

This is what my code looks like:

    renderSwiper = () => {
        const images = this.props.data.item[1].images;
        let swiperImages = images.map((image, index) => {
            let priority = FastImage.priority.normal;
            if (index === 0)
                priority = FastImage.priority.high;
            return (
                <TouchableWithoutFeedback key={index} onPress={this.routeToListingDetails} >
                    <FastImage
                        style={styles.imageStyle}
                        source={{uri: image, priority: priority}}
                    />
                </TouchableWithoutFeedback>
            )
        })
        return (
            <View style={{ aspectRatio: 1, width: '100%'}}>
                <Swiper 
                    loop={false} 
                    paginationStyle={styles.swiperPaginationStyle}
                >
                    {swiperImages}
                </Swiper>
            </View>
        );
    }

    render(){
        return (
            <View style={styles.container} >

                <View style={{ borderColor: 'blue', borderWidth: 2 }}>
                    {this.renderSwiper()}
                </View>

            </View>
        )
    }

const styles = StyleSheet.create({
    container:{
        width:'50%',
        alignItems:'center',
        marginBottom:'4%',
        padding:'2%',
    },
    imageStyle:{
        resizeMode: "cover",
        width: "100%",
        aspectRatio:1
    }
})
0

There are 0 best solutions below