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/AdMobScreen'));
17    },
18    name: 'Admob',
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/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/GestureHandlerPinchScreen'));
286    },
287    name: 'GestureHandlerPinch',
288    options: { title: 'Pinch and Rotate' },
289  },
290  {
291    getComponent() {
292      return optionalRequire(() => require('../screens/GestureHandlerListScreen'));
293    },
294    name: 'GestureHandlerList',
295    options: { title: 'Gesture Handler List' },
296  },
297  {
298    getComponent() {
299      return optionalRequire(() => require('../screens/GestureHandlerSwipeableScreen'));
300    },
301    name: 'GestureHandlerSwipeable',
302    options: { title: 'Swipeable Rows' },
303  },
304  {
305    getComponent() {
306      return optionalRequire(() => require('../screens/HTMLElementsScreen'));
307    },
308    name: 'HTML',
309  },
310  {
311    getComponent() {
312      return optionalRequire(() => require('../screens/Image/ImageScreen'));
313    },
314    name: 'Image',
315  },
316  {
317    getComponent() {
318      return optionalRequire(() => require('../screens/Image/ImageTestsScreen'));
319    },
320    name: 'ImageTests',
321  },
322  {
323    getComponent() {
324      return optionalRequire(() => require('../screens/Image/ImageTestScreen'));
325    },
326    name: 'ImageTest',
327  },
328  {
329    getComponent() {
330      return optionalRequire(() => require('../screens/Reanimated/ReanimatedScreen'));
331    },
332    name: 'Reanimated',
333  },
334  {
335    getComponent() {
336      return optionalRequire(() => require('../screens/GifScreen'));
337    },
338    name: 'Gif',
339  },
340  {
341    getComponent() {
342      return optionalRequire(() => require('../screens/SegmentedControlScreen'));
343    },
344    name: 'SegmentedControl',
345  },
346  {
347    getComponent() {
348      return optionalRequire(() => require('../screens/SVG/SVGScreen'));
349    },
350    name: 'SVG',
351  },
352  {
353    getComponent() {
354      return optionalRequire(() => require('../screens/SVG/SVGExampleScreen'));
355    },
356    name: 'SVGExample',
357  },
358  {
359    getComponent() {
360      return optionalRequire(() => require('../screens/LinearGradientScreen'));
361    },
362    name: 'LinearGradient',
363  },
364  {
365    getComponent() {
366      return optionalRequire(() => require('../screens/LottieScreen'));
367    },
368    name: 'Lottie',
369  },
370  {
371    getComponent() {
372      return optionalRequire(() => require('../screens/MapsScreen'));
373    },
374    name: 'Maps',
375  },
376  {
377    getComponent() {
378      return optionalRequire(() => require('../screens/AV/VideoScreen'));
379    },
380    name: 'Video',
381  },
382  {
383    getComponent() {
384      return optionalRequire(() => require('../screens/Screens'));
385    },
386    name: 'Screens',
387  },
388  {
389    getComponent() {
390      return optionalRequire(() => require('../screens/WebViewScreen'));
391    },
392    name: 'WebView',
393  },
394  {
395    getComponent() {
396      return optionalRequire(() => require('../screens/ViewPagerScreen'));
397    },
398    name: 'ViewPager',
399    options: { gesturesEnabled: false, title: 'ViewPager Example' },
400  },
401  {
402    getComponent() {
403      return optionalRequire(() => require('../screens/SharedElementScreen'));
404    },
405    name: 'SharedElement',
406  },
407];
408
409function ExpoComponentsStackNavigator(props: { navigation: BottomTabNavigationProp<any> }) {
410  return (
411    <Stack.Navigator {...props} {...getStackConfig(props)}>
412      <Stack.Screen
413        name="ExpoComponents"
414        options={{ title: Layout.isSmallDevice ? 'Expo SDK Components' : 'Components in Expo SDK' }}
415        component={ExpoComponents}
416      />
417      {Screens.map(({ name, getComponent, options }) => (
418        <Stack.Screen name={name} key={name} getComponent={getComponent} options={options ?? {}} />
419      ))}
420    </Stack.Navigator>
421  );
422}
423
424const icon = ({ focused }: { focused: boolean }) => {
425  return <TabIcon name="react" focused={focused} />;
426};
427ExpoComponentsStackNavigator.navigationOptions = {
428  title: 'Components',
429  tabBarLabel: 'Components',
430  tabBarIcon: icon,
431  drawerIcon: icon,
432};
433export default ExpoComponentsStackNavigator;
434