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