How to move tapped item to center in carousel

[skyshine999]

I am using this plugin, i have 6 items and kept in carousel. After tapping on any item it should come to center. I don't know how to implement this feature. code:

<Carousel
          ref={(c) => { this._carousel = c; }}
          data={this.props.entries}
          renderItem={this._renderItem}
          onSnapToItem={this.handleSnapToItem}
          sliderWidth={sliderWidth}
          itemWidth={itemWidth}
          layout={'default'}
          onLayout={() => {
            this._carousel.snapToItem(this.state.activeSlide);
          }}
        />

<View onPress={ () => {
                                   this.setState({
                                     activeSlide: index
                                   })></View>

 handleSnapToItem = () => {
    // console.log("snapped to ", index);
    this._carousel.snapToItem(this.state.activeSlide);
  }

[NicholasBertazzonAga]

I think it's a snapToItem problem, it doesn't work for me anymore.

Check this out - https://github.com/archriss/react-native-snap-carousel/pull/617

[GuillaumeSarfati]

1 View don't use onPress 2 Remove the props onSnapToItem from the Carousel component

3 follow this quick steps

If you want to center the item when you touch it, you just need to add a

_renderItem = ({item, index}) => (
  <TouchabaleOpacity onPress={() => this._carousel.snapToItem(index)}>
    // your code here
  </TouchableOpacity>
)

I hope it was helpful !

[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