Use tabs for Expo vs Community CLI

Author: satya164

versioned_docs/version-7.x/deep-linking.md

@@ -18,7 +18,12 @@ While you don't need to use the `linking` prop from React Navigation, and can ha
 
 Below, we'll go through required configurations so that the deep link integration works.
 
-## Setup with Expo projects
+## Setting up deep links
+
+<Tabs groupId='framework' queryString="framework">
+<TabItem value='expo' label='Expo' default>
+
+### Configuring URL scheme
 
 First, you will want to specify a URL scheme for your app. This corresponds to the string before `://` in a URL, so if your scheme is `example` then a link to your app would be `example://`. You can register for a scheme in your `app.json` by adding a string under the scheme key:
 
@@ -36,55 +41,25 @@ Next, install `expo-linking` which we'd need to get the deep link prefix:
 npx expo install expo-linking
 ```
 
-Then, let's configure React Navigation to use the `scheme` for parsing incoming deep links:
-
-<Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static" default>
+Then you can use `Linking.createURL` to get the prefix for your app:
 
 ```js
-import * as Linking from 'expo-linking';
-
-const prefix = Linking.createURL('/');
-
-/* content */
-
-function App() {
-  const linking = {
-    prefixes: [prefix],
-  };
-
-  return <Navigation linking={linking} />;
-}
+const linking = {
+  prefixes: [Linking.createURL('/'),
+};
 ```
 
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js
-import * as Linking from 'expo-linking';
+See more details below at [Configuring React Navigation](#configuring-react-navigation).
 
-const prefix = Linking.createURL('/');
-
-function App() {
-  const linking = {
-    prefixes: [prefix],
-  };
-
-  return (
-    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
-      {/* content */}
-    </NavigationContainer>
-  );
-}
-```
-
-</TabItem>
-</Tabs>
+<details>
+<summary>Why use `Linking.createURL`?</summary>
 
 It is necessary to use `Linking.createURL` since the scheme differs between the [Expo Dev Client](https://docs.expo.dev/versions/latest/sdk/dev-client/) and standalone apps.
 
 The scheme specified in `app.json` only applies to standalone apps. In the Expo client app you can deep link using `exp://ADDRESS:PORT/--/` where `ADDRESS` is often `127.0.0.1` and `PORT` is often `19000` - the URL is printed when you run `expo start`. The `Linking.createURL` function abstracts it out so that you don't need to specify them manually.
 
+</details>
+
 If you are using universal links, you need to add your domain to the prefixes as well:
 
 ```js
@@ -93,7 +68,7 @@ const linking = {
 };
 ```
 
-### Universal Links on Expo
+### Universal Links on iOS
 
 To set up iOS universal Links in your Expo app, you need to configure your [app config](https://docs.expo.dev/workflow/configuration) to include the associated domains and entitlements:
 
@@ -114,7 +89,7 @@ You will also need to setup [Associated Domains](https://developer.apple.com/doc
 
 See [Expo's documentation on iOS Universal Links](https://docs.expo.dev/linking/ios-universal-links/) for more details.
 
-### App Links on Expo
+### App Links on Android
 
 To set up Android App Links in your Expo app, you need to configure your [app config](https://docs.expo.dev/workflow/configuration) to include the `intentFilters`:
 
@@ -144,7 +119,8 @@ You will also need to [declare the association](https://developer.android.com/tr
 
 See [Expo's documentation on Android App Links](https://docs.expo.dev/linking/android-app-links/) for more details.
 
-## Set up with bare React Native projects
+</TabItem>
+<TabItem value='community-cli' label='Community CLI'>
 
 ### Setup on iOS
 
@@ -300,6 +276,63 @@ After adding them, it should look like this:
 
 Then, you need to [declare the association](https://developer.android.com/training/app-links/verify-android-applinks#web-assoc) between your website and your intent filters by hosting a Digital Asset Links JSON file.
 
+</TabItem>
+</Tabs>
+
+## Configuring React Navigation
+
+To handle deep links, you need to configure React Navigation to use the `scheme` for parsing incoming deep links:
+
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+const linking = {
+  prefixes: [
+    'example://', // Or `Linking.createURL('/')` for Expo apps
+  ],
+};
+
+function App() {
+  return <Navigation linking={linking} />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+const linking = {
+  prefixes: [
+    'example://', // Or `Linking.createURL('/')` for Expo apps
+  ],
+};
+
+function App() {
+  return (
+    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
+      {/* content */}
+    </NavigationContainer>
+  );
+}
+```
+
+</TabItem>
+</Tabs>
+
+If you are using universal links, you need to add your domain to the prefixes as well:
+
+```js
+const linking = {
+  prefixes: [
+    'example://', // Or `Linking.createURL('/')` for Expo apps
+    'https://app.example.com',
+  ],
+};
+```
+
+See [configuring links](configuring-links.md) to see further details on how to configure links in React Navigation.
+
 ## Testing deep links
 
 Before testing deep links, make sure that you rebuild and install the app in your emulator/simulator/device.

versioned_docs/version-7.x/drawer-layout.md

@@ -20,31 +20,36 @@ To use this package, open a Terminal in the project root and run:
 npm install react-native-drawer-layout
 ```
 
-Then, you need to install and configure the libraries that are required by the drawer:
+The library depends on [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) for gestures and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/) for animations.
 
-1. First, install [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/) (at least version 2 or 3).
+<Tabs groupId='framework' queryString="framework">
+<TabItem value='expo' label='Expo' default>
 
-   If you have a Expo managed project, in your project directory, run:
+If you have a Expo managed project, in your project directory, run:
 
-   ```bash
-   npx expo install react-native-gesture-handler react-native-reanimated react-native-worklets
-   ```
+```bash
+npx expo install react-native-gesture-handler react-native-reanimated react-native-worklets
+```
 
-   If you have a bare React Native project, in your project directory, run:
+</TabItem>
+<TabItem value='community-cli' label='Community CLI'>
 
-   ```bash npm2yarn
-   npm install react-native-gesture-handler react-native-reanimated react-native-worklets
-   ```
+If you have a bare React Native project, in your project directory, run:
 
-2. Configure the Reanimated Babel Plugin in your project following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
+```bash npm2yarn
+npm install react-native-gesture-handler react-native-reanimated react-native-worklets
+```
 
-3. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
+After installation, configure the Reanimated Babel Plugin in your project following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
 
-   ```bash
-   npx pod-install ios
-   ```
+</TabItem>
+</Tabs>
 
-We're done! Now you can build and run the app on your device/simulator.
+If you're on a Mac and developing for iOS, you also need to install [pods](https://cocoapods.org/) to complete the linking.
+
+```bash
+npx pod-install ios
+```
 
 ## Quick start
 

versioned_docs/version-7.x/drawer-navigator.md

@@ -20,29 +20,36 @@ To use this navigator, ensure that you have [`@react-navigation/native` and its
 npm install @react-navigation/drawer
 ```
 
-Then, you need to install and configure the libraries that are required by the drawer navigator:
+The navigator depends on [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) for gestures and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/) for animations.
 
-1. First, install [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/) (at least version 2 or 3).
+<Tabs groupId='framework' queryString="framework">
+<TabItem value='expo' label='Expo' default>
 
-   If you have a Expo managed project, in your project directory, run:
+If you have a Expo managed project, in your project directory, run:
 
-   ```bash
-   npx expo install react-native-gesture-handler react-native-reanimated react-native-worklets
-   ```
+```bash
+npx expo install react-native-gesture-handler react-native-reanimated react-native-worklets
+```
 
-   If you have a bare React Native project, in your project directory, run:
+</TabItem>
+<TabItem value='community-cli' label='Community CLI'>
 
-   ```bash npm2yarn
-   npm install react-native-gesture-handler react-native-reanimated react-native-worklets
-   ```
+If you have a bare React Native project, in your project directory, run:
 
-2. Configure the Reanimated Babel Plugin in your project following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
+```bash npm2yarn
+npm install react-native-gesture-handler react-native-reanimated react-native-worklets
+```
 
-3. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
+After installation, configure the Reanimated Babel Plugin in your project following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
 
-   ```bash
-   npx pod-install ios
-   ```
+</TabItem>
+</Tabs>
+
+If you're on a Mac and developing for iOS, you also need to install [pods](https://cocoapods.org/) to complete the linking.
+
+```bash
+npx pod-install ios
+```
 
 ## Usage
 

versioned_docs/version-7.x/getting-started.md

@@ -42,54 +42,44 @@ Otherwise, you can follow the instructions below to install React Navigation int
 
 ## Installation
 
-Install the required packages in your React Native project:
+The `@react-navigation/native` package contains the core functionality of React Navigation.
+
+In your project directory, run:
 
 ```bash npm2yarn
 npm install @react-navigation/native
 ```
 
-React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. Don't worry too much about this for now, it'll become clear soon enough! To frontload the installation work, let's also install and configure dependencies used by most navigators, then we can move forward with starting to write some code.
+### Installing dependencies
 
-The libraries we will install now are [`react-native-screens`](https://github.com/software-mansion/react-native-screens) and [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context). If you already have these libraries installed and at the latest version, you are done here! Otherwise, read on.
+Let's also install and configure dependencies used by most navigators. The libraries we will install now are [`react-native-screens`](https://github.com/software-mansion/react-native-screens) and [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).
 
-### Installing dependencies into an Expo managed project
+<Tabs groupId='framework' queryString="framework">
+<TabItem value='expo' label='Expo' default>
 
 In your project directory, run:
 
 ```bash
 npx expo install react-native-screens react-native-safe-area-context
 ```
 
-This will install versions of these libraries that are compatible.
-
-You can now continue to ["Hello React Navigation"](hello-react-navigation.md) to start writing some code.
+This will install versions of these libraries that are compatible with your Expo SDK version.
 
-### Installing dependencies into a bare React Native project
+</TabItem>
+<TabItem value='community-cli' label='Community CLI'>
 
 In your project directory, run:
 
 ```bash npm2yarn
 npm install react-native-screens react-native-safe-area-context
 ```
 
-:::note
-
-You might get warnings related to peer dependencies after installation. They are usually caused by incorrect version ranges specified in some packages. You can safely ignore these warnings as long as your app builds and works as expected.
-
-:::
-
 If you're on a Mac and developing for iOS, you need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
 
 ```bash
 npx pod-install ios
 ```
 
-:::info
-
-When you use a navigator (such as stack navigator), you'll need to follow the installation instructions of that navigator for any additional dependencies. If you're getting an error "Unable to resolve module", you need to install that module in your project.
-
-:::
-
 #### Configuring `react-native-screens` on Android
 
 [`react-native-screens`](https://github.com/software-mansion/react-native-screens) requires one additional configuration to properly work on Android.
@@ -119,8 +109,8 @@ class MainActivity: ReactActivity() {
 }
 ```
 
-  </TabItem>
-  <TabItem value='java' label='Java'>
+</TabItem>
+<TabItem value='java' label='Java'>
 
 ```java
 // highlight-start
@@ -163,12 +153,21 @@ To opt out, in `AndroidManifest.xml`, in the `<application>` tag (or `<activity>
 </application>
 ```
 
+</TabItem>
+</Tabs>
+
 ## Setting up React Navigation
 
 Once you've installed and configured the dependencies, you can move on to setting up your project to use React Navigation.
 
 When using React Navigation, you configure [**navigators**](glossary-of-terms.md#navigator) in your app. Navigators handle the transition between screens in your app and provide UI such as header, tab bar etc.
 
+:::info
+
+When you use a navigator (such as stack navigator), you'll need to follow the installation instructions of that navigator for any additional dependencies.
+
+:::
+
 There are 2 primary ways to configure the navigators:
 
 ### Static configuration