Not able to show carousel containing images inside a flatlist.

[M-Affan283]

As the title states, I am trying to display my images inside the carousel and the carousel itself is the renderItem of the Flatlist. Any help would be appreciated ASAP.

<SafeAreaView className="flex-1 bg-primary h-full">
            <FlatList
                data={tempPosts}
                keyExtractor={item => item._id}
                renderItem={({item}) => (
                    <SafeAreaView className="flex-1 items-center justify-center">
                        <Text className="text-white">{item.caption}</Text>
                        <Carousel 
                            data={item.mediaUrls}
                            width={430}
                            renderItem={({item}) => (
                                <Image source={{uri: item}} style={{width: 430, height: 430}} />
                            )}
                        />
                        
                    </SafeAreaView>
                )}
            />
</SafeAreaView>

Reproduction
1- Create a Flatlist from react-native and an array of objects containing {id,caption,mediaUrls}
2- Inside the renderItem function of the Flatlist create a Carousel component with its data being the mediaUrls of the data fed into the Flatlist.
3- Run the app on android. You will see that images are not displayed. Only the caption is there.

Describe the bug
As you can see I'm trying to display the images inside the carousel which is part of a flatlist but the images don't display.

Expected behavior
The screen should display a Flatlist of posts which contain the images inside a carousel.

Screenshots

Versions:

• react: v18.2.0
• react-native: v0.74.5
• react-native-reanimated: v3.10.1
• react-native-reanimated-carousel: v4.0.0-alpha.12
• react-native-gesture-handler: v2.16.1

[dosubot]

Hey there, @M-Affan283! I'm here to help you with your code issues and questions. Let's take a look at what's going on with your carousel and get it sorted out.

When using react-native-reanimated-carousel inside a FlatList, there is a known issue where the carousel can suppress the scroll gesture handler of the FlatList. To address this, you can adjust the activeOffsetX of the gesture handler to ensure that the unused axis does not impede the scroll of the list. You can do this by using the onConfigurePanGesture prop of the Carousel component. Here's how you can modify your code:

<SafeAreaView className="flex-1 bg-primary h-full">
    <FlatList
        data={tempPosts}
        keyExtractor={item => item._id}
        renderItem={({item}) => (
            <SafeAreaView className="flex-1 items-center justify-center">
                <Text className="text-white">{item.caption}</Text>
                <Carousel 
                    data={item.mediaUrls}
                    width={430}
                    renderItem={({item}) => (
                        <Image source={{uri: item}} style={{width: 430, height: 430}} />
                    )}
                    onConfigurePanGesture={gestureChain => (
                        gestureChain.activeOffsetX([-10, 10])
                    )}
                />
            </SafeAreaView>
        )}
    />
</SafeAreaView>

This adjustment should help in resolving the issue with the images not displaying inside the carousel when used within a FlatList ^[1].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[M-Affan283]

The pan gesture is not the issue. The issue is that images are not being displayed at all. The fix you described is not related to the problem at all.