Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ScrollView : How to reproduce snapToInterval and snapToAlignment for Android?

I'm looking for a way to scroll my horizontal menu at a specific interval.

I have multiple children visible on screen

I have multiple children visible on screen

The selected state is at center.

The use of snapToInterval in combination with snapToAlignement fills exactly my needs, but these props are only for iOS.

Is there a way to achieve this ? I suppose the PanResponder API could be use but I have no clue how to implement it.

I use 0.28 RN version. Thanks.

<ScrollView
  decelerationRate={0}
  horizontal
  snapToAlignment="center"
  snapToInterval={150}
>
  {this.props.children}
</ScrollView>
like image 291
Yupichaks Avatar asked Jul 01 '16 10:07

Yupichaks


1 Answers

There is a pull request regarding this issue: https://github.com/facebook/react-native/pull/15297

Also there is a library https://github.com/machadogj/react-native-carousel-control?files=1 that support for both Android and iOS swipe, it control the scrolling behaviour itself, but I tried it, it worked, but not that smooth compared with snapToInterval and snapToAlignment.

Another one, but more complex carousel swipe is here: https://github.com/archriss/react-native-snap-carousel

Hopefully, you will get more insights based on these.

like image 89
Kevin Li Avatar answered Sep 17 '22 07:09

Kevin Li