initial commit

.env.example

@@ -0,0 +1,2 @@
+API_URL=
+API_KEY=

.gitignore

@@ -0,0 +1,21 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+.idea
+.vscode
+
+.env

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSameLine": false,
+  "trailingComma": "es5"
+}

App.tsx

@@ -0,0 +1,18 @@
+import 'react-native-gesture-handler';
+import 'react-native-url-polyfill/auto';
+
+import { useFonts } from '@expo-google-fonts/ibm-plex-mono';
+
+import { RootStack } from './exercices';
+import { ScreenLoader } from './src/components';
+import { commonStyles, fonts } from './src/ui';
+
+export default function App() {
+  const [fontsLoaded] = useFonts(fonts);
+
+  if (!fontsLoaded) {
+    return <ScreenLoader containerStyle={commonStyles.darkBackground} color="white" />;
+  }
+
+  return <RootStack />;
+}

README.md

@@ -0,0 +1,69 @@
+# Navigation in a React Native application with React Navigation
+
+## Background
+
+Navigation is an essential functionality in any applications, React Navigation has been the go to library when it comes
+to navigation. Throughout this workshop, you will learn how to implement different types of navigation stacks, how to
+navigate between your application screens and more.
+
+## How to do the exercises
+
+You will go from the 1st exercise through the last one, in every exercises folder you will see a `README.md` file, read
+it before starting the exercise, everything you need to know his written there.
+
+Throughout the exercises, you will have to import components and types from the [src](./src) folder. This folder contain
+the
+final version of the application, if you don't want to spoil yourself, you should not take a loot in this folder until
+you have finished all the exercises.
+
+In the exercise file, for example [Exo1.tsx](./exercices/exo_1_native_stack/Exo1.tsx), you will find instructions with
+emojis, those emojis have different
+significations:
+
+- 🐨 You will have to write code here based on the instruction
+- 📝 Side note for your knowledge
+- 💥 Delete the code below this emoji
+
+Don't forget to update the component to render inside the [root.tsx](./exercices/root.tsx) file when you are working on
+an exercise, for
+example if you are working on the first exercise your [root.tsx](./exercices/root.tsx) file should look like this:
+
+```js
+export const RootStack = () => {
+  return (
+    <NavigationContainer>
+      {/* **** Exercise 1 **** */}
+      <Exo1 />
+      {/*<Exo1Solution />*/}
+      {/*<Exo1Challenges />*/}
+      {/*<Exo1ChallengesSolution />*/}
+      {/* **** Exercise 2 **** */}
+      {/*<Exo2 />*/}
+      {/*<Exo2Solution />*/}
+      {/*<Exo2Challenges />*/}
+      {/*<Exo2ChallengesSolution />*/}
+      {/* **** Exercise 3 **** */}
+      {/*<Exo3 />*/}
+      {/*<Exo3Solution />*/}
+      {/*<Exo3Challenges />*/}
+      {/*<Exo3ChallengesSolution />*/}
+      {/* **** Exercise 4 **** */}
+      {/*<Exo4 />*/}
+      {/*<Exo4Solution />*/}
+    </NavigationContainer>
+  );
+};
+```
+
+When you are finished with an exercise, ask one of the speakers to take a look at your code, if everything looks good
+you will be able to move on to the next one.
+
+If you are stuck, don't go straight to the solution, first ask a speaker for help.
+You also should take a look at the
+official [React Navigation documentation](https://reactnavigation.org/docs/getting-started)
+
+[You can start the first exercise here!](./exercices/exo_1_native_stack/README.md)
+
+## Challenges
+
+For every exercise you will also find challenges, those are not mandatory, but we encourage you to at least try them 💪

app.config.ts

@@ -0,0 +1,37 @@
+import 'dotenv/config';
+
+export default {
+  expo: {
+    owner: 'mirahi',
+    name: 'expo-react-navigation-meetup',
+    slug: 'mirahi-food-delivery',
+    version: '1.0.0',
+    orientation: 'portrait',
+    icon: './assets/icon.png',
+    userInterfaceStyle: 'light',
+    splash: {
+      image: './assets/splash.png',
+      resizeMode: 'contain',
+      backgroundColor: '#ffffff',
+    },
+    assetBundlePatterns: ['**/*'],
+    ios: {
+      supportsTablet: true,
+      bundleIdentifier: 'com.mirahi.foodDelivery',
+    },
+    android: {
+      adaptiveIcon: {
+        foregroundImage: './assets/adaptive-icon.png',
+        backgroundColor: '#ffffff',
+      },
+    },
+    web: {
+      favicon: './assets/favicon.png',
+    },
+    extra: {
+      apiUrl: 'https://gzllfchvotzukpwyrrzp.supabase.co',
+      apiKey:
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imd6bGxmY2h2b3R6dWtwd3lycnpwIiwicm9sZSI6ImFub24iLCJpYXQiOjE2ODM4ODA2MzgsImV4cCI6MTk5OTQ1NjYzOH0.SYzte8h_YnzGTUjLUx4Uk38DjuvqmRbKfQLtsuXfJvw',
+    },
+  },
+};

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin'],
+  };
+};

exercices/exo_1_native_stack/Exo1.tsx

@@ -0,0 +1,85 @@
+import { FC } from 'react';
+import { Text, View } from 'react-native';
+
+import { PrimaryButton, SafeFullScreenView } from '../../src/components';
+import { commonStyles } from '../../src/ui';
+
+// 🐨 Initialize the navigator for the native stack here
+
+export const Exo1 = () => {
+  // 💥 Delete this code below when you are done with the above instructions
+  return (
+    // 🐨 Return the Navigator and define the Screens here
+    <View>
+      <Text>Exo 1</Text>
+    </View>
+  );
+};
+
+// 🐨 Use these components for the screens
+//   add the correct methods for the buttons to navigate
+
+const HomeScreen: FC = () => {
+  return (
+    <SafeFullScreenView>
+      <View style={commonStyles.center}>
+        <PrimaryButton onPress={undefined}>Cart</PrimaryButton>
+        <PrimaryButton onPress={undefined}>Categories</PrimaryButton>
+      </View>
+    </SafeFullScreenView>
+  );
+};
+
+const CategoriesScreen: FC = () => {
+  return (
+    <SafeFullScreenView>
+      <View style={commonStyles.center}>
+        <PrimaryButton onPress={undefined}>Category</PrimaryButton>
+        <PrimaryButton onPress={undefined}>Back 2 screens</PrimaryButton>
+        <PrimaryButton onPress={undefined}>Back</PrimaryButton>
+      </View>
+    </SafeFullScreenView>
+  );
+};
+
+const CartScreen: FC = () => {
+  return (
+    <SafeFullScreenView>
+      <View style={commonStyles.center}>
+        <PrimaryButton onPress={undefined}>Home</PrimaryButton>
+        <PrimaryButton onPress={undefined}>Categories</PrimaryButton>
+        <PrimaryButton onPress={undefined}>Back</PrimaryButton>
+      </View>
+    </SafeFullScreenView>
+  );
+};
+
+const CategoryScreen: FC = () => {
+  return (
+    <SafeFullScreenView>
+      <View style={commonStyles.center}>
+        <PrimaryButton onPress={undefined}>Restaurant</PrimaryButton>
+        <PrimaryButton onPress={undefined}>Back to initial route</PrimaryButton>
+        <PrimaryButton onPress={undefined}>Back</PrimaryButton>
+      </View>
+    </SafeFullScreenView>
+  );
+};
+
+const RestaurantScreen: FC = () => {
+  return (
+    <SafeFullScreenView>
+      <View style={commonStyles.center}>
+        <PrimaryButton onPress={undefined}>Food Detail</PrimaryButton>
+      </View>
+    </SafeFullScreenView>
+  );
+};
+
+const FoodDetailScreen: FC = () => {
+  return (
+    <SafeFullScreenView>
+      <View style={commonStyles.center} />
+    </SafeFullScreenView>
+  );
+};