CODEWITHSUNDEEP
react-nativescrollviewgesture
dev-jim
dev-jim

Reputation: 2524

react native scrollview horizontal swipe left or right on tap

I am showing pictures gallery in full screen mode. I am using scrollview in horizontal for scrolling the pictures. Right now I can scroll the pictures by swiping left or right and I using the pagingEnabled enabled props.

But I want to add more gesture, where when user tap on left or right ( a distance from the edge) , it will automatically mapping the swapping gesture. How can I do this?

Upvotes: 1

Views: 9953

Answers (2)

Maxence Machu
Maxence Machu

Reputation: 330

I assume your scroll view looks like this with pagingEnabled and horizontal props. 

<ScrollView
   horizontal={true}
   pagingEnabled={true}
   onMomentumScrollEnd={event => {
      this.setState({xOffset: event.nativeEvent.contentOffset.x })
   }}>
      // Content 
</ScrollView>

The position can be calculated with :

this.state.xOffset/ DeviceSize.width

onMomentumScrollEnd is called each time you scroll an item in the ScrollView

(the content must be full width in this case)

Upvotes: 2

Noitidart
Noitidart

Reputation: 37288

Get a ref to the <ScrollView> then to scrollToEnd() or use scrollTo methods - https://facebook.github.io/react-native/docs/scrollview.html#scrollto

To calculate page number, you would use onLayout to calculate sizes of your pages. If it's the width of the device then that's easy, just use Dimensions.get('window').width then feed that to the x in scrollTo.

Upvotes: 0

Related Questions