add react-navigation configuration

package.json

@@ -20,6 +20,7 @@
     "@react-native-firebase/crashlytics": "^11.2.0",
     "@react-native-picker/picker": "^1.14.0",
     "@react-navigation/native": "^5.9.4",
+    "@react-navigation/stack": "^5.14.4",
     "graphql": "^15.5.0",
     "lodash": "^4.17.21",
     "native-base": "^3.0.0-next.36",

src/config/app.ts

@@ -0,0 +1,7 @@
+export const AUTHOR = {
+  FULL_NAME: 'Dawid Wysokiński',
+  EMAIL: 'contact@dwysokinski.me',
+  CONTACT: 'https://dwysokinski.me/#contact',
+};
+
+export const QUESTIONS = [1, 40];

src/config/cdn.ts

@@ -0,0 +1,3 @@
+export const CDN_URI = __DEV__
+  ? 'http://localhost:9000/'
+  : 'https://cdn.zdamegzaminzawodowy.pl';

src/config/routing.ts

@@ -0,0 +1,7 @@
+export enum Screen {
+  Home = 'HomeScreen',
+}
+
+export type AppStackParamList = {
+  [Screen.Home]: undefined;
+};

src/libs/graphql/createClient.ts

@@ -7,7 +7,9 @@ import {
 } from '@apollo/client';
 import { onError } from '@apollo/client/link/error';
 
-const createClient = (uri: string): ApolloClient<NormalizedCacheObject> => {
+export const createClient = (
+  uri: string,
+): ApolloClient<NormalizedCacheObject> => {
   return new ApolloClient({
     queryDeduplication: true,
     cache: new InMemoryCache(),
@@ -32,5 +34,3 @@ const createClient = (uri: string): ApolloClient<NormalizedCacheObject> => {
     ]),
   });
 };
-
-export default createClient;

src/libs/graphql/index.ts

@@ -0,0 +1,2 @@
+export * from './createClient';
+export * from './types';

src/screens/App.tsx

@@ -1,11 +1,11 @@
 import 'react-native-gesture-handler';
 import React, { useEffect, useRef } from 'react';
-import { Text, View } from 'react-native';
+import { ApolloProvider } from '@apollo/client';
 import RNBootSplash from 'react-native-bootsplash';
 import { extendTheme, NativeBaseProvider } from 'native-base';
-import createClient from 'libs/graphql/createClient';
+import { createClient } from 'libs/graphql';
 import { API_URI } from 'config/api';
-import { ApolloProvider } from '@apollo/client';
+import Navigation from './Navigation';
 
 const App = () => {
   const client = useRef(createClient(API_URI)).current;
@@ -26,9 +26,7 @@ const App = () => {
   return (
     <NativeBaseProvider theme={theme}>
       <ApolloProvider client={client}>
-        <View>
-          <Text>test</Text>
-        </View>
+        <Navigation />
       </ApolloProvider>
     </NativeBaseProvider>
   );

src/screens/HomeScreen/HomeScreen.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { View, Heading } from 'native-base';
+
+const HomeScreen = () => {
+  return (
+    <View>
+      <Heading color="primary.200">Zdam Egzamin Zawodowy</Heading>
+    </View>
+  );
+};
+
+export default HomeScreen;

src/screens/Navigation.tsx

@@ -0,0 +1,60 @@
+import React, { useRef } from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import analytics from '@react-native-firebase/analytics';
+import { AppStackParamList, Screen } from 'config/routing';
+
+import {
+  NavigationContainer,
+  NavigationContainerRef,
+} from '@react-navigation/native';
+import HomeScreen from './HomeScreen/HomeScreen';
+
+const Stack = createStackNavigator<AppStackParamList>();
+const AppStack = createStackNavigator<AppStackParamList>();
+
+const AppScreens = () => (
+  <AppStack.Navigator
+    screenOptions={{ animationEnabled: false, headerShown: false }}
+  >
+    <Stack.Screen name={Screen.Home} component={HomeScreen} />
+  </AppStack.Navigator>
+);
+
+export default function Navigation() {
+  const routeNameRef = useRef<string>('');
+  const navigationRef = useRef<NavigationContainerRef>(null);
+
+  const logScreenView = (route: string) => {
+    return analytics().logScreenView({
+      screen_name: route,
+      screen_class: route,
+    });
+  };
+
+  const handleReady = () => {
+    logScreenView(navigationRef.current?.getCurrentRoute()?.name ?? '');
+  };
+
+  const handleStateChange = () => {
+    const previousRouteName = routeNameRef.current;
+    const currentRouteName =
+      navigationRef.current?.getCurrentRoute()?.name ?? '';
+
+    if (previousRouteName !== currentRouteName) {
+      logScreenView(currentRouteName);
+    }
+
+    // Save the current route name for later comparision
+    routeNameRef.current = currentRouteName;
+  };
+
+  return (
+    <NavigationContainer
+      ref={navigationRef}
+      onReady={handleReady}
+      onStateChange={handleStateChange}
+    >
+      <AppScreens />
+    </NavigationContainer>
+  );
+}

src/utils/buildURL.ts

@@ -0,0 +1,11 @@
+import { CDN_URI } from 'config/cdn';
+
+const buildURL = (type: 'cdn', str: string): string => {
+  switch (type) {
+    case 'cdn':
+      return CDN_URI + str;
+  }
+  return str;
+};
+
+export default buildURL;

yarn.lock

@@ -2976,6 +2976,14 @@
   dependencies:
     nanoid "^3.1.15"
 
+"@react-navigation/stack@^5.14.4":
+  version "5.14.4"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.14.4.tgz#32f6717c03494f0ca6cf0dd43d8302af824de9e9"
+  integrity sha512-gQjWK8JHtVkD1p7wzjtSPuScJI0mSAk/N/gzgjQZo+rDUwgM8rOTDcVNRbtEOqCEgLQcZrZQHwhOjkrJirehjQ==
+  dependencies:
+    color "^3.1.3"
+    react-native-iphone-x-helper "^1.3.0"
+
 "@react-stately/checkbox@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@react-stately/checkbox/-/checkbox-3.0.1.tgz#2e48a2085f1559549df62c1eda78299127acaf80"
@@ -4718,7 +4726,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0:
+color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -4742,7 +4750,7 @@ color-name@^1.0.0, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.5.3:
+color-string@^1.5.3, color-string@^1.5.4:
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.5.tgz#65474a8f0e7439625f3d27a6a19d89fc45223014"
   integrity sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==
@@ -4750,6 +4758,14 @@ color-string@^1.5.3:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
+color@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
+  integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.4"
+
 colorette@^1.0.7, colorette@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
@@ -9683,6 +9699,11 @@ react-native-gesture-handler@^1.10.3:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
+react-native-iphone-x-helper@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
+  integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
+
 react-native-material-ripple@^0.9.1:
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/react-native-material-ripple/-/react-native-material-ripple-0.9.1.tgz#db1ad9dd7cf97011e4cd8475ae2041ade0f891cb"