search

race604 / react-native-viewpager

[Deprecated] ViewPager component for React Native
1.41k stars 373 forks source link

Use ViewPagerAndroid #124

Open mkonicek opened 7 years ago

mkonicek commented 7 years ago

This library should be using ViewPagerAndroid under the hood to get look&feel consistent with the platform.

Emulating paging in JS leads to a bad user experience that feels non-native.

joshjhargreaves commented 7 years ago

@mkonicek: it's worth considering that doing this in JS allows us to be more flexible perhaps in some cases.

One example, ViewPagerAndroid and RCTScrollView don't support infinite looping natively. It is possible to give add this through JS (see https://github.com/leecade/react-native-swiper), but it's implemented in a way that leads to needing an extra copy of your 'edge' pages. JS allows you to be more flexible in this instance.

joshjhargreaves commented 7 years ago

@mkonicek: I've done some more thinking. I was wrong about JS providing more flexibility. I think there's zero reasons why this component couldn't maintain the same API but use ScrollView with paging on IOS and ViewPagerAndroid on Android.

mikelambert commented 7 years ago

Those libraries typically involve laying out and rendering all the pages upfront, while react-native-viewpager only renders the previous/current/next pages, and so works much better for pagers with large numbers of elements or cases where you care about performance (android).

It's might be possible to create a 1-to-3 element ViewPagerAndroid/ScrollView under the hood, in which pages are swapped in/out by react-native-viewpager to avoid rendering too much, with proper keys from the datasource to ensure consistent UI reuse. But I'm unclear how well it'd work, and I'm not sure I'd go so far as making proclamations about "should be using" and "zero reasons". :)

joshjhargreaves commented 7 years ago

I made a proof of concept, and it seems to work fairly well. https://getexponent.com/@joshyhargreaves/Infinite-View-Pager https://gist.github.com/joshyhargreaves/e5e8c1b8664d9e9329212721c78f13c3

mikelambert commented 7 years ago

Ahha great, that looks like it does exactly what I just described. Let me know if you attempt the tricky aspects of integrating it into this project, I'd be interested in trying it out.

joshjhargreaves commented 7 years ago

'Zero reasons' was a bit of a proclamation, I'm sorry!

Do you think it'd be best to introduce this feature behind a flag to begin with? Sure, I'll let you know. I should have some time to give creating a PR a go in the next week!

braco commented 7 years ago

This is implemented in the unfortunately named: https://github.com/zbtang/React-Native-ViewPager

But <ScrollView pagingEnabled={true}> has been in android since RN 0.28, is there a reason to do anything else?