Lazy pager (js side)

[alpha0010]

Summary

Enables pages to be rendered on demand, instead of all at once. This is the JS specific changes. Several parts are commented out, awaiting the associated native changes.

Split from #279. Note that due to lack of native support (will be done in another pr), all pages prior to the current page will always be rendered. So starting in the middle/end of a large number of pages is not very efficient. Also, pager will not navigate to a page until the page is rendered (requires native support). This can lead to feeling stuck if swiping quickly through heavy pages.

Test Plan

What's required for testing (prerequisites)?

• Checkout of this branch (unmodified).
• Checkout of this branch, patched to show renders.

track-page-renders.patch

diff --git a/example/src/BasicPagerViewExample.tsx b/example/src/BasicPagerViewExample.tsx
index 48ad5a4..6c45a69 100644
--- a/example/src/BasicPagerViewExample.tsx
+++ b/example/src/BasicPagerViewExample.tsx
@@ -15,6 +15,17 @@ function keyExtractor(page: CreatePage) {
 }
 
 function renderItem({ item }: { item: CreatePage }) {
+  return <TrackingRender item={item} />;
+}
+
+function TrackingRender({ item }: { item: CreatePage }) {
+  React.useEffect(() => {
+    console.log(`didmout ${item.key}`);
+    return () => {
+      console.log(`didunmout ${item.key}`);
+    };
+  }, [item.key]);
+
   return (
     <View style={item.style}>
       <Image style={styles.image} source={item.imgSource} />

What are the steps to reproduce (after prerequisites)?

In the unmodified checkout, all examples should work the same as in master.

In the patched checkout, logs in metro should show the basic example is rendering pages incrementally, instead of all ahead of time. Optionally add the prop buffer={3} (or some other number) to the pager view to change the prerender distance.

Note that only the basic example has been converted to lazy loading. The other examples still use eager render (same as master).

Compatibility

OS	Implemented
iOS	✅
Android	✅

Checklist

• I have tested this on a device and a simulator
• I added the documentation in README.md
• I updated the typed files (TS and Flow)

[alpha0010]

@troZee These JS changes are ready for review.

[troZee]

I have left few comments. Also I checked it on emulators and it works.
Also I updated the next branch. Could you update your branch ?

I think, once you fix my comments, I will merge it.

[troZee]

https://github.com/callstack/react-native-pager-view/releases/tag/v6.0.0-rc.0