docs: replace react-navigation with expo-router

README.md

@@ -8,7 +8,7 @@
 
 ![expo](https://img.shields.io/github/package-json/dependency-version/obytes/react-native-template-obytes/expo?label=expo) ![react-native](https://img.shields.io/github/package-json/dependency-version/obytes/react-native-template-obytes/react-native?label=react-native) ![GitHub Repo stars](https://img.shields.io/github/stars/obytes/react-native-template-obytes) ![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/obytes/react-native-template-obytes) ![GitHub issues](https://img.shields.io/github/issues/obytes/react-native-template-obytes) ![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/obytes/react-native-template-obytes)
 
-📱 A template for your next React Native project 🚀, Made with developer experience and performance first: Expo,TypeScript,tailwindcss, Husky, Lint-Staged, react-navigation, react-query, react-hook-form, I18n.
+📱 A template for your next React Native project 🚀, Made with developer experience and performance first: Expo,TypeScript,tailwindcss, Husky, Lint-Staged, expo-router, react-query, react-hook-form, I18n.
 
 # Overview
 
@@ -45,7 +45,7 @@ When creating this starter kit, we had several guiding principles in mind::
 - 💡 A clean project structure with Absolute Imports, to make it easier to navigate and manage your code.
 - 🚫 Lint-staged for running linters and TypeScript checks on Git staged files, to ensure that your code is always up to standards.
 - 🗂 VSCode recommended extensions, settings, and snippets to enhance the developer experience.
-- ☂️ Pre-installed [React Navigation](https://reactnavigation.org/) with examples, to provide a comprehensive navigation solution for your app.
+- ☂️ Pre-installed [Expo Router](https://docs.expo.dev/router/introduction/) with examples, to provide a comprehensive navigation solution for your app.
 - 💫 An auth flow with [zustand](https://github.com/pmndrs/zustand) and [react-native-mmkv](https://github.com/mrousavy/react-native-mmkv) as a storage solution to save sensitive data.
 - 🛠 A simple workflow for building, releasing, and distributing your app using [Github action](https://github.com/features/actions).
 - 🔥 [React Query](https://react-query.tanstack.com/) and [axios](https://github.com/axios/axios) for fetching data, to help you build efficient and performant apps.
@@ -95,7 +95,7 @@ We value the feedback and contributions of our users, and we encourage you to le
 ## 💎 Libraries used
 
 - [Expo](https://docs.expo.io/)
-- [React Navigation](https://reactnavigation.org/)
+- [Expo Router](https://docs.expo.dev/router/introduction/)
 - [Nativewind](https://www.nativewind.dev/)
 - [Flash list](https://github.com/Shopify/flash-list)
 - [React Query](https://tanstack.com/query/v4)

cli/README.md

@@ -8,7 +8,7 @@
 
 ![expo](https://img.shields.io/github/package-json/dependency-version/obytes/react-native-template-obytes/expo?label=expo) ![GitHub Repo stars](https://img.shields.io/github/stars/obytes/react-native-template-obytes) ![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/obytes/react-native-template-obytes) ![GitHub issues](https://img.shields.io/github/issues/obytes/react-native-template-obytes) ![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/obytes/react-native-template-obytes)
 
-📱 A template for your next React Native project 🚀, Made with developer experience and performance first: Expo,TypeScript,tailwindcss, Husky, Lint-Staged, react-navigation, react-query, react-hook-form, I18n.
+📱 A template for your next React Native project 🚀, Made with developer experience and performance first: Expo,TypeScript,tailwindcss, Husky, Lint-Staged, expo-router, react-query, react-hook-form, I18n.
 
 # 🚀 Quick start
 
@@ -52,7 +52,7 @@ When creating this starter kit, we had several guiding principles in mind::
 - 💡 A clean project structure with Absolute Imports, to make it easier to navigate and manage your code.
 - 🚫 Lint-staged for running linters and TypeScript checks on Git staged files, to ensure that your code is always up to standards.
 - 🗂 VSCode recommended extensions, settings, and snippets to enhance the developer experience.
-- ☂️ Pre-installed [React Navigation](https://reactnavigation.org/) with examples, to provide a comprehensive navigation solution for your app.
+- ☂️ Pre-installed [Expo Router](https://docs.expo.dev/router/introduction/) with examples, to provide a comprehensive navigation solution for your app.
 - 💫 An auth flow with [zustand](https://github.com/pmndrs/zustand) and [react-native-mmkv](https://github.com/mrousavy/react-native-mmkv) as a storage solution to save sensitive data.
 - 🛠 A simple workflow for building, releasing, and distributing your app using [Github action](https://github.com/features/actions).
 - 🔥 [React Query](https://react-query.tanstack.com/) & [axios](https://github.com/axios/axios) and [axios](https://github.com/axios/axios) for fetching data, to help you build efficient and performant apps.
@@ -102,7 +102,7 @@ We value the feedback and contributions of our users, and we encourage you to le
 ## 💎 Libraries used
 
 - [Expo](https://docs.expo.io/)
-- [React Navigation](https://reactnavigation.org/)
+- [Expo Router](https://docs.expo.dev/router/introduction/)
 - [Nativewind](https://www.nativewind.dev/)
 - [Flash list](https://github.com/Shopify/flash-list)
 - [React Query](https://tanstack.com/query/v4)

docs/src/content/docs/guides/authentication.mdx

@@ -68,4 +68,4 @@ Let's imagine we have a simple application that has a login navigator and a home
 
 In this case, you only need to retrieve the status from the authentication store and display the appropriate navigation based on the status.
 
-<CodeBlock file="src/navigation/root-navigator.tsx" />
+<CodeBlock file="src/app/(app)/_layout.tsx" />

docs/src/content/docs/guides/data-fetching.mdx

@@ -76,7 +76,7 @@ Now that we have created our custom hook, we can use it in our app to display a
 2. Import and use the usePosts hook we created earlier to fetch the list of posts.
 3. Use the fetched data to display a list of posts.
 
-<CodeBlock file="src/screens/feed/list.tsx" />
+<CodeBlock file="src/app/(app)/index.tsx" />
 
 As you can see in the code above, we use the `usePosts` hook to fetch data and handle the loading state. This allows us to display a loading indicator while the data is being fetched, and then display the list of posts once the data is ready.
 
@@ -94,7 +94,7 @@ Below is the complete code for the `use-post.ts` file:
 
 Now our hook is ready to be used in our post details screen:
 
-<CodeBlock file="src/screens/feed/post.tsx" />
+<CodeBlock file="src/app/feed/[id].tsx" />
 
 ### Add new post
 
@@ -124,7 +124,7 @@ Exactly the same way we did in [form section](../ui-and-theme/Forms.mdx) while c
 3. Get `mutate` function from `useAddPost` hook and call it when the form is submitted
 4. You can use the `isLoading` state to display a loading indicator while the data is being sent to the server and then redirect the user to the feed screen on success.
 
-<CodeBlock file="src/screens/feed/add-post.tsx" />
+<CodeBlock file="src/app/feed/add-post.tsx" />
 
 ## Create API Hooks with Vs Code Snippets
 

docs/src/content/docs/overview.md

@@ -39,7 +39,7 @@ When creating this starter kit, we had several guiding principles in mind::
 - 💡 A clean project structure with Absolute Imports, to make it easier to navigate and manage your code.
 - 🚫 Lint-staged for running linter and TypeScript checks on Git staged files, to ensure that your code is always up to standards.
 - 🗂 VSCode recommended extensions, settings, and snippets to enhance the developer experience.
-- ☂️ Pre-installed [React Navigation](https://reactnavigation.org/) with examples, to provide a comprehensive navigation solution for your app.
+- ☂️ Pre-installed [Expo Router](https://docs.expo.dev/router/introduction/) with examples, to provide a comprehensive navigation solution for your app.
 - 💫 An auth flow with [zustand](https://github.com/pmndrs/zustand) and [react-native-mmkv](https://github.com/mrousavy/react-native-mmkv) as a storage solution to save sensitive data.
 - 🛠 A simple workflow for building, releasing, and distributing your app using [Github action](https://github.com/features/actions).
 - 🔥 [React Query](https://react-query.tanstack.com/) and [axios](https://github.com/axios/axios) for fetching data, to help you build efficient and performant apps.
@@ -77,7 +77,7 @@ We value the feedback and contributions of our users, and we encourage you to le
 ## 💎 Libraries used
 
 - [Expo](https://docs.expo.io/)
-- [React Navigation](https://reactnavigation.org/)
+- [Expo Router](https://docs.expo.dev/router/introduction/)
 - [Nativewind](https://www.nativewind.dev/)
 - [Flash list](https://github.com/Shopify/flash-list)
 - [React Query](https://tanstack.com/query/v4)

docs/src/content/docs/testing/unit-testing.mdx

@@ -22,7 +22,7 @@ Also worth mentioning that we should aim to test the following:
 
 Let's start by writing a simple test for our login screen. We will test the following login form component:
 
-<CodeBlock file="./src/screens/login/login-form.tsx" />
+<CodeBlock file="./src/components/login-form.tsx" />
 
 :::tip
 
@@ -39,7 +39,7 @@ Now, let's write a test for the login form component. We will test the following
 
 First, let's create a new file called `login-form.test.tsx` in the `src/screens/login` directory. Then, add the following code to it:
 
-<CodeBlock file="./src/screens/login/login-form.test.tsx" />
+<CodeBlock file="./src/components/login-form.test.tsx" />
 
 As you may notice from the code, we are importing a bunch of things from the `@/core/test-utils` directory. This is a simple file that exports everything from the `@testing-library/react-native` library and overrides the `render` function to wrap the component with the providers we need. This way, we don't have to import the providers in every test file.
 

docs/src/content/docs/ui-and-theme/components.mdx

@@ -49,7 +49,7 @@ Based on your needs, you can either use them as they are or customize them to fi
 
 Here is a simple example of more project specific component that uses some primitives components from the `ui` folder.
 
-<CodeBlock file="src/screens/feed/card.tsx" />
+<CodeBlock file="src/components/card.tsx" />
 
 :::tip
 To save time when creating new components or screens, we can simply start typing `comp` and press Enter to generate a new component with the correct structure.
@@ -353,12 +353,10 @@ We provide a simple `Modal` component using the `@gorhom/bottom-sheet` library t
 
 We opt to use a bottom sheet instead of a modal to make it more flexible and easy to use. as well as having full control over the logic and the UI.
 
-Based on your needs, you can use the `Modal` or `DynamicModal` if you don't have a fixed height for the modal content.
+Based on your needs, you can use the `Modal` if you don't have a fixed height for the modal content.
 
 <CodeBlock file="src/ui/core/modal/modal.tsx" />
 
-<CodeBlock file="src/ui/core/modal/dynamic-modal.tsx" />
-
 **Props**
 
 - All `@gorhom/bottom-sheet` Props are supported
@@ -373,22 +371,13 @@ import { Modal, useModal, View, Button, Text } from '@/ui';
 
 const MyComponent = () => {
   const modal = useModal();
-  const dynamicModal = useModal();
+
   return (
     <View className="flex flex-col items-center justify-center">
       <Button variant="primary" label="Show Modal" onPress={modal.present} />
       <Modal ref={modal.ref} title="modal title" snapPoints={['60%']}>
         <Text>Modal Content</Text>
       </Modal>
-      <Button
-        variant="primary"
-        label="Show Modal"
-        onPress={dynamicModal.present}
-      />
-
-      <DynamicModal ref={dynamicModal.ref} title="Dynamic modal title">
-        <Text> Dynamic modal Content</Text>
-      </DynamicModal>
     </View>
   );
 };

docs/src/content/docs/ui-and-theme/ui-theming.mdx

@@ -40,7 +40,7 @@ For more details about Nativewind you can check their [documentation](https://ww
 
 Here is an example of how your component should look like:
 
-<CodeBlock file="src/screens/feed/card.tsx" />
+<CodeBlock file="src/components/card.tsx" />
 
 You guess it right, all components imported from `@/ui` are wrapped with `styled` component from Nativewind and ready to accept Tailwind CSS class names. Enjoy 🥳
 
@@ -73,12 +73,12 @@ This template comes with dark mode support out of the box, and it's very easy to
 
 ### Implementation
 
-Since we're using [nativewind](https://www.nativewind.dev/) (which uses Tailwind CSS under the hood) and react-navigation we let them handle the application of theme, and we just take care of the colors we want.
-We set the colors in `ui/theme/colors.js` and we use them in our hook `useThemeConfig.tsx` to get the theme object that we pass to react-navigation container. For more information check out [react-navigation](https://reactnavigation.org/docs/themes/)
+Since we're using [nativewind](https://www.nativewind.dev/) (which uses Tailwind CSS under the hood) and expo-router we let them handle the application of theme, and we just take care of the colors we want.
+We set the colors in `ui/theme/colors.js` and we use them in our hook `useThemeConfig.tsx` to get the theme object that we pass to ThemeProvider directly. For more information check out [expo-router](https://docs.expo.dev/router/appearance/)
 
-<CodeBlock file="src/navigation/use-theme-config.tsx" />
+<CodeBlock file="src/core/use-theme-config.tsx" />
 
-<CodeBlock file="src/navigation/navigation-container.tsx" />
+<CodeBlock file="src/app/_layout.tsx" />
 
 ### How do we handle theme changes?