if high number of slides scrolling/sliding not working properly

[maghamvinod]

No description provided.

[dosubot]

Hey there @maghamvinod! Long time no see in the issue realm. Hope you're doing well amidst all the coding adventures! 😄👋

Based on the issues you've described, it seems like you're encountering performance issues when dealing with a high number of slides in the react-native-reanimated-carousel component. This is a common challenge when dealing with large lists of data in React Native.

One of the solutions suggested in a similar issue #207 is to set a value for the windowSize prop. This prop helps in rendering just a couple of elements of any large list, keeping a good frame rate. The user found better results giving it a value between 3 -> 5. You might want to try this with your own implementation and compare it against the base use case.

Another approach to handle this issue is to implement a lazy loading mechanism. The react-native-reanimated-carousel provides a LazyView component that can be used to only render the slides that are currently in view or near the view, thus reducing the load and potentially fixing the scrolling or sliding issues.

Here's an example of how you might modify a carousel item to use LazyView:

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import { LazyView } from './LazyView'; // Adjust the import path as necessary

// Example carousel item component
const CarouselItem = ({ index, isActive }) => {
  // isActive is a prop to determine if this item is currently active (visible)
  return (
    <LazyView shouldUpdate={isActive}>
      <View>
        <Text>Slide {index}</Text>
      </View>
    </LazyView>
  );
};

export default CarouselItem;

In this example, isActive would be a prop passed to each CarouselItem based on the carousel's current index and the item's index. You would need to implement the logic to calculate isActive based on the carousel's behavior and pass it accordingly.

The LazyView component in the react-native-reanimated-carousel codebase is designed to conditionally render its children based on the shouldUpdate prop. If shouldUpdate is true, it renders its children. If shouldUpdate is false, it renders nothing (an empty fragment). This behavior allows for optimization by preventing unnecessary rendering of components that do not need to be updated. You can find more about this in the LazyView.tsx file.

Please try these solutions and let me know if they help resolve your issue. If not, could you provide more specific details about your implementation for further assistance?

Sources

• Can't implement infinite scrolling.
• Carousel items not moving
• Can not swiping normally on Android
• image sliding not smooth when have a lot of images
• src/components/LazyView.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[maghamvinod]

I used windowsize property also, but not exact animation is coming. If I scroll to next views the previous slides also coming.

[maghamvinod]

Hi,
I tried window size 3,5 but what happening is the previous widows coming after 5th slide also

[maghamvinod]

Hi @dohooo ,

any update on this. Only android side having issue. Ios side it is fine.