react-native-viewpager icon indicating copy to clipboard operation
react-native-viewpager copied to clipboard

Use ViewPagerAndroid

Open mkonicek opened this issue 9 years ago • 7 comments

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.

mkonicek avatar Dec 22 '16 13:12 mkonicek

@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 avatar Dec 29 '16 12:12 joshjhargreaves

@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.

joshjhargreaves avatar Dec 29 '16 17:12 joshjhargreaves

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". :)

mikelambert avatar Jan 09 '17 08:01 mikelambert

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

joshjhargreaves avatar Jan 09 '17 08:01 joshjhargreaves

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.

mikelambert avatar Jan 09 '17 08:01 mikelambert

'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!

joshjhargreaves avatar Jan 09 '17 09:01 joshjhargreaves

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?

braco avatar Jan 27 '17 17:01 braco