[RN 0.81][Testing] Carousel items not rendered in tests

[vicprz]

Describe the bug
Since updating to Expo SDK 54 / React Native 0.81, carousel items no longer render in tests.
I tried upgrading to react-native-reanimated-carousel@5.0.0-beta.0, but it didn’t make any difference.

Before the update, I was using react-native-reanimated-carousel@4.0.3 with Expo SDK 53 / React Native 0.79, and carousel items were rendered correctly in tests.

I also tried using the combination of react-native-reanimated-carousel@4.0.3 and Expo SDK 54 / React Native 0.81, but it didn’t change anything.

To Reproduce
Steps to reproduce the behavior:

1. Go to: https://github.com/vicprz/expo-54-test-issue/tree/carousel-issue
2. Run: yarn test -u
3. Open: __snapshots__/App.test.tsx.snap
4. Observe: the carousel wrapper is present (testID='carousel'), but carousel items are missing (testID={`carousel-item-${item}`})

Expected behavior
Carousel items should be rendered in tests, as was the case before the update.

Screenshots
N/A

Versions (please complete the following information):

• react: v19.1.0
• react-native: v0.81.4
• react-native-reanimated: v4.1.3
• react-native-reanimated-carousel: v5.0.0-beta.0
• react-native-gesture-handler: v2.28.0
• @testing-library/react-native: 13.3.3
• jest: 29.7.0
• jest-expo: 54.0.12

Smartphone (please complete the following information):
N/A

Additional context
N/A

[dosubot]

Hi @vicprz! I'm Dosu and I’m helping the react-native-reanimated-carousel team.

This issue is caused by how react-native-reanimated-carousel relies on Reanimated hooks (like useAnimatedReaction and useDerivedValue) and shared values to determine which carousel items are rendered. In test environments, especially after upgrading to Expo SDK 54 / React Native 0.81, these hooks often don't execute as expected because the native animation infrastructure is missing or the Jest mock for Reanimated isn't fully compatible with the new versions. As a result, the logic that triggers item rendering never runs, so carousel items don't appear in tests—even though the wrapper does.

There are no explicit test-environment checks or fallbacks in the carousel code, so this is a limitation of how Reanimated and the carousel interact with the test environment after recent upgrades. The same problem occurs with both v4 and v5 of the carousel, and upgrading to the latest versions of dependencies doesn't resolve it [source].

To work around this, you may need to patch your test setup with a more advanced Reanimated mock that simulates the behavior of shared values and animated reactions, or consider using a test-mode compatibility layer that bypasses the animation logic for tests. There is currently no official workaround or patch in the library itself for this scenario.

To reply, just mention @dosu.

---

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

[thomasviaud]

Same issue for me

[Arthur-Noh]

In my case, the carousel is not rendered after updating packages.

This issue seems to be caused by the latest dependency versions.
Even though I’m using react-native-reanimated-carousel@3.5.1 (not v5), the same issue still occurs.

carousel rendered correctly:

react-native 0.81.5  
react-native-reanimated-carousel 3.5.1  
react-native-gesture-handler 2.28.0  
react-native-reanimated 3.19.3  
react-native-screens 4.17.1  
@react-navigation/bottom-tabs 7.4.9  
@react-navigation/stack 7.4.10  
@react-navigation/native 7.1.18

carousel not rendered

react-native 0.81.5  
react-native-reanimated-carousel 3.5.1  
react-native-gesture-handler 2.29.1 <
react-native-reanimated 3.19.3 
react-native-screens 4.18.0 <
@react-navigation/bottom-tabs 7.8.2 <
@react-navigation/stack 7.6.2 <
@react-navigation/native 7.1.19 <

I believe the main factors causing this issue are related to react-native-reanimated, react-native-gesture-handler, and react-native itself.
However, I also included the versions of the navigation libraries just in case they might be related.

[nawafthedistance]

@vicprz Would you try replacing

<Carousel .... style={styles.carouselContainer} />

with

<View style={styles.carouselContainer> <Carousel ... /> </View>

?

I had a rendering issue when I moved from Paper to Fabric Architecture, and this is what fixed it for me.