[Android] Carousel Rendering Lag on Initial Load (All Modes Affected, iOS Works Fine)

[sanju280696]

I'm experiencing a noticeable delay in rendering items on Android when using the component — even with the default mode. On iOS, the items render immediately and smoothly. This issue occurs regardless of the carousel mode (e.g., default, horizontal-stack, etc.).

`<Carousel
ref={ref}
defaultIndex={1}
autoPlay={true}
autoPlayInterval={5000}
snapEnabled={true}
pagingEnabled={true}
data={property}
windowSize={1}
onProgressChange={progress}
defaultScrollOffsetValue={scrollOffsetValue}
onConfigurePanGesture={gesture =>
gesture.activeOffsetX([-20, 20])
}
onSnapToItem={index => setActiveIndex(index + 1)}
customConfig={() => ({ type: 'positive', viewCount: 3 })}
renderItem={_renderItem}
/>

const _renderItem = useCallback(
({ item }: { item: PropertyDetailsData }) => {
return <View style={{ backgroundColor: 'blue', height: 100 }} />;
},
[]
);`

Actual Behavior:

iOS: Fast and smooth rendering as expected.

Android: Initial render is delayed, showing a blank space or causing noticeable lag before items appear.

Environment Info:

Carousel library: [please specify exact package name and version, e.g., react-native-reanimated-carousel@4.0.2]

React Native version: [e.g., 0.77.1]

Platforms tested: Android (issue), iOS (working fine)

Troubleshooting Tried:

Verified renderItem is memoized via useCallback.

Tried adjusting windowSize, pagingEnabled, and mode.

Issue persists across different carousel modes and even minimal render logic.

[dosubot]

Android initial render lag in this carousel is a known pain point, and while there isn’t a single root cause, a few patterns have emerged from community reports and code review. Unnecessary re-renders of the carousel or its children can cause flickering or lag—using React.memo or useMemo for both the carousel and its children is recommended, even if your renderItem is already minimal. Double-check that your parent components aren’t triggering re-renders on mount as well. Some configuration props—like loop, autoFillData, scrollAnimationDuration, pagingEnabled, snapEnabled, and overscrollEnabled—can also impact performance if not tuned for your use case. Try toggling these to see if any combination improves initial load on Android [source].

If you’re using FlatList or other heavy components inside renderItem, only render them when their slide is visible and use a placeholder otherwise; this workaround has helped others with similar lag issues [source].

The codebase is designed to work cross-platform, but subtle differences in layout measurement and virtualization between Android and iOS can cause Android to lag on first render. There are no explicit Android-specific errors in the code, but reviewing your usage of windowSize and virtualization-related props may help. If you’re on a recent version, make sure you’re not hitting any known issues with mode or custom animation props.

If you can share your exact package and React Native versions, it may help pinpoint if you’re hitting a version-specific bug.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[tonynhox7]

same

[LoadJulz]

I have the same issue. On my old devices it seems a bit laggy for the first second.

[sanju280696]

I have the same issue. On my old devices it seems a bit laggy for the first second.

I'm experiencing a noticeable lag the first time the screen/component is mounted.

[rahulnainwalttn]

➕1

[LoadJulz]

Is this maybe related to #660?

[krisnapy]

I’m also running into this Android initial render lag issue - works fine on iOS but there’s a noticeable blank/lag on first mount in Android.

Any updates or solution for this issue?

[ilyasssan2]

@krisnapy any news on this one

[timoisalive]

UPDATE: Nevermind the below report, the lag was due to many components among the Carousel being rendered simultaneously in a FlatList. Once I remove the other components, the Carousel renders immediately.

I'm getting a fairly consistent 700ms lag between rendering the carousel and the first item on iOS simulator. Here's my simplified code:

import type { FC } from 'react';

import { View } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';

export const HeroCarousel: FC = () => {
  console.log('Rendering HeroCarousel:', Date.now() / 1000);

  return (
    <Carousel
      data={['asd', 'asd', 'asd']}
      height={300}
      renderItem={() => {
        console.log('Rendering HeroCard:', Date.now() / 1000);

        return (
          <View style={{ width: 100, height: 100, backgroundColor: 'red' }} />
        );
      }}
      width={300}
    />
  );
};

and the logging for this:

 LOG  Rendering HeroCarousel: 1761203804.824
 LOG  Rendering HeroCard: 1761203805.515
 LOG  Rendering HeroCard: 1761203805.516
 LOG  Rendering HeroCard: 1761203805.517

Am I missing something here..? I also tried to set all animation durations to zero, if that would have something to do with it, but no luck there.

We are on version 4.0.3.

[AlexCernik]

I'm getting a fairly consistent 700ms lag between rendering the carousel and the first item on iOS simulator. Here's my simplified code:

Hi @timoisalive, Were you able to fix it?