meliorence / react-native-snap-carousel

Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.
BSD 3-Clause "New" or "Revised" License
10.32k stars 2.28k forks source link

Orientation change with Parallax #785

Open Alejolas opened 3 years ago

Alejolas commented 3 years ago

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 (

);

};

return (

); };

export default Photos; `

So i looks like this when vertical: Screenshot_1606512124

Pretty good, but when I rotate the device:

Screenshot_1606512134

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 commented 3 years ago

Having same issue

dohooo commented 2 years ago

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 commented 6 months ago

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 commented 6 months ago

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 :(