Orientation change with Parallax

[Alejolas]

Is this a bug report, a feature request, or a question?

Question

Hello all! I'm trying to implement a carousel with some images and be ale to render them. I've followed the steps and succeed implementing a Parallax carousel. But thing is, when I rotate the device, the imagen don't resize. I've tried everything I tried to reproduce the steps on the Tips Readme on how to handle rotation but no luck, I had to transform those instructions to SFC and Hooks but no luck.

Heres my code it's almost identical to the example, but trust me I've tried everything to fix this problem with no luck:

` import React, { useRef, useState, useEffect } from 'react'; import Carousel, { ParallaxImage } from 'react-native-snap-carousel'; import { View, Dimensions } from 'react-native'; import style from './style'; import colors from '../../common/colors';

const ENTRIES1 = [ { title: 'Beautiful and dramatic Antelope Canyon', subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur', illustration: 'https://i.imgur.com/UYiroysl.jpg', }, { title: 'Earlier this morning, NYC', subtitle: 'Lorem ipsum dolor sit amet', illustration: 'https://i.imgur.com/UPrs1EWl.jpg', }, { title: 'White Pocket Sunset', subtitle: 'Lorem ipsum dolor sit amet et nuncat ', illustration: 'https://i.imgur.com/MABUbpDl.jpg', }, { title: 'Acrocorinth, Greece', subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur', illustration: 'https://i.imgur.com/KZsmUi2l.jpg', }, { title: 'The lone tree, majestic landscape of New Zealand', subtitle: 'Lorem ipsum dolor sit amet', illustration: 'https://i.imgur.com/2nCt3Sbl.jpg', }, ]; const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

const Photos = () => { const [entries, setEntries] = useState([]); const carouselRef = useRef(null);

useEffect(() => { setEntries(ENTRIES1); }, []);

const renderItem = ({ item }, parallaxProps) => { return ( <View style={style.item}> <ParallaxImage source={{ uri: item.illustration }} containerStyle={style.imageContainer} style={style.image} parallaxFactor={0.4} {...parallaxProps} showSpinner spinnerColor={colors.red} /> </View> ); };

return ( <View style={style.container}> <Carousel ref={carouselRef} itemWidth={screenWidth} sliderWidth={screenWidth} itemHeight={screenHeight} sliderHeight={screenHeight} data={entries} renderItem={renderItem} hasParallaxImages /> </View> ); };

export default Photos; `

So i looks like this when vertical:

Pretty good, but when I rotate the device:

Environment

Environment: "react": "16.13.1", "react-native": "0.63.3", "react-native-snap-carousel": "^3.9.1",

Target Platform: Android (9.0) iOS (13.0)

Thanks!!

[CDBridger]

Having same issue

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

[Dr0pG]

Same here. Can someone help us on this topic, please? If i try to place a onLayout on the View parent around the Carousel, it has a delay on the return of the values so the size will update very late :(

[Dr0pG]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

Didn't work for me :(