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