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 { Screens } from './ExpoComponents';
9import getStackConfig from './StackConfig';
10
11const Stack = createStackNavigator();
12
13function ExpoComponentsStackNavigator(props: { navigation: BottomTabNavigationProp<any> }) {
14  return (
15    <Stack.Navigator {...props} {...getStackConfig(props)}>
16      <Stack.Screen
17        name="ExpoComponents"
18        options={{ title: Layout.isSmallDevice ? 'Expo SDK Components' : 'Components in Expo SDK' }}
19        component={ExpoComponents}
20      />
21      {Object.keys(Screens).map(name => (
22        <Stack.Screen
23          name={name}
24          key={name}
25          component={Screens[name]}
26          options={(Screens[name] as any).navigationOptions ?? {}}
27        />
28      ))}
29    </Stack.Navigator>
30  );
31}
32
33const icon = ({ focused }: { focused: boolean }) => {
34  return <TabIcon name="react" focused={focused} />;
35};
36ExpoComponentsStackNavigator.navigationOptions = {
37  title: 'Components',
38  tabBarLabel: 'Components',
39  tabBarIcon: icon,
40  drawerIcon: icon,
41};
42export default ExpoComponentsStackNavigator;
43