Skip to content

Commit bd0a058

Browse files
alpha0010troZee
alpha0010
and
troZee
authored
feat(js): lazy pager (#326)
* chore: fix package dependency definition * feat: draft js lazy view renderer * fix: excessive renders when wrapped as animated component * fix: reduce likelihood of becoming stuck on fast paging with small buffer * chore: add lazy pager example * docs: change wording Co-authored-by: troZee <[email protected]> Co-authored-by: troZee <[email protected]>
1 parent 24f0405 commit bd0a058

19 files changed

+486
-53
lines changed

‎example/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { NavigationContainer, useNavigation } from '@react-navigation/native';
44
import { createStackNavigator } from '@react-navigation/stack';
55
import { BasicPagerViewExample } from './BasicPagerViewExample';
66
import { KeyboardExample } from './KeyboardExample';
7+
import { LazyPagerViewExample } from './LazyPagerViewExample';
78
import { OnPageScrollExample } from './OnPageScrollExample';
89
import { OnPageSelectedExample } from './OnPageSelectedExample';
910
import { ScrollablePagerViewExample } from './ScrollablePagerViewExample';
@@ -14,6 +15,7 @@ import PaginationDotsExample from './PaginationDotsExample';
1415
const examples = [
1516
{ component: BasicPagerViewExample, name: 'Basic Example' },
1617
{ component: KeyboardExample, name: 'Keyboard Example' },
18+
{ component: LazyPagerViewExample, name: 'Lazy Render Example' },
1719
{ component: OnPageScrollExample, name: 'OnPageScroll Example' },
1820
{ component: OnPageSelectedExample, name: 'OnPageSelected Example' },
1921
{ component: HeadphonesCarouselExample, name: 'Headphones Carousel Example' },

‎example/src/BasicPagerViewExample.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useMemo } from 'react';
22
import { StyleSheet, View, SafeAreaView, Animated, Text } from 'react-native';
33

4-
import PagerView from 'react-native-pager-view';
4+
import { PagerView } from 'react-native-pager-view';
55

66
import { LikeCount } from './component/LikeCount';
77
import { NavigationPanel } from './component/NavigationPanel';
@@ -10,7 +10,7 @@ import { useNavigationPanel } from './hook/useNavigationPanel';
1010
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
1111

1212
export function BasicPagerViewExample() {
13-
const { ref, ...navigationPanel } = useNavigationPanel();
13+
const { ref, ...navigationPanel } = useNavigationPanel<PagerView>();
1414

1515
return (
1616
<SafeAreaView style={styles.container}>

‎example/src/HeadphonesCarouselExample.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
ImageRequireSource,
1818
} from 'react-native';
1919
import type { PagerViewOnPageScrollEventData } from 'src/types';
20-
import PagerView from 'react-native-pager-view';
20+
import { PagerView } from 'react-native-pager-view';
2121

2222
const data = [
2323
{

‎example/src/KeyboardExample.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
Animated,
1212
} from 'react-native';
1313
import { Colors } from 'react-native/Libraries/NewAppScreen';
14-
import PagerView from 'react-native-pager-view';
14+
import { PagerView } from 'react-native-pager-view';
1515
import { logoUrl } from './utils';
1616

1717
import { NavigationPanel } from './component/NavigationPanel';
@@ -37,7 +37,7 @@ const Page = ({ title, description, onPress, buttonTitle }: PageProps) => {
3737
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
3838

3939
export function KeyboardExample() {
40-
const { ref, ...navigationPanel } = useNavigationPanel(2);
40+
const { ref, ...navigationPanel } = useNavigationPanel<PagerView>(2);
4141
const { setPage } = navigationPanel;
4242
return (
4343
<SafeAreaView style={styles.flex}>

‎example/src/LazyPagerViewExample.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from 'react';
2+
import { Image, StyleSheet, View, SafeAreaView, Animated } from 'react-native';
3+
4+
import { LazyPagerView } from 'react-native-pager-view';
5+
6+
import { LikeCount } from './component/LikeCount';
7+
import { NavigationPanel } from './component/NavigationPanel';
8+
import { useNavigationPanel } from './hook/useNavigationPanel';
9+
import type { CreatePage } from './utils';
10+
11+
const AnimatedPagerView = Animated.createAnimatedComponent(LazyPagerView);
12+
13+
function keyExtractor(page: CreatePage) {
14+
return `${page.key}`;
15+
}
16+
17+
function renderItem({ item }: { item: CreatePage }) {
18+
return (
19+
<View style={item.style}>
20+
<Image style={styles.image} source={item.imgSource} />
21+
<LikeCount />
22+
</View>
23+
);
24+
}
25+
26+
export function LazyPagerViewExample() {
27+
const { ref, ...navigationPanel } = useNavigationPanel<
28+
LazyPagerView<unknown>
29+
>();
30+
31+
return (
32+
<SafeAreaView style={styles.container}>
33+
<AnimatedPagerView
34+
ref={ref}
35+
style={styles.PagerView}
36+
initialPage={0}
37+
overdrag={navigationPanel.overdragEnabled}
38+
scrollEnabled={navigationPanel.scrollEnabled}
39+
onPageScroll={navigationPanel.onPageScroll}
40+
onPageSelected={navigationPanel.onPageSelected}
41+
onPageScrollStateChanged={navigationPanel.onPageScrollStateChanged}
42+
pageMargin={10}
43+
// Lib does not support dynamically orientation change
44+
orientation="horizontal"
45+
// Lib does not support dynamically transitionStyle change
46+
transitionStyle="scroll"
47+
showPageIndicator={navigationPanel.dotsEnabled}
48+
data={navigationPanel.pages}
49+
keyExtractor={keyExtractor}
50+
renderItem={renderItem}
51+
/>
52+
<NavigationPanel {...navigationPanel} />
53+
</SafeAreaView>
54+
);
55+
}
56+
57+
const styles = StyleSheet.create({
58+
container: {
59+
flex: 1,
60+
backgroundColor: 'white',
61+
},
62+
image: {
63+
width: 300,
64+
height: 200,
65+
padding: 20,
66+
},
67+
PagerView: {
68+
flex: 1,
69+
},
70+
});

‎example/src/OnPageScrollExample.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { StyleSheet, Text, View, SafeAreaView, Animated } from 'react-native';
3-
import PagerView from 'react-native-pager-view';
3+
import { PagerView } from 'react-native-pager-view';
44
import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
55
import { ProgressBar } from './component/ProgressBar';
66
import { useNavigationPanel } from './hook/useNavigationPanel';
@@ -9,7 +9,7 @@ import { NavigationPanel } from './component/NavigationPanel';
99
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
1010

1111
export function OnPageScrollExample() {
12-
const { ref, ...navigationPanel } = useNavigationPanel(5);
12+
const { ref, ...navigationPanel } = useNavigationPanel<PagerView>(5);
1313
const { activePage, setPage, progress, pages } = navigationPanel;
1414

1515
return (

‎example/src/OnPageSelectedExample.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
Animated,
1010
} from 'react-native';
1111

12-
import PagerView from 'react-native-pager-view';
12+
import { PagerView } from 'react-native-pager-view';
1313
import { NavigationPanel } from './component/NavigationPanel';
1414
import { useNavigationPanel } from './hook/useNavigationPanel';
1515

@@ -19,7 +19,10 @@ export const OnPageSelectedExample = () => {
1919
const callback = React.useCallback((position: number) => {
2020
Alert.alert('Hey', `You are on ${position + 1} page`);
2121
}, []);
22-
const { ref, ...navigationPanel } = useNavigationPanel(10, callback);
22+
const { ref, ...navigationPanel } = useNavigationPanel<PagerView>(
23+
10,
24+
callback
25+
);
2326

2427
return (
2528
<SafeAreaView style={styles.flex}>

‎example/src/PaginationDotsExample.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import {
77
Animated,
88
Dimensions,
99
} from 'react-native';
10-
import PagerView, {
10+
import {
11+
PagerView,
1112
PagerViewOnPageScrollEventData,
1213
} from 'react-native-pager-view';
1314

‎example/src/ScrollViewInsideExample.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import PagerView from 'react-native-pager-view';
1+
import { PagerView } from 'react-native-pager-view';
22
import React from 'react';
33
import { useState } from 'react';
44
import { View, StyleSheet, Button, ScrollView, Animated } from 'react-native';

‎example/src/ScrollablePagerViewExample.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import PagerView from 'react-native-pager-view';
1+
import { PagerView } from 'react-native-pager-view';
22
import React from 'react';
33
import { ScrollView, View, Image, StyleSheet, Animated } from 'react-native';
44
import { NavigationPanel } from './component/NavigationPanel';
@@ -9,7 +9,7 @@ const HEIGHT = 300;
99
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
1010

1111
export const ScrollablePagerViewExample = (): JSX.Element => {
12-
const { ref, ...navigationPanel } = useNavigationPanel();
12+
const { ref, ...navigationPanel } = useNavigationPanel<PagerView>();
1313

1414
return (
1515
<>

0 commit comments

Comments
 (0)