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