From f972a6dfbd2020e59201108fffabb80d8ee4b4a2 Mon Sep 17 00:00:00 2001
From: Jakub Gonet <jakub.gonet@swmansion.com>
Date: Wed, 9 Oct 2024 15:24:04 +0200
Subject: [PATCH] Add information about exported shared components and usage
 (#596)

Co-authored-by: Krzysztof Magiera <krzys@swmansion.com>
---
 packages/docs/docs/development.md | 49 +++++++++++++++++++++++++------
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/packages/docs/docs/development.md b/packages/docs/docs/development.md
index 5bb4e432f..aa78f45f3 100644
--- a/packages/docs/docs/development.md
+++ b/packages/docs/docs/development.md
@@ -90,12 +90,43 @@ Unfortunately debugging isn't available for the frontend code, however you can u
 
 ## Shared app template
 
-In `test-apps/` directory there is `shared/` directory with the common UI code for
-apps. To use this code in the app, use `copy.sh` script. It should use minimal
-set of dependencies, ideally nothing except react-native.
-If app uses expo-router, we additionally copy `shared/navigation/` directory
-which uses expo-router and `@expo/vector-icons`.
-
-If app wants to use this shared code, it should add an entry to .gitignore for
-shared directory under its own `src/` and run copy script. If shared code is
-updated, every app using it should rerun the copy script. 
+We provide few shared components with common code across tests apps in `shared/`
+directory.
+They only depend on `react-native`. Components in `shared/navigation` additionally
+depend on `expo-router` and `expo-icons`.
+
+To use them in the app:
+1. Add npm command in test app package.json
+    - for expo-router apps: `"copy-shared": "../shared/copy.sh expo-router ./shared"`. 
+    - for RN apps: `"copy-shared": "../shared/copy.sh bare ./shared"`.
+2. Run it: `npm run copy-shared`. This copies shared components to `./shared`.
+3. For RN apps, replace `App.tsx` with the `./shared/MainScreen.tsx` component.
+    ```ts
+    import {MainScreen} from './shared/MainScreen';
+
+    export default MainScreen;
+    ```
+4. For apps with expo router, replace `app/(tabs)/_layout.tsx` and
+   `app/(tabs)/index.tsx` files.
+   ```ts
+   // contents of `app/(tabs)/_layout.ts`
+   import { TabLayout } from "@/shared/navigation/TabLayout";
+
+   export default TabLayout;
+   ```
+
+   ```ts
+   // contents of `app/(tabs)/index.ts`
+   import { MainScreen } from "@/shared/MainScreen";
+
+   export default MainScreen;
+   ```
+
+  You can also use other components in `shared` (e.g. `Text`, `Button`,
+  `useScheme`) to theme the app.
+  
+  After updating shared components you need to copy them again by running
+  `npm run copy-shared` in every test app. 
+
+`shared/copy.sh bare|expo-router DEST` script works by copying shared directory to `DEST`
+and removing `navigation` directory if `bare` argument is used.