borderRadius не работает при каждой загрузке изображения в карусели изображений

Question

Я создал горизонтальную карусель изображений и хочу, чтобы все углы карусели были скруглены. borderRadius и overflow:'hidden', кажется, работают для изображений, но когда загружается следующее изображение, углы отображаются до тех пор, пока оно не будет загружено. Карусель настроена на загрузку последовательных изображений в al oop каждые 2 секунды.

Вот часть, которая отображает:

render() {
        const { selectedIndex } = this.state;
        return (
            <View
                style={{ height: '100%', width: '100%', borderRadius: 20 }}
                onLayout={event => {
                    this.setState({
                        carouselWidth: event.nativeEvent.layout.width
                    })
                }}
            >
                <ScrollView
                    horizontal
                    pagingEnabled
                    onMomentumScrollEnd={this.setSelectedIndex}
                    ref={this.scrollRef}
                    //contentContainerStyle={{ borderRadius: 20 }}
                >
                    {images.map(image => (

                        <Image
                            key={image}
                            source={image}
                            style={styles.backgroundImage}
                        />
                    ))}
                </ScrollView>
            </View >
        );
    }
}

const styles = StyleSheet.create({
    backgroundImage: {
        height: '100%',
        width: DEVICE_WIDTH,
        resizeMode: "stretch",
        borderRadius: 20,
        overflow: 'hidden',
    }
});