Skip to content

Commit 2db55d7

Browse files
jgonetjgonet
authored
Organize examples (#1587)
1 parent 175bbee commit 2db55d7

File tree

27 files changed

+154
-166
lines changed

27 files changed

+154
-166
lines changed

‎examples/Example/babel.config.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ module.exports = {
1919
'fbjs': './node_modules/fbjs',
2020
'hoist-non-react-statics': './node_modules/hoist-non-react-statics',
2121
'invariant': './node_modules/invariant',
22-
'prop-types': './node_modules/prop-types',
2322
},
2423
},
2524
],

‎examples/Example/ios/Podfile.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -524,4 +524,4 @@ SPEC CHECKSUMS:
524524

525525
PODFILE CHECKSUM: 445d514b4108c196c5095ef88ba37292b547818b
526526

527-
COCOAPODS: 1.10.1
527+
COCOAPODS: 1.10.2

‎examples/Example/metro.config.js

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,17 @@ const path = require('path');
44
const glob = require('glob-to-regexp');
55

66
function getBlacklist() {
7+
const rootDir = path.resolve(__dirname, '../..')
8+
const currentDir = path.resolve(__dirname)
79
const nodeModuleDirs = [
8-
glob(`${path.resolve(__dirname, '../..')}/node_modules/*`),
9-
glob(`${path.resolve(__dirname, '../..')}/e2e/*`),
10-
glob(`${path.resolve(__dirname)}/node_modules/*/node_modules/fbjs/*`),
10+
glob(`${rootDir}/node_modules/*`),
11+
glob(`${rootDir}/e2e/*`),
12+
glob(`${currentDir}/node_modules/*/node_modules/fbjs/*`),
1113
glob(
12-
`${path.resolve(
13-
__dirname
14-
)}/node_modules/react-native/node_modules/@babel/*`
14+
`${currentDir}/node_modules/react-native/node_modules/@babel/*`
1515
),
1616
glob(
17-
`${path.resolve(
18-
__dirname
19-
)}/node_modules/*/node_modules/hoist-non-react-statics/*`
17+
`${currentDir}/node_modules/*/node_modules/hoist-non-react-statics/*`
2018
),
2119
];
2220
return blacklist(nodeModuleDirs);

‎examples/Example/src/App.tsx

Lines changed: 125 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,182 +1,173 @@
11
import React from 'react';
2-
import { Text, View, FlatList, StyleSheet, ScrollView } from 'react-native';
2+
import { Text, View, StyleSheet, SectionList, Platform } from 'react-native';
33
import {
44
createStackNavigator,
55
StackScreenProps,
66
} from '@react-navigation/stack';
77
import { NavigationContainer, ParamListBase } from '@react-navigation/native';
8-
import { RectButton } from 'react-native-gesture-handler';
9-
10-
import Rows from './rows';
11-
import Bouncing from './bouncing';
12-
import Draggable from './draggable';
13-
import Multitap from './multitap';
14-
import ScaleAndRotate from './scaleAndRotate';
15-
import SwipeableTable from './swipeable';
16-
import doubleScalePinchAndRotate from './doubleScalePinchAndRotate';
17-
import PagerAndDrawer from './pagerAndDrawer';
18-
import HorizontalDrawer from './horizontalDrawer';
19-
import PanAndScroll from './panAndScroll';
20-
import Fling from './fling';
21-
import PanResponder from './panResponder';
22-
import DoubleDraggable from './doubleDraggable';
23-
import ForceTouch from './forcetouch';
24-
import BottomSheet from './bottomSheet';
25-
import { TouchablesIndex, TouchableExample } from './touchables';
26-
import { ComboWithGHScroll, ComboWithRNScroll } from './combo';
27-
import ChatHeads from './chatHeads';
8+
import {
9+
GestureHandlerRootView,
10+
RectButton,
11+
} from 'react-native-gesture-handler';
12+
import DoublePinchRotate from './release_tests/doubleScalePinchAndRotate';
13+
import DoubleDraggable from './release_tests/doubleDraggable';
14+
import { ComboWithGHScroll } from './release_tests/combo';
15+
import { TouchablesIndex, TouchableExample } from './release_tests/touchables';
16+
import Rows from './release_tests/rows';
17+
import { PinchableBox } from './recipes/scaleAndRotate';
18+
import PanAndScroll from './recipes/panAndScroll';
19+
import { BottomSheet } from './showcase/bottomSheet';
20+
import Swipeables from './showcase/swipeable';
21+
import ChatHeads from './showcase/chatHeads';
22+
import { DraggableBox } from './basic/draggable';
23+
import MultiTap from './basic/multitap';
24+
import BouncingBox from './basic/bouncing';
25+
import PanResponder from './basic/panResponder';
26+
import HorizontalDrawer from './basic/horizontalDrawer';
27+
import PagerAndDrawer from './basic/pagerAndDrawer';
28+
import ForceTouch from './basic/forcetouch';
2829

29-
type Screens = Record<
30-
string,
31-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
32-
{ component: React.ComponentType<any>; title?: string }
33-
>;
30+
interface Example {
31+
name: string;
32+
component: React.ComponentType;
33+
}
34+
interface ExamplesSection {
35+
sectionTitle: string;
36+
data: Example[];
37+
}
3438

35-
const SCREENS: Screens = {
36-
Rows: { component: Rows, title: 'Table rows & buttons' },
37-
Multitap: { component: Multitap },
38-
Draggable: { component: Draggable },
39-
ScaleAndRotate: { component: ScaleAndRotate, title: 'Scale, rotate & tilt' },
40-
ScaleAndRotateSimultaneously: {
41-
component: doubleScalePinchAndRotate,
42-
title: 'Scale, rotate & tilt & more',
43-
},
44-
PagerAndDrawer: {
45-
component: PagerAndDrawer,
46-
title: 'Android pager & drawer',
47-
},
48-
HorizontalDrawer: {
49-
component: HorizontalDrawer,
50-
title: 'Gesture handler based DrawerLayout',
51-
},
52-
SwipeableTable: {
53-
component: SwipeableTable,
54-
title: 'Gesture handler based SwipeableRow',
55-
},
56-
PanAndScroll: {
57-
component: PanAndScroll,
58-
title: 'Horizontal pan or tap in ScrollView',
59-
},
60-
Fling: {
61-
component: Fling,
62-
title: 'Flinghandler',
63-
},
64-
PanResponder: { component: PanResponder },
65-
Bouncing: { component: Bouncing, title: 'Twist & bounce back animation' },
66-
ChatHeads: {
67-
component: ChatHeads,
68-
title: 'Chat Heads (no native animated support yet)',
69-
},
70-
Combo: { component: ComboWithGHScroll },
71-
BottomSheet: {
72-
title: 'BottomSheet gestures interactions',
73-
component: BottomSheet,
74-
},
75-
ComboWithRNScroll: {
76-
component: ComboWithRNScroll,
77-
title: "Combo with RN's ScrollView",
78-
},
79-
DoubleDraggable: {
80-
component: DoubleDraggable,
81-
title: 'Two handlers simultaneously',
82-
},
83-
Touchables: {
84-
component: TouchablesIndex,
85-
title: 'Touchables',
86-
},
87-
ForceTouch: {
88-
component: ForceTouch,
89-
title: 'Force touch',
90-
},
91-
};
39+
const EXAMPLES: ExamplesSection[] = [
40+
{
41+
sectionTitle: 'Basic examples',
42+
data: [
43+
{ name: 'Draggable', component: DraggableBox },
44+
{ name: 'Multitap', component: MultiTap },
45+
{ name: 'Bouncing box', component: BouncingBox },
46+
{ name: 'Pan responder', component: PanResponder },
47+
{ name: 'Horizontal drawer', component: HorizontalDrawer },
48+
{ name: 'Pager & drawer', component: PagerAndDrawer },
49+
{ name: 'Force touch', component: ForceTouch },
50+
],
51+
},
52+
{
53+
sectionTitle: 'Recipes',
54+
data: [
55+
{ name: 'Pinch & rotate', component: PinchableBox },
56+
{ name: 'Pan & scroll', component: PanAndScroll },
57+
],
58+
},
59+
{
60+
sectionTitle: 'Showcase',
61+
data: [
62+
{ name: 'Bottom sheet', component: BottomSheet },
63+
{ name: 'Swipeables', component: Swipeables },
64+
{ name: 'Chat heads', component: ChatHeads },
65+
],
66+
},
67+
{
68+
sectionTitle: 'Release tests',
69+
data: [
70+
{ name: 'Double pinch & rotate', component: DoublePinchRotate },
71+
{ name: 'Double draggable', component: DoubleDraggable },
72+
{ name: 'Rows', component: Rows },
73+
{ name: 'Combo', component: ComboWithGHScroll },
74+
{ name: 'Touchables', component: TouchablesIndex as React.ComponentType },
75+
],
76+
},
77+
];
9278

9379
type RootStackParamList = {
9480
Home: undefined;
9581
} & {
96-
[P in keyof typeof SCREENS]: undefined;
82+
[Screen: string]: undefined;
9783
};
9884

9985
const Stack = createStackNavigator<RootStackParamList>();
10086

10187
export default function App() {
10288
return (
103-
<NavigationContainer>
104-
<Stack.Navigator>
105-
<Stack.Screen
106-
name="Home"
107-
options={{ title: '✌️ Gesture Handler Demo' }}
108-
component={MainScreen}
109-
/>
110-
{Object.keys(SCREENS).map((name) => (
89+
<GestureHandlerRootView style={{ flex: 1 }}>
90+
<NavigationContainer>
91+
<Stack.Navigator>
11192
<Stack.Screen
112-
key={name}
113-
name={name}
114-
getComponent={() => SCREENS[name].component}
115-
options={{ title: SCREENS[name].title || name }}
93+
name="Home"
94+
options={{ title: '✌️ Gesture Handler Demo' }}
95+
component={MainScreen}
11696
/>
117-
))}
118-
<Stack.Screen name="TouchableExample" component={TouchableExample} />
119-
</Stack.Navigator>
120-
</NavigationContainer>
97+
{EXAMPLES.flatMap(({ data }) => data).flatMap(
98+
({ name, component }) => (
99+
<Stack.Screen
100+
key={name}
101+
name={name}
102+
getComponent={() => component}
103+
options={{ title: name }}
104+
/>
105+
)
106+
)}
107+
<Stack.Screen name="TouchableExample" component={TouchableExample} />
108+
</Stack.Navigator>
109+
</NavigationContainer>
110+
</GestureHandlerRootView>
121111
);
122112
}
123113

124114
function MainScreen({ navigation }: StackScreenProps<ParamListBase>) {
125-
const data = Object.keys(SCREENS).map((key) => {
126-
const item = SCREENS[key];
127-
return { key, title: item.title || key };
128-
});
129-
130115
return (
131-
<FlatList
116+
<SectionList
132117
style={styles.list}
133-
data={data}
134-
ItemSeparatorComponent={ItemSeparator}
135-
renderItem={(props) => (
118+
sections={EXAMPLES}
119+
keyExtractor={(example) => example.name}
120+
renderItem={({ item }) => (
136121
<MainScreenItem
137-
{...props}
138-
onPressItem={({ key }) => navigation.navigate(key)}
122+
name={item.name}
123+
onPressItem={(name) => navigation.navigate(name)}
139124
/>
140125
)}
141-
renderScrollComponent={(props) => <ScrollView {...props} />}
126+
renderSectionHeader={({ section: { sectionTitle } }) => (
127+
<Text style={styles.sectionTitle}>{sectionTitle}</Text>
128+
)}
129+
ItemSeparatorComponent={() => <View style={styles.separator} />}
142130
/>
143131
);
144132
}
145133

146-
function ItemSeparator() {
147-
return <View style={styles.separator} />;
134+
interface MainScreenItemProps {
135+
name: string;
136+
onPressItem: (name: string) => void;
148137
}
149138

150-
type MainScreenItemProps = {
151-
item: { key: string; title: string };
152-
onPressItem: (item: { key: string }) => void;
153-
};
154-
155-
function MainScreenItem(props: MainScreenItemProps) {
156-
const { title } = props.item;
139+
function MainScreenItem({ name, onPressItem }: MainScreenItemProps) {
157140
return (
158-
<RectButton
159-
style={[styles.button]}
160-
onPress={() => props.onPressItem(props.item)}>
161-
<Text style={styles.buttonText}>{title}</Text>
141+
<RectButton style={[styles.button]} onPress={() => onPressItem(name)}>
142+
<Text>{name}</Text>
162143
</RectButton>
163144
);
164145
}
165146

166147
const styles = StyleSheet.create({
167-
list: {
168-
backgroundColor: '#EFEFF4',
169-
},
148+
sectionTitle: {
149+
...Platform.select({
150+
ios: {
151+
fontSize: 17,
152+
fontWeight: '500',
153+
},
154+
android: {
155+
fontSize: 19,
156+
fontFamily: 'sans-serif-medium',
157+
},
158+
}),
159+
paddingTop: 10,
160+
paddingBottom: 5,
161+
paddingLeft: 10,
162+
backgroundColor: '#efefef',
163+
},
164+
list: {},
170165
separator: {
171-
height: 1,
172-
backgroundColor: '#DBDBE0',
173-
},
174-
buttonText: {
175-
backgroundColor: 'transparent',
166+
height: 2,
176167
},
177168
button: {
178169
flex: 1,
179-
height: 60,
170+
height: 50,
180171
padding: 10,
181172
flexDirection: 'row',
182173
alignItems: 'center',

‎examples/Example/src/bouncing/index.tsx renamed to ‎examples/Example/src/basic/bouncing/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
RotationGestureHandlerStateChangeEvent,
1212
} from 'react-native-gesture-handler';
1313

14-
import { USE_NATIVE_DRIVER } from '../config';
14+
import { USE_NATIVE_DRIVER } from '../../config';
1515

1616
class Snappable extends Component<Record<string, unknown>> {
1717
private onGestureEvent?: (event: PanGestureHandlerGestureEvent) => void;

‎examples/Example/src/draggable/index.tsx renamed to ‎examples/Example/src/basic/draggable/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import {
88
PanGestureHandlerGestureEvent,
99
} from 'react-native-gesture-handler';
1010

11-
import { USE_NATIVE_DRIVER } from '../config';
12-
import { LoremIpsum } from '../common';
11+
import { USE_NATIVE_DRIVER } from '../../config';
12+
import { LoremIpsum } from '../../common';
1313

1414
type DraggableBoxProps = {
1515
minDist?: number;

‎examples/Example/src/forcetouch/index.tsx renamed to ‎examples/Example/src/basic/forcetouch/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
ForceTouchGestureHandlerStateChangeEvent,
88
} from 'react-native-gesture-handler';
99

10-
import { USE_NATIVE_DRIVER } from '../config';
10+
import { USE_NATIVE_DRIVER } from '../../config';
1111

1212
export default class Example extends Component {
1313
private force = new Animated.Value(0);

‎examples/Example/src/horizontalDrawer/index.tsx renamed to ‎examples/Example/src/basic/horizontalDrawer/index.tsx

File renamed without changes.

‎examples/Example/src/multitap/index.tsx renamed to ‎examples/Example/src/basic/multitap/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
TapGestureHandlerStateChangeEvent,
1111
} from 'react-native-gesture-handler';
1212

13-
import { LoremIpsum } from '../common';
13+
import { LoremIpsum } from '../../common';
1414

1515
interface PressBoxProps {
1616
setDuration?: (duration: number) => void;

‎examples/Example/src/pagerAndDrawer/index.android.tsx renamed to ‎examples/Example/src/basic/pagerAndDrawer/index.android.tsx

File renamed without changes.

0 commit comments

Comments
 (0)