Expo router

app.json

@@ -3,6 +3,7 @@
     "name": "Timeout Ultimate",
     "slug": "timeout-ultimate",
     "version": "5.0.1",
+    "scheme": "timeout-ultimate",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "splash": {
@@ -37,7 +38,8 @@
       }
     },
     "plugins": [
-      "expo-localization"
+      "expo-localization",
+      "expo-router"
     ],
     "runtimeVersion": {
       "policy": "sdkVersion"

babel.config.js

@@ -2,5 +2,6 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: ['expo-router/babel'],
   };
 };

index.js

@@ -1,4 +1 @@
-import { registerRootComponent } from 'expo';
-import App from './src/App';
-
-registerRootComponent(App);
+import 'expo-router/entry';

package.json

@@ -1,5 +1,6 @@
 {
   "name": "timeout-ultimate",
+  "main": "expo-router/entry",
   "version": "1.0.0",
   "scripts": {
     "start": "expo start",
@@ -17,8 +18,11 @@
     "@react-navigation/native-stack": "^6.9.17",
     "expo": "^49.0.21",
     "expo-clipboard": "~4.3.1",
+    "expo-constants": "~14.4.2",
+    "expo-linking": "~5.0.2",
     "expo-localization": "~14.3.0",
     "expo-mail-composer": "~12.3.0",
+    "expo-router": "^2.0.0",
     "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.6.0",
     "expo-updates": "~0.18.17",
@@ -28,6 +32,7 @@
     "react": "18.2.0",
     "react-native": "0.72.6",
     "react-native-elements": "^3.4.2",
+    "react-native-gesture-handler": "~2.12.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-toast-message": "^2.1.7"

src/App.js

@@ -1,7 +1,6 @@
 import { ActivityIndicator } from 'react-native';
 import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { ThemeProvider } from 'react-native-elements';
 import Toast, { BaseToast } from 'react-native-toast-message';
 
@@ -40,43 +39,41 @@ const toastConfig = {
 
 export default function App() {
   return (
-    <SafeAreaProvider>
-      <ThemeProvider theme={reactNativeElementsTheme}>
-        <NavigationContainer
-          theme={reactNavigationTheme}
-          fallback={<ActivityIndicator animating color={theme.MAIN_COLOR} style={{ top: '45%' }} size="large" />}
-        >
-          <Stack.Navigator screenOptions={{ headerBackTitle: I18n.t('navigation.back') }}>
-            <Stack.Screen
-              name="HomeScreen"
-              component={HomeScreen}
-              options={{ title: I18n.t('navigation.homeScreen'), headerShown: false }}
-            />
-            <Stack.Screen
-              name="OptionsScreen"
-              component={OptionsScreen}
-              options={{ title: I18n.t('navigation.optionsScreen') }}
-            />
-            <Stack.Screen name="QuizzScreen" component={QuizzScreen} />
-            <Stack.Screen
-              name="HistoryScreen"
-              component={HistoryScreen}
-              options={{ title: I18n.t('navigation.historyScreen') }}
-            />
-            <Stack.Screen
-              name="AboutScreen"
-              component={AboutScreen}
-              options={{ title: I18n.t('navigation.aboutScreen') }}
-            />
-            <Stack.Screen
-              name="RulesScreen"
-              component={RulesScreen}
-              options={{ title: I18n.t('navigation.rulesScreen') }}
-            />
-          </Stack.Navigator>
-        </NavigationContainer>
-        <Toast config={toastConfig} />
-      </ThemeProvider>
-    </SafeAreaProvider>
+    <ThemeProvider theme={reactNativeElementsTheme}>
+      <NavigationContainer
+        theme={reactNavigationTheme}
+        fallback={<ActivityIndicator animating color={theme.MAIN_COLOR} style={{ top: '45%' }} size="large" />}
+      >
+        <Stack.Navigator screenOptions={{ headerBackTitle: I18n.t('navigation.back') }}>
+          <Stack.Screen
+            name="HomeScreen"
+            component={HomeScreen}
+            options={{ title: I18n.t('navigation.homeScreen'), headerShown: false }}
+          />
+          <Stack.Screen
+            name="OptionsScreen"
+            component={OptionsScreen}
+            options={{ title: I18n.t('navigation.optionsScreen') }}
+          />
+          <Stack.Screen name="QuizzScreen" component={QuizzScreen} />
+          <Stack.Screen
+            name="HistoryScreen"
+            component={HistoryScreen}
+            options={{ title: I18n.t('navigation.historyScreen') }}
+          />
+          <Stack.Screen
+            name="AboutScreen"
+            component={AboutScreen}
+            options={{ title: I18n.t('navigation.aboutScreen') }}
+          />
+          <Stack.Screen
+            name="RulesScreen"
+            component={RulesScreen}
+            options={{ title: I18n.t('navigation.rulesScreen') }}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
+      <Toast config={toastConfig} />
+    </ThemeProvider>
   );
 }

src/screens/__tests__/__snapshots__/HomeScreen.test.js.snap → src/app/__tests__/__snapshots__/index.test.js.snap

@@ -1,15 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<HomeScreen /> renders correctly 1`] = `
-<RNCSafeAreaView
-  edges={
-    {
-      "bottom": "additive",
-      "left": "additive",
-      "right": "additive",
-      "top": "additive",
-    }
-  }
+<View
   style={
     {
       "flex": 1,
@@ -99,7 +91,7 @@ exports[`<HomeScreen /> renders correctly 1`] = `
       }
     >
       <View
-        accessibilityRole="button"
+        accessibilityRole="link"
         accessibilityState={
           {
             "busy": false,
@@ -181,7 +173,7 @@ exports[`<HomeScreen /> renders correctly 1`] = `
       }
     >
       <View
-        accessibilityRole="button"
+        accessibilityRole="link"
         accessibilityState={
           {
             "busy": false,
@@ -263,7 +255,7 @@ exports[`<HomeScreen /> renders correctly 1`] = `
       }
     >
       <View
-        accessibilityRole="button"
+        accessibilityRole="link"
         accessibilityState={
           {
             "busy": false,
@@ -335,39 +327,14 @@ exports[`<HomeScreen /> renders correctly 1`] = `
       }
     }
   >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+    <Text
+      accessibilityRole="link"
+      href="/about"
+      onPress={[Function]}
+      style={{}}
     >
       <Text />
-    </View>
+    </Text>
   </View>
-</RNCSafeAreaView>
+</View>
 `;

src/screens/__tests__/AboutScreen.test.js → src/app/__tests__/about.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 
-import AboutScreen from '../AboutScreen';
+import AboutScreen from '../about';
 
 describe('<AboutScreen />', () => {
   it('renders correctly', () => {

src/screens/__tests__/HistoryScreen.test.js → src/app/__tests__/history.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react-native';
 
-import HistoryScreen from '../HistoryScreen';
+import HistoryScreen from '../history';
 
 describe('<HistoryScreen />', () => {
   it('renders correctly', async () => {

src/screens/__tests__/HomeScreen.test.js → src/app/__tests__/index.test.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 
-import HomeScreen from '../HomeScreen';
+import IndexScreen from '../index';
 
-describe('<HomeScreen />', () => {
+describe('<IndexScreen />', () => {
   it('renders correctly', () => {
-    const { toJSON } = render(<HomeScreen />);
+    const { toJSON } = render(<IndexScreen />);
 
     expect(toJSON()).toMatchSnapshot();
   });

src/screens/__tests__/OptionsScreen.test.js → src/app/__tests__/options.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 
-import OptionsScreen from '../OptionsScreen';
+import OptionsScreen from '../options';
 
 describe('<OptionsScreen />', () => {
   it('renders correctly', () => {

src/screens/__tests__/QuizzScreen.test.js → src/app/__tests__/quizz.test.js

@@ -3,7 +3,7 @@ import { render, fireEvent } from '@testing-library/react-native';
 
 import { Levels, Categories } from '../../utils/config';
 
-import QuizzScreen from '../QuizzScreen';
+import QuizzScreen from '../quizz';
 
 describe('<QuizzScreen />', () => {
   it('renders correctly', async () => {

src/screens/__tests__/RulesScreen.test.js → src/app/__tests__/rules.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 
-import RulesScreen from '../RulesScreen';
+import RulesScreen from '../rules';
 
 describe('<RulesScreen />', () => {
   it('renders correctly', () => {

src/app/_layout.js

@@ -0,0 +1,46 @@
+import { Stack } from 'expo-router';
+import { ThemeProvider as ReactNavigationThemeProvider, DefaultTheme } from '@react-navigation/native';
+import Toast, { BaseToast } from 'react-native-toast-message';
+import { ThemeProvider as ElementsThemeProvider } from 'react-native-elements';
+
+import I18n from '../utils/i18n';
+import theme from '../utils/theme.js';
+
+const toastConfig = {
+  info: (props) => <BaseToast {...props} style={{ borderLeftColor: 'transparent' }} />,
+};
+
+const reactNativeElementsTheme = {
+  colors: {
+    primary: theme.MAIN_COLOR,
+  },
+};
+
+const reactNavigationTheme = {
+  ...DefaultTheme,
+  colors: {
+    ...DefaultTheme.colors,
+    background: theme.MAIN_COLOR_LIGHT,
+    primary: theme.MAIN_COLOR_LIGHT,
+    card: theme.MAIN_COLOR,
+    text: theme.MAIN_COLOR_LIGHT,
+  },
+};
+
+export default function RootLayout() {
+  return (
+    <ElementsThemeProvider theme={reactNativeElementsTheme}>
+      <ReactNavigationThemeProvider value={reactNavigationTheme}>
+        <Stack screenOptions={{ headerBackTitle: I18n.t('navigation.back') }}>
+          <Stack.Screen name="index" options={{ title: I18n.t('navigation.homeScreen'), headerShown: false }} />
+          <Stack.Screen name="options" options={{ title: I18n.t('navigation.optionsScreen') }} />
+          <Stack.Screen name="quizz" />
+          <Stack.Screen name="history" options={{ title: I18n.t('navigation.historyScreen') }} />
+          <Stack.Screen name="about" options={{ title: I18n.t('navigation.aboutScreen') }} />
+          <Stack.Screen name="rules" options={{ title: I18n.t('navigation.rulesScreen') }} />
+        </Stack>
+        <Toast config={toastConfig} />
+      </ReactNavigationThemeProvider>
+    </ElementsThemeProvider>
+  );
+}

src/screens/AboutScreen.js → src/app/about.js

@@ -14,6 +14,7 @@ export default () => {
       subject: I18n.t('aboutScreen.mailSubject'),
     }).then();
   };
+
   return (
     <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
       <Text style={styles.header}>{I18n.t('aboutScreen.aboutHeader')}</Text>