Output multiple diverse elements with react-native-snap-carousel?

Question

I am trying to build a Carousel using react-native-snap-carousel found here: https://github.com/archriss/react-native-snap-carousel. However, the examples that I have found so far only showcase one way: if you want to output the same format over and over again. For example you have a list of images that you want to show on cards that the user can navigate by scrolling or swiping.

However, I want to build something that has: 1st screen: list/text 2nd screen: map 3rd screen: grid of buttons

The current code that I've come up with (after multiple trial and error) and mostly copied online is the following: (it only shows the item1 item2 item3 item4 on different pages, without any variation in the outputs of the items in the carousel)

export default class App extends React.Component {

constructor(props){
    super(props);
    this.state = {
      region: this.getInitialState(),
        carouselItems: [
        {
            title:"Item 1"
        },
        {
            title:"Item 2"
        },
        {
            title:"Item 3"
        },
        {
            title:"Item 4"
        },
        {
            title:"Item 5"
        }
    ]}
}

getInitialState() {
  return {
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  };

}

_renderItem({item,index}){
    return (
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
            <Text style={{color:'#fff'}} >{item.title}</Text>

        </View>
    )
}

render() {
    return (
    <SafeAreaView style={styles.container}>



        <Carousel
                data={this.state.carouselItems}
                sliderWidth={250}
                itemWidth={250}
                renderItem={this._renderItem}
            >
            <MapView style={styles.map}
            region={this.state.region}
            onRegionChange={this.onRegionChange}
            />
            </Carousel>


    </SafeAreaView>
    );
}

}

A previous carousel npm that I used allowed to show the different views in different elements of the carousel, just like I did with the above, but it does not seem to work.

Let me know if this needs more explanation!

Answer 1

This is what I did:

Lets say I have a data set:

const DATA = [
    {
        title: "Book Title"
    }, 
    { 
        author: "John Smith"
    }
]

I have two sample functional components. One represents the first card item of the Carousel (displays the title of a book) , the other represents the second card item of the Carousel (displays the author of the book)

    const Title = ({item}) => {
        <View>
            <Text>The title of this book is {item?.title}</Text>
        </View>
    }

    const Author = ({item}) => {
        <View>
            <Text>The Author of this book is {item?.author}</Text>
        </View>
    }

Create a _renderItem function that holds a conditional statement on what is displayed at the carousel's index and what data needs to be defined in order to render this view component.

    _renderItem = ({item, index}) => {
        return (
          <>
          { item?.title && index === 0 && (
          <>
          <Title item={item}/>
          </>
          )}
          { item.author && index === 1 && (
          <>
          <Author item={item}/>
          </>
          )}
          </>
        )
     }

In your carousel component make sure that your data set is the value in the data prop and "this._renderItem" is the value of the renderItem prop. You should be good to go after this.