Flatlist inside Carousel

[Jeyavijay]

Hi

I'm trying to implement a Flat list inside a carousel view. But if I try to load a data the app crashes here is the screenshot . Is there a way to implement like this screen.

Thanks in advance.

[kunalsolanki1992]

+1

I am not facing the error, but I can't use a FlatList/Swiper inside Carousel item.

I also tried using react-native-swipe-gestures library thinking that this might solve my issue.

[SpaghettiC0des]

I'm using FlatList inside my carousel, and it is working fine.

[mlkmte]

Hello, i have the same problem with the last version. What's the solution ? in the old version that's work fine because we had to create carousel page with "View" not with data array.

Thanks for reply

[SpaghettiC0des]

Hello, i have the same problem with the last version. What's the solution ? in the old version that's work fine because we had to create carousel page with "View" not with data array.

Thanks for reply

Can you share the code?

[mlkmte]

Hello, In old version my Carousel was in export component where i could pass two array data :

In my export component "" i have just to use this two array directly in page Carousel as i want and i can manage the number of page with View component :

      <Carousel
            ref={carousel}
            renderIndicator={({ currentPage, index }) => (
                <View
                    key={index}
                    style={{
                        width: 15,
                        height: 15,
                        borderRadius: 10,
                        marginTop: 10,
                        marginHorizontal: 5,
                        backgroundColor: currentPage === index ? "#36A9E1" : "#ccc",
                    }}
                />
            )}
        >
            <View style={styles.carouselContainer}>
                <FlatList
                    data={props.formations}
                    keyExtractor={item => item._id}
                    renderItem={({ item }) => (
                        <View style={styles.carouselItem}>
                            <View style={styles.containerIconInfo}>
                                <View style={styles.iconContainer}>
                                    <FontAwesomeIcon
                                        name="graduation-cap"
                                        style={styles.icon}
                                    ></FontAwesomeIcon>
                                </View>
                                <View style={styles.info}>
                                    <Text style={styles.jobName}>{item.formationId.nomFormation && item.formationId.nomFormation.length > 35 ? item.formationId.nomFormation.slice(0, 35) + '...' : item.formationId.nomFormation}</Text>
                                    <Text style={styles.jobCompany}>{item.formationId.nomEtablissement && item.formationId.nomEtablissement.length > 35 ? item.formationId.nomEtablissement.slice(0, 35) + '...' : item.formationId.nomEtablissement}, Paris</Text>
                                    <Text style={styles.jobYears}>
                                        {moment(item.formationId.dateDebut).format('MMMM YYYY')} - {moment(item.formationId.dateFin).format('MMMM YYYY')}
                                    </Text>
                                </View>
                            </View>
                        </View>
                    )}
                />
            </View>

            <View style={styles.carouselContainer}>
                <FlatList
                    data={props.experiences}
                    keyExtractor={item => item._id}
                    renderItem={({ item }) => (
                        <View style={styles.carouselItem}>
                            <View style={styles.containerIconInfo}>
                                <View style={styles.iconContainer2}>
                                    <FontAwesomeIcon
                                        name="briefcase"
                                        style={styles.icon}
                                    ></FontAwesomeIcon>
                                </View>
                                <View style={styles.info}>
                                    <Text style={styles.jobName2}>{item.experienceId.nomPoste && item.experienceId.nomPoste.length > 35 ? item.experienceId.nomPoste.slice(0, 35) + '...' : item.experienceId.nomPoste}</Text>
                                    <Text style={styles.jobCompany}>{item.experienceId.nomEntreprise && item.experienceId.nomEntreprise.length > 35 ? item.experienceId.nomEntreprise.slice(0, 35) + '...' : item.experienceId.nomEntreprise}, Paris</Text>
                                    <Text style={styles.jobYears}>
                                        {moment(item.experienceId.dateDebut).format('MMMM YYYY')} - {moment(item.experienceId.dateFin).format('MMMM YYYY')}
                                    </Text>
                                </View>
                            </View>
                        </View>
                    )}
                />
            </View>
        </Carousel >

[mlkmte]

nobody for help ?

[dohooo]

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