Using Components in a Carousel

Question

I am trying to implement a carousel in such that each item is a component in a separate file. For example...

I have Welcome.js, Welcome1.js, and Welcome2.js.

I would like to be able to swipe between each of those components. I have provided a snack demo here that reproduces my issue exactly as well as some code below.

export default class App extends React.Component {

  render() {
    //const data=[<Welcome/>, <Welcome1/>]
    return(
    <View style={{backgroundColor: '#e6e6e6', flex:1, justifyContent: 'center', alignItems: 'center',  }}>
      <Carousel
        ref={(c) => { this._carousel = c; }}
        //data={data}
      />
      <Text style={{fontSize: 20}}>I would like to render a carousel that can swipe between the two components</Text>
    </View>
    );
  }
}

score 1 · Accepted Answer · answered Nov 07 '22 at 09:43

It can be done with something like this -

_renderItem = ({ item, index }) => {
  if (index === 0) {
    return <Welcome />;
  } else if (index === 1) {
    return <Welcome1 />;
  }
}

<Carousel
  ref={(c) => { this._carousel = c; }}
  data={[0,1]} // or Array(2).fill(0)
  renderItem={this._renderItem}
  sliderWidth={300}
  itemWidth={300}
/>

Using Components in a Carousel

1 Answers1