Nativescript Vertical Screen Slide / ViewPager

Question

What is the easiest way to implement a screen slide in Nativescript like shown in Android Viewpager , but in a vertical direction ? Another example of this functionality would be the rss reader feedly where you can change rss feeds by swiping up/down.

The page should allow vertical scrolling to the top/bottom and then transition after a certain treshold.

I already encountered nativescript-slides, which can only do horizontally sliding.

So is there a "nativescript" way or do i have to implement it as native android/ios feature (for example by this) ? In either case a sample on how to integrate it in nativescript would be great.

Update

Recorded an example:

taken from this Repo with Android native code. The outstanding PR made changes to offer vertical scrolling in the list. But the repo seems to be outdated and a bit buggy.

Answer 1

Anyone that ends up here still looking for ways to achieve this.

I spent a lot of time trying to figure out a way to achieve this and tried to find ready plugins for this. Also tried to use the plugin from Alexrainman but eventually gave up since the plugin was not up to date with the current nativescript-version.

My solution: I used radListView as a basis for this implementation and leveraged the methods and events on the radListView.

By using scrolled-event I gathered data for the use of the scrolling feature: scroll Speed and scroll direction. (These might be also taken from the event data, but since I did not find the event details from the Nativescript-documentation I gave up trying to guess where to find this data on the event-model).

Then I also saved the fixed height of one item on my list (The height I fixed to screenHeight-200).

With all this info, I managed to hook the event "ScrollDragEnded" and add logic that makes my list behave like a vertical slider. Moving on the list by method "scrollToIndex" and figuring out which index to scroll and when by leveraging all the data mentioned above.

This is the way I managed to make a pretty good vertical slide.

Good luck!

Answer 2

To give an answer for anybody interested in above nested scrolling animation:

For Android I had to implement the native ReyclerView in Nativescript in favor of the NS buildin ListView. It is an optimized view structure which among other things allows nested (vertical) scrolling and can be used as replacement for an ordinary list.

Together with https://github.com/alexrainman/nativescript-carousel-view works like a charm!

Answer 3

I can provide more info later but there's a new plugin implementing the native controls for android and iOS for slides/carousel her https://github.com/alexrainman/nativescript-carousel-view and vertical swiping is on his radar, I think he might even be close to completing that.