3

Using react native, a ScrollView can snap to respecified points on the y axis of the ScrollView element:

<ScrollView
snapToOffsets={[0,96]}

This will snap to 0 and to 96. It appears however that every subsequent snap point must also be declared.

Is there a way to snap to that point at 96 and then scroll normally without snap offsets from that point going down.

This behaviour can be done on the web with CSS but there is no clear documentation on how to do the same in react. Imagine a header that we want to snap underneath of on the first scroll and then scroll normally thereafter.

Walrus
  • 19,801
  • 35
  • 121
  • 199

2 Answers2

3

By default, the end of the list counts as a snap offset. Set snapToEnd to false to disable this behavior and allow the list to scroll freely between its end and the last snap offsets offset

you can set snapToEnd to false to disable this behavior

snapToEnd={false}

documentation

pfndesign
  • 174
  • 3
  • 12
1

Yes there is but it's not perfect. You can get it working as you would expect. The only issue with this solution is that when scrolling up is controlled by Momentum the snap is not triggering.

With this current limitation in mind, the trick is to use snapToInterval instead and then dynamically update the snapToInterval property onScroll.

Create a state in the constructor.

this.state= {
        staticScrollY: 0,
}

Add a listener to onScroll to track the scroll position.

listener: (event) => this.handleOnScroll(event.nativeEvent.contentOffset.y)

Create a function between the Constructor and the Render

handleOnScroll = event => {
        this.setState({
            staticScrollY: event,
        })
    }

User a ternary operator in the snapToInterval property with the amount you want the for the first snap and what the snap should be once greater than that amount.

snapToInterval={this.state.staticScrollY < 99 ? 98 : 0}

QED..

PS. added limitation with this solution on Momentum Scroll. If anyone can address that, please post.

Walrus
  • 19,801
  • 35
  • 121
  • 199
  • Thank you, I have implemented the same method but after one snap which is in my case the height of the screen, the scroll behaves oddly. It simply doesn't work smoothly. – enestatli Jan 21 '21 at 21:53
  • Without looking at your code I cannot be certain but when I asked this question I was still learning. I don’t remember whether the above was the final solution but I did have it working as expected. One thing that was important was to not have the state value changing dynamically on every single scroll event. This is both extremely expensive and probably the reason for it behaving oddly. You need to trigger the state change as few times as possible for example, when the direction changes or only at a scroll position where you know your snap is definitely going to different. Hope that helps. – Walrus Jan 23 '21 at 10:07
  • Thank you, I stop changing the state value after the snap to height. Here is the link to the code https://snack.expo.io/YBI6I-Plp – enestatli Feb 04 '21 at 15:03