xref: /expo/apps/test-suite/AppNavigator.js (revision ab22f034)
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
28  React.useLayoutEffect(() => {
29    if (props.navigation) {
30      props.navigation.setOptions({
31        title: 'Tests',
32        tabBarLabel: 'Tests',
33        tabBarIcon: ({ focused }) => {
34          const color = focused ? Colors.activeTintColor : Colors.inactiveTintColor;
35          return <MaterialCommunityIcons name="format-list-checks" size={27} color={color} />;
36        },
37      })
38    }
39  }, [props.navigation]);
40
41  return (
42    <Stack.Navigator
43      {...props}
44      screenOptions={{
45        title: 'Tests',
46        transitionSpec,
47        headerBackTitle: 'Select',
48        headerTitleStyle: {
49          color: 'black',
50        },
51        headerTintColor: Colors.tintColor,
52        headerStyle: {
53          borderBottomWidth: 0.5,
54          borderBottomColor: 'rgba(0,0,0,0.1)',
55          boxShadow: '',
56        },
57      }}>
58      <Stack.Screen name="select" component={SelectScreen} options={{ title: 'Expo Test Suite' }} />
59      <Stack.Screen name="run" component={RunTests} options={{ title: 'Test Runner' }} />
60    </Stack.Navigator>
61  );
62}
63