React-native-gesture-handler: custom scrollview with gesture handler and reanimated

[pribeh]

We're looking to make a vertical swipable scrollview with gesture handler and reanimated for fullscreen list items (ala Tiktok type navigation). Has anybody done this before? And would it be wise to attempt this with gesture handler and reanimated or is there a better approach? We were thinking of taking Interactable.js and using it as follows:

• use the snappoints for as the start point for each item
• use snappoint index for the list index
• use velocity to detect fling gestures and permit users to swipe multiple items at a time

[osdnk]

I don't know if building ScrollView from scratch is a good idea. This components are very platform-specific and has very subtle config which might be hard to reproduce. Also it might change with versions of iOS and Android.
I tried to make it as well and didn't manage to provide anything which might imitate UX of native ScrollView.
However, if you will manage to do it, it would be extremely great and help in various ways (e.g. I wanted to make custom bottom sheet component and build own scrollView was one of scenarios for achieving it).

[pribeh]

@osdnk thanks! I'll close this for now. If we manage to work this out, we'll share the code via a pull request.

[osdnk]

https://github.com/osdnk/scroll-imitate

Feel free to help me to do it better :)

[pribeh]

@osdnk That's wicked. I'll play around with it later today and see if what I can do.

[osdnk]

The main thing is to make this vals https://github.com/osdnk/react-native-scroll-view-imitate/blob/master/App.js#L21 close to native.

[pribeh]

Thanks @osdnk! We've taken a look at the code. We have a few suggestions to make with the velocity but it seems to be working quite well.

What we're wondering is how would you would go about implementing snap points with a flatlist for instance?

You have this here:

  snapTo = index => {
    if (!this.props.enabledManualSnapping) {
      return;
    }
    this.manuallySetValue.setValue(this.state.snapPoints[this.state.propsToNewIncides[index]]);
    this.isManuallySetValue.setValue(1);
  };

Would we pass the render items from a flatlist into this? Or, would we pass this into flatlist as a replacement scrollview, then pass this index as props into Flatlist and go from there?

[osdnk]

It's doable. A made it because I was preparing for releasing https://github.com/osdnk/reanimated-bottom-sheet and I was my main idea. But I'll consider it. Also, I'm thinking about releasing reanimated-scroll-view for more complex customizations as you mentioned. But now I do not have a lot of time so maybe you'd like to help?

[pribeh]

Sure, what would you like us to take a stab at and what pointers can you give us

[pribeh]

We're basically looking to achieve what you see in the video:

https://www.dropbox.com/s/hw0l1bv85r6v79g/swipe-scroll.mov?dl=0

Regular RN scrollview can handle doing this on iOS but not at all on Android. Hence, why we're attempting to use RNGH and RNR to achieve this.

[osdnk]

@pribeh Doable. Instead of snapping to index you might snap to point.

I think you might try this:
https://github.com/osdnk/react-native-scroll-view-imitate/blob/feadab303ba05c875ddc4f1b4685ae1a55124c3b/App.js from this commit. It's the last commit when the name of the repo was matching with content.
and customize in a way you want. If you'd like, send it later and I'll probably release it soon as a lib :)

[pribeh]

@osdnk thanks. I'll try to see what I can do.

[wibb36]

@osdnk Could you share a quick video of the bottom sheet you made. I could probably help with that.

I didn't have time to try your code but I think it's doable using Reanimated and Interactable without any scrollview and It will feel so smooth on any iOS or Android

[wibb36]

Same goes for you @pribeh with TickTok Vertical Swiper. I just downloaded the app and this can easily be achieved with Interactable. Let me know what you've done so far

[pribeh]

@wibb36 we gave it a shot but couldn't figure out how to add snap points properly. We didn't make much progress that's worth sharing. We'd love to get this going as we need it. I'll take another stab on the weekend.

[pribeh]

Still can't figure this one out – I'm not well enough versed with GH and reanimated yet. @wibb36 let me know if you take a stab at it.

[osdnk]

This issue appears to be inactive.