xref: /expo/apps/test-suite/AppNavigator.js (revision 22d1e005)
1import MaterialCommunityIcons from '@expo/vector-icons/build/MaterialCommunityIcons';
2import { createStackNavigator } from '@react-navigation/stack';
3import * as React from 'react';
4
5import Colors from './constants/Colors';
6import SelectScreen from './screens/SelectScreen';
7import RunTests from './screens/TestScreen';
8
9// @tsapeta: This navigator is also being used by `bare-expo` app,
10// so make sure it still works there once you change something here.
11
12const Stack = createStackNavigator();
13
14const spec = {
15  animation: 'timing',
16  config: {
17    duration: 0,
18  },
19};
20
21const shouldDisableTransition = !!global.DETOX;
22
23// Disable transition animations in E2E tests
24const transitionSpec = shouldDisableTransition ? { open: spec, close: spec } : undefined;
25
26export default function AppNavigator(props) {
27  React.useLayoutEffect(() => {
28    if (props.navigation) {
29      props.navigation.setOptions({
30        title: 'Tests',
31        tabBarLabel: 'Tests',
32        tabBarIcon: ({ focused }) => {
33          const color = focused ? Colors.activeTintColor : Colors.inactiveTintColor;
34          return <MaterialCommunityIcons name="format-list-checks" size={27} color={color} />;
35        },
36      });
37    }
38  }, [props.navigation]);
39
40  return (
41    <Stack.Navigator
42      {...props}
43      screenOptions={{
44        title: 'Tests',
45        transitionSpec,
46        headerBackTitle: 'Select',
47        headerTitleStyle: {
48          color: 'black',
49        },
50        headerTintColor: Colors.tintColor,
51        headerStyle: {
52          borderBottomWidth: 0.5,
53          borderBottomColor: 'rgba(0,0,0,0.1)',
54          boxShadow: '',
55        },
56      }}>
57      <Stack.Screen name="select" component={SelectScreen} options={{ title: 'Expo Test Suite' }} />
58      <Stack.Screen name="run" component={RunTests} options={{ title: 'Test Runner' }} />
59    </Stack.Navigator>
60  );
61}
62