I am using react-native-snap-carousel and I thought what I have now would be enough to implement it but I am obviously missing something. I have posted a snack expo here reproducing exactly what I am attempting as well as some code below.
Thank you for any insight at all, I appreciate it more than you know.
export default class App extends React.Component {
state = {
coordinates: [
{name: 'TappRoom', },
{name: 'The Ale House', },
{name: 'Boone Saloon',},
{name: 'Ransom',},
],
}
renderCarouselItem = ({item}) => {
<View style={styles.cardContainer}>
<Text style={styles.name}>{item.name}</Text>
</View>
}
render(){
return (
<View style={styles.container}>
<Carousel
ref={(c) => { this._carousel = c; }}
data={this.state.coordinates}
renderItem={this.renderCarouselItem}
sliderWidth={Dimensions.get('window').width}
itemWidth={300}
removeClippedSubviews={false}
/>
</View>
);
}
}
CodePudding user response:
You missed return
. Change your code to this
renderCarouselItem = ({item}) => {
return <View style={styles.cardContainer}>
<Text style={styles.name}>{item.name}</Text>
</View>
}