1import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
2import { createStackNavigator } from '@react-navigation/stack';
3import * as React from 'react';
4
5import TabIcon from '../components/TabIcon';
6import { Layout } from '../constants';
7import ExpoComponents from '../screens/ExpoComponentsScreen';
8import getStackConfig from './StackConfig';
9import { optionalRequire } from './routeBuilder';
10
11const Stack = createStackNavigator();
12
13export const Screens = [
14  {
15    getComponent() {
16      return optionalRequire(() => require('../screens/DrawerLayoutAndroidScreen'));
17    },
18    name: 'DrawerLayoutAndroid',
19  },
20  {
21    getComponent() {
22      return optionalRequire(() => require('../screens/BarCodeScannerScreen'));
23    },
24    name: 'BarCodeScanner',
25  },
26  {
27    getComponent() {
28      return optionalRequire(() => require('../screens/ModalScreen'));
29    },
30    name: 'Modal',
31  },
32  {
33    getComponent() {
34      return optionalRequire(() => require('../screens/ScrollViewScreen'));
35    },
36    name: 'ScrollView',
37  },
38  {
39    getComponent() {
40      return optionalRequire(() => require('../screens/MaskedViewScreen'));
41    },
42    name: 'MaskedView',
43    options: { title: 'Basic Mask Example' },
44  },
45  {
46    getComponent() {
47      return optionalRequire(() => require('../screens/BlurView/BlurViewScreen'));
48    },
49    name: 'BlurView',
50  },
51  {
52    getComponent() {
53      return optionalRequire(() => require('../screens/Camera/CameraScreen'));
54    },
55    name: 'Camera',
56  },
57  {
58    getComponent() {
59      return optionalRequire(() => require('../screens/TextScreen'));
60    },
61    name: 'Text',
62  },
63  {
64    getComponent() {
65      return optionalRequire(() => require('../screens/TextInputScreen'));
66    },
67    name: 'TextInput',
68  },
69  {
70    getComponent() {
71      return optionalRequire(() => require('../screens/TouchablesScreen'));
72    },
73    name: 'Touchables',
74  },
75  {
76    getComponent() {
77      return optionalRequire(() => require('../screens/ProgressViewIOSScreen'));
78    },
79    name: 'ProgressViewIOS',
80  },
81  {
82    getComponent() {
83      return optionalRequire(() => require('../screens/ProgressBarAndroidScreen'));
84    },
85    name: 'ProgressBarAndroid',
86  },
87  {
88    getComponent() {
89      return optionalRequire(() => require('../screens/TouchableBounceScreen'));
90    },
91    name: 'TouchableBounce',
92  },
93  {
94    getComponent() {
95      return optionalRequire(() => require('../screens/SwitchScreen'));
96    },
97    name: 'Switch',
98  },
99  {
100    getComponent() {
101      return optionalRequire(() => require('../screens/SliderScreen'));
102    },
103    name: 'Slider',
104  },
105  {
106    getComponent() {
107      return optionalRequire(() => require('../screens/PressableScreen'));
108    },
109    name: 'Pressable',
110  },
111  {
112    getComponent() {
113      return optionalRequire(() => require('../screens/PickerScreen'));
114    },
115    name: 'Picker',
116  },
117  {
118    getComponent() {
119      return optionalRequire(() => require('../screens/CheckboxScreen'));
120    },
121    name: 'Checkbox',
122  },
123  {
124    getComponent() {
125      return optionalRequire(() => require('../screens/ButtonScreen'));
126    },
127    name: 'Button',
128  },
129  {
130    getComponent() {
131      return optionalRequire(() => require('../screens/ActivityIndicatorScreen'));
132    },
133    name: 'ActivityIndicator',
134  },
135  {
136    getComponent() {
137      return optionalRequire(() => require('../screens/QRCodeScreen'));
138    },
139    name: 'QRCode',
140    options: { title: 'QR Code' },
141  },
142  {
143    getComponent() {
144      return optionalRequire(() => require('../screens/DateTimePickerScreen'));
145    },
146    name: 'DateTimePicker',
147  },
148  {
149    getComponent() {
150      return optionalRequire(() => require('../screens/GL/GLScreen'));
151    },
152    name: 'GL',
153    options: { title: 'Examples of GL use' },
154  },
155  {
156    getComponent() {
157      return optionalRequire(() => require('../screens/GL/ClearToBlueScreen'));
158    },
159    name: 'ClearToBlue',
160    options: { title: 'Clear to blue' },
161    route: 'gl/cleartoblue',
162  },
163  {
164    getComponent() {
165      return optionalRequire(() => require('../screens/GL/BasicTextureScreen'));
166    },
167    name: 'BasicTexture',
168    options: { title: 'Basic texture use' },
169    route: 'gl/basictexture',
170  },
171  {
172    getComponent() {
173      return optionalRequire(() => require('../screens/GL/GLViewScreen'));
174    },
175    name: 'GLViewScreen',
176    options: { title: 'GLView example' },
177    route: 'gl/glviewscreen',
178  },
179  {
180    getComponent() {
181      return optionalRequire(() => require('../screens/GL/GLMaskScreen'));
182    },
183    name: 'Mask',
184    options: { title: 'MaskedView integration' },
185    route: 'gl/mask',
186  },
187  {
188    getComponent() {
189      return optionalRequire(() => require('../screens/GL/GLSnapshotsScreen'));
190    },
191    name: 'Snapshots',
192    options: { title: 'Taking snapshots' },
193    route: 'gl/snapshots',
194  },
195  {
196    getComponent() {
197      return optionalRequire(() => require('../screens/GL/GLThreeComposerScreen'));
198    },
199    name: 'THREEComposer',
200    options: { title: 'three.js glitch and film effects' },
201    route: 'gl/threecomposer',
202  },
203  {
204    getComponent() {
205      return optionalRequire(() => require('../screens/GL/GLThreeDepthStencilBufferScreen'));
206    },
207    name: 'THREEDepthStencilBuffer',
208    options: { title: 'three.js depth and stencil buffer' },
209    route: 'gl/threedepthstencilbuffer',
210  },
211  {
212    getComponent() {
213      return optionalRequire(() => require('../screens/GL/GLThreeSpriteScreen'));
214    },
215    name: 'THREESprite',
216    options: { title: 'three.js sprite rendering' },
217    route: 'gl/threesprite',
218  },
219  {
220    getComponent() {
221      return optionalRequire(() => require('../screens/GL/ProcessingInAndOutScreen'));
222    },
223    name: 'ProcessingInAndOut',
224    options: { title: "'In and out' from openprocessing.org" },
225    route: 'gl/processinginandout',
226  },
227  {
228    getComponent() {
229      return optionalRequire(() => require('../screens/GL/ProcessingNoClearScreen'));
230    },
231    name: 'ProcessingNoClear',
232    options: { title: 'Draw without clearing screen with processing.js' },
233    route: 'gl/processingnoclear',
234  },
235  {
236    getComponent() {
237      return optionalRequire(() => require('../screens/GL/PIXIBasicScreen'));
238    },
239    name: 'PIXIBasic',
240    options: { title: 'Basic pixi.js use' },
241    route: 'gl/pixibasic',
242  },
243  {
244    getComponent() {
245      return optionalRequire(() => require('../screens/GL/PIXISpriteScreen'));
246    },
247    name: 'PIXISprite',
248    options: { title: 'pixi.js sprite rendering' },
249    route: 'gl/pixisprite',
250  },
251  {
252    getComponent() {
253      return optionalRequire(() => require('../screens/GL/GLCameraScreen'));
254    },
255    name: 'GLCamera',
256    options: { title: 'Expo.Camera integration' },
257    route: 'gl/glcamera',
258  },
259  {
260    getComponent() {
261      return optionalRequire(() => require('../screens/GL/WebGL2TransformFeedbackScreen'));
262    },
263    name: 'WebGL2TransformFeedback',
264    options: { title: 'WebGL2 - Transform feedback' },
265    route: 'gl/webgl2transformfeedback',
266  },
267  {
268    getComponent() {
269      return optionalRequire(() => require('../screens/GL/CanvasScreen'));
270    },
271    name: 'Canvas',
272    options: { title: 'Canvas example - expo-2d-context' },
273    route: 'gl/canvas',
274  },
275  {
276    getComponent() {
277      return optionalRequire(() => require('../screens/GL/GLHeadlessRenderingScreen'));
278    },
279    name: 'HeadlessRendering',
280    options: { title: 'Headless rendering' },
281    route: 'gl/headlessrendering',
282  },
283  {
284    getComponent() {
285      return optionalRequire(() => require('../screens/GL/GLReanimatedExample'));
286    },
287    name: 'ReanimatedWorklets',
288    options: { title: 'Reanimated worklets + gesture handler' },
289    route: 'gl/reanimated',
290  },
291  {
292    getComponent() {
293      return optionalRequire(() => require('../screens/GestureHandlerPinchScreen'));
294    },
295    name: 'GestureHandlerPinch',
296    options: { title: 'Pinch and Rotate' },
297  },
298  {
299    getComponent() {
300      return optionalRequire(() => require('../screens/GestureHandlerListScreen'));
301    },
302    name: 'GestureHandlerList',
303    options: { title: 'Gesture Handler List' },
304  },
305  {
306    getComponent() {
307      return optionalRequire(() => require('../screens/GestureHandlerSwipeableScreen'));
308    },
309    name: 'GestureHandlerSwipeable',
310    options: { title: 'Swipeable Rows' },
311  },
312  {
313    getComponent() {
314      return optionalRequire(() => require('../screens/HTMLElementsScreen'));
315    },
316    name: 'HTML',
317  },
318  {
319    getComponent() {
320      return optionalRequire(() => require('../screens/Image/ImageScreen'));
321    },
322    name: 'Image',
323  },
324  {
325    getComponent() {
326      return optionalRequire(() => require('../screens/Image/ImageTestsScreen'));
327    },
328    name: 'ImageTests',
329  },
330  {
331    getComponent() {
332      return optionalRequire(() => require('../screens/Image/ImageTestScreen'));
333    },
334    name: 'ImageTest',
335  },
336  {
337    getComponent() {
338      return optionalRequire(() => require('../screens/Reanimated/ReanimatedScreen'));
339    },
340    name: 'Reanimated',
341  },
342  {
343    getComponent() {
344      return optionalRequire(() => require('../screens/GifScreen'));
345    },
346    name: 'Gif',
347  },
348  {
349    getComponent() {
350      return optionalRequire(() => require('../screens/SegmentedControlScreen'));
351    },
352    name: 'SegmentedControl',
353  },
354  {
355    getComponent() {
356      return optionalRequire(() => require('../screens/Skia/SkiaScreen'));
357    },
358    name: 'Skia',
359  },
360  {
361    getComponent() {
362      return optionalRequire(() => require('../screens/SVG/SVGScreen'));
363    },
364    name: 'SVG',
365  },
366  {
367    getComponent() {
368      return optionalRequire(() => require('../screens/SVG/SVGExampleScreen'));
369    },
370    name: 'SVGExample',
371  },
372  {
373    getComponent() {
374      return optionalRequire(() => require('../screens/LinearGradientScreen'));
375    },
376    name: 'LinearGradient',
377  },
378  {
379    getComponent() {
380      return optionalRequire(() => require('../screens/LottieScreen'));
381    },
382    name: 'Lottie',
383  },
384  {
385    getComponent() {
386      return optionalRequire(() => require('../screens/MapsScreen'));
387    },
388    name: 'Maps',
389  },
390  {
391    getComponent() {
392      return optionalRequire(() => require('../screens/AV/VideoScreen'));
393    },
394    name: 'Video',
395  },
396  {
397    getComponent() {
398      return optionalRequire(() => require('../screens/Screens'));
399    },
400    name: 'Screens',
401  },
402  {
403    getComponent() {
404      return optionalRequire(() => require('../screens/WebViewScreen'));
405    },
406    name: 'WebView',
407  },
408  {
409    getComponent() {
410      return optionalRequire(() => require('../screens/PagerViewScreen'));
411    },
412    name: 'PagerView',
413    options: { gesturesEnabled: false, title: 'PagerView Example' },
414  },
415  {
416    getComponent() {
417      return optionalRequire(() => require('../screens/SharedElementScreen'));
418    },
419    name: 'SharedElement',
420  },
421  {
422    getComponent() {
423      return optionalRequire(() => require('../screens/FlashListScreen'));
424    },
425    name: 'FlashList',
426  },
427];
428
429function ExpoComponentsStackNavigator(props: { navigation: BottomTabNavigationProp<any> }) {
430  return (
431    <Stack.Navigator {...props} {...getStackConfig(props)}>
432      <Stack.Screen
433        name="ExpoComponents"
434        options={{ title: Layout.isSmallDevice ? 'Expo SDK Components' : 'Components in Expo SDK' }}
435        component={ExpoComponents}
436      />
437      {Screens.map(({ name, getComponent, options }) => (
438        <Stack.Screen name={name} key={name} getComponent={getComponent} options={options ?? {}} />
439      ))}
440    </Stack.Navigator>
441  );
442}
443
444const icon = ({ focused }: { focused: boolean }) => {
445  return <TabIcon name="react" focused={focused} />;
446};
447ExpoComponentsStackNavigator.navigationOptions = {
448  title: 'Components',
449  tabBarLabel: 'Components',
450  tabBarIcon: icon,
451  drawerIcon: icon,
452};
453export default ExpoComponentsStackNavigator;
454