[docs] "Existing React Native apps" and "Existing native apps" docs groups

docs/common/error-utilities.ts

@@ -446,4 +446,7 @@ const RENAMED_PAGES: Record<string, string> = {
 
   // Deprecated Webpack support
   '/guides/customizing-webpack': '/archive/customizing-webpack',
+
+  // Stop encouraging usage of Expo Go when using native modules
+  '/bare/using-expo-client': '/archive/using-expo-client',
 };

docs/constants/navigation.js

@@ -157,6 +157,18 @@ const general = [
       ],
       { expanded: false }
     ),
+    makeSection('Existing React Native apps', [
+      makePage('bare/overview.mdx'),
+      makePage('bare/installing-expo-modules.mdx'),
+      makePage('bare/using-expo-cli.mdx'),
+      makePage('bare/installing-updates.mdx'),
+      makePage('bare/install-dev-builds-in-bare.mdx'),
+      makePage('bare/upgrade.mdx'),
+    ]),
+    makeSection('Existing native apps', [
+      makePage('brownfield/overview.mdx'),
+      makePage('brownfield/installing-expo-modules.mdx'),
+    ]),
     makeGroup(
       'Reference',
       [
@@ -415,15 +427,6 @@ const general = [
         makePage('accounts/working-together.mdx'),
         makePage('accounts/sso.mdx'),
       ]),
-      makeSection('Bare React Native', [
-        makePage('bare/overview.mdx'),
-        makePage('bare/installing-expo-modules.mdx'),
-        makePage('bare/using-expo-cli.mdx'),
-        makePage('bare/installing-updates.mdx'),
-        makePage('bare/using-expo-client.mdx'),
-        makePage('bare/install-dev-builds-in-bare.mdx'),
-        makePage('bare/upgrade.mdx'),
-      ]),
     ],
     { expanded: true }
   ),

docs/pages/bare/install-dev-builds-in-bare.mdx

@@ -1,33 +1,37 @@
 ---
-title: Install development builds in bare React Native
-sidebar_title: Install development builds in bare React Native
-description: Learn how to configure development builds for bare React Native projects.
+title: Install expo-dev-client in a bare React Native project
+sidebar_title: Install expo-dev-client
+description: Learn how to install and configure expo-dev-client in bare React Native projects.
 ---
 
 import { Terminal } from '~/ui/components/Snippet';
 import { Step } from '~/ui/components/Step';
 import ImageSpotlight from '~/components/plugins/ImageSpotlight';
+import { Collapsible } from '~/ui/components/Collapsible';
 
+The following guide explains how to install and configure `expo-dev-client` in an existing React Native project.
 
-The installation steps on this page are only required to add the `expo-dev-client` library to a React Native or a bare project. To add the `expo-dev-client` library to an existing managed project, see ["Create a development build"](/develop/development-builds/create-a-build/).
+<Collapsible summary="Do you need to create a new project?">
 
-If you're starting your project, you can create a new project with our `with-dev-client` template. Run the following command to initialize the project:
+If you're starting a project, you can create a new project with the `with-dev-client` template. Run this command to initialize the project:
 
 <Terminal cmd={['$ npx create-expo-app -e with-dev-client']} />
 
-Otherwise, if you already have an existing React Native or a bare project, follow the steps below to add `expo-dev-client` to it.
+</Collapsible>
 
-<Step label="1">
+<Collapsible summary="Do you use Continuous Native Generation (CNG) in your project?">
 
-## Install Expo modules
+You may be reading the wrong guide then! To use `expo-dev-client` in a project that uses [CNG](/workflow/continuous-native-generation/), see ["Create a development build"](/develop/development-builds/create-a-build/).
 
-If you created your project with `npx react-native init` and do not have any other Expo packages installed, **you will need to [install Expo modules](/bare/installing-expo-modules)** before proceeding.
+</Collapsible>
 
-Otherwise, if you already have `expo` and/or other Expo modules up and running, you can skip this step.
+## Prerequisites
 
-</Step>
+**The `expo` package must be installed and configured**: if you created your project with `npx react-native init` and do not have any other Expo packages installed, you will need to [install Expo modules](/bare/installing-expo-modules) before proceeding.
 
-<Step label="2">
+## Installation
+
+<Step label="1">
 
 ## Install expo-dev-client
 
@@ -43,19 +47,27 @@ If your project doesn't have an **ios/** directory, you can skip this step.
 
 </Step>
 
-<Step label="3">
+<Step label="2">
 
 ## Configure deep links
 
-Development builds use deep links to open projects from the QR code. If you have added a custom deep link scheme to your project, your development build will use it. However, if this isn't the case, you need to configure the deep link support for your app. The `uri-scheme` package will do this for you once you have chosen a scheme.
+Expo CLI uses a deep link to launch your project, and it's also useful if you use plan to [use `expo-dev-client` for launching preview updates](/eas-update/getting-started/) if you have added a custom deep link scheme to your project. If you haven't configured a `scheme` for your app yet to support deep linking, then you can use `uri-scheme` package to do this for you.
 
-<Terminal cmd={['$ npx uri-scheme add <your scheme>']} />
+<Terminal
+  cmd={[
+    "# List your project's schemes",
+    '$ npx uri-scheme list',
+    '',
+    '# Add a scheme to your project',
+    '$ npx uri-scheme add <your scheme>',
+  ]}
+/>
 
 For more information, see [uri-scheme package](https://www.npmjs.com/package/uri-scheme).
 
 </Step>
 
-<Step label="4">
+<Step label="3">
 
 ## Add additional optional configuration
 
@@ -71,10 +83,10 @@ For more information, see [Error handling](/develop/development-builds/use-devel
 
 </Step>
 
-<Step label="5">
+<Step label="4">
 
-## Build and install
+## Build and install the app
 
-You're now ready to [build your first development build](/develop/development-builds/create-a-build/#initialize-eas-build).
+Create a debug build of your app using the tools of your choice. For example, you can do this [locally with Expo CLI](/guides/local-app-development/) or [in the cloud with EAS Build](/develop/development-builds/create-a-build/).
 
 </Step>

docs/pages/bare/installing-expo-modules.mdx

@@ -12,7 +12,7 @@ To use Expo modules in your app, you will need to install and configure the `exp
 
 The `expo` package has a small footprint; it includes only a minimal set of packages that are needed in nearly every app and the module and autolinking infrastructure that other Expo SDK packages are built with. Once the `expo` package is installed and configured in your project, you can use `npx expo install` to add any other Expo module from the SDK.
 
-Depending on how you [initialized the project](/bare/overview/), there are two ways you can install the Expo modules: [automatic](#automatic-installation) or [manual](#manual-installation).
+Depending on how you [initialized the project](/bare/overview/), there are two ways you can install the Expo modules: [automatically](#automatic-installation) or [manually](#manual-installation).
 
 ## Automatic installation
 

docs/pages/bare/installing-updates.mdx

@@ -1,18 +1,32 @@
 ---
-title: Add expo-updates to an existing project
-description: Learn how to add expo-updates to an existing React Native project.
+title: Install expo-updates in a bare React Native project
+sidebar_title: Install expo-updates
+description: Learn how to install and configure expo-updates in bare React Native projects.
 ---
 
 import { Terminal } from '~/ui/components/Snippet';
 import { DiffBlock } from '~/ui/components/Snippet';
+import { Collapsible } from '~/ui/components/Collapsible';
 
-The `expo-updates` library fetches and manages updates received from a remote server. It supports [EAS Update](/eas-update/introduction), a hosted service that serves updates for projects using the `expo-updates` library.
+The `expo-updates` library fetches and manages updates to app JavaScript and assets received from a remote server. It supports [EAS Update](/eas-update/introduction), a hosted service that serves updates and provides a variety of tools for managing them. It can also be configured to work with a [custom server](/eas-update/custom-updates-server/). This guide explains how set it up for use with EAS Update.
 
-> If you are creating a new project, we recommend using `npx create-expo-app --template bare-minimum` (or `yarn create expo-app --template bare-minimum`) instead of `npx react-native init` because it will handle the following configuration for you automatically. It includes the `expo-updates` [config plugin](/config-plugins/introduction/), which will handle the following steps for you.
+<Collapsible summary="Do you need to create a new project?">
 
-## Installation
+If you are creating a new project, we recommend using `npx create-expo-app --template bare-minimum` (or `yarn create expo-app --template bare-minimum`) because it will handle the following configuration for you automatically. It includes the `expo-updates` [config plugin](/config-plugins/introduction/), which will handle the installation steps for you.
+
+</Collapsible>
+
+<Collapsible summary="Do you use Continuous Native Generation (CNG) in your project?">
+
+You may be reading the wrong guide then! To use `expo-updates` in a project that uses [CNG](/workflow/continuous-native-generation/), refer to the [EAS Update "Get started" guide](/eas-update/getting-started/).
 
-The `expo-updates` library requires that your project already has [Expo modules configured](/bare/installing-expo-modules). Be sure to install it before continuing.
+</Collapsible>
+
+## Prerequisites
+
+**The `expo` package must be installed and configured**: if you created your project with `npx react-native init` and do not have any other Expo packages installed, you will need to [install Expo modules](/bare/installing-expo-modules) before proceeding.
+
+## Installation
 
 To get started, install `expo-updates`:
 
@@ -24,7 +38,7 @@ Then, install pods:
 
 Once installation is complete, apply the changes from the following diffs to configure `expo-updates` in your project.
 
-## Configuration in JavaScript and JSON
+### Configuration in JavaScript and JSON
 
 Modify the `expo` section of **app.json**. (If you originally created your app using `npx react-native init`, you will need to add this section.)
 The changes below add the updates URL to the Expo configuration.
@@ -79,7 +93,7 @@ If you want to set up a [custom server](/eas-update/custom-updates-server) inste
  }
 ```
 
-## Configuration for iOS
+### Configuration for iOS
 
 Add the file **Podfile.properties.json** to the **ios** directory:
 
@@ -137,7 +151,7 @@ Add the **Supporting** directory containing **Expo.plist** to your project in Xc
 </plist>
 ```
 
-## Configuration for Android
+### Configuration for Android
 
 Modify **android/app/build.gradle** to check for the JS engine configuration (JSC or Hermes) in Expo files:
 

docs/pages/bare/overview.mdx

@@ -1,50 +1,37 @@
 ---
-title: 'Bare React Native: Overview'
+title: Overview of using Expo with existing React Native apps
 sidebar_title: Overview
 hideTOC: true
-description: An overview of bare React Native apps with Expo tools.
+description: Learn how to use Expo tools and services with existing React Native apps.
 ---
 
 import { BoxLink } from '~/ui/components/BoxLink';
 import { Terminal } from '~/ui/components/Snippet';
 import { DEMI, CODE } from '~/ui/components/Text';
+import {
+  BookOpen02Icon,
+  Rocket02Icon,
+  Lightbulb01Icon,
+  RefreshCw02Icon,
+  BuildArtifactIcon,
+  ChevronUpDoubleIcon,
+} from '@expo/styleguide-icons';
 
-A bare React Native app is a project where developers make direct changes to their native **android** and **ios** project directories rather than continuously generating them on demand using [app config](/workflow/configuration/) and [prebuild](/workflow/prebuild). All tools and services offered by Expo including [EAS](/eas), Expo CLI, and the libraries in the Expo SDK, are built around bare React Native apps.
+If you have a React Native app that doesn't use any Expo tools, you might be wondering what Expo can provide for you, why you might want to use Expo tools and services, and how to get started.
 
-## Prerequisites
+**All tools and services provided by Expo work great in any React Native app**.
 
-Before you get started with a React Native app, make sure you have set up your developer environment from [React Native](https://reactnative.dev/docs/environment-setup).
+You can use [EAS](/eas) to get quickly set up with a professional CI/CD workflow for building, reviewing, deploying, and updating your apps. [Expo CLI](/more/expo-cli/) provides the best command-line experience for working with React Native. The [Expo SDK](/versions/latest/) is an extended standard library for React Native. It gives developers high-quality, well maintained native libraries that use consistent API conventions to make them easier to learn and use.
 
-## Get started
+If you've ever written a native module for React Native, you'll be surprised how much easier it is to build and maintain modules with the idiomatic Swift and Kotlin DSL provided by the [Expo Modules API](/modules/overview/).
 
-To bootstrap a new React Native project, use `create-expo-app` and run the following command:
+There's so much more to explore, and the links below will help you to explore the options available to you.
 
-<Terminal
-  cmd={['# Create a new bare project', '$ npx create-expo-app --template bare-minimum']}
-  cmdCopy="npx create-expo-app --template bare-minimum"
-/>
-
-> If you have an existing project or want to bootstrap with `npx react-native init`, then you need to [install the `expo` package](/bare/installing-expo-modules) manually.
-
-Navigate into your project directory, and run the following commands to build the app locally for each platform:
-
-<Terminal
-  cmd={[
-    '# Build your native Android project',
-    '$ npx expo run:android',
-    '',
-    '# Build your native iOS project',
-    '$ npx expo run:ios',
-  ]}
-/>
-
-> Learn more about [compiling native apps](/more/expo-cli/#compiling).
-
-## Next steps
+## Next Steps
 
 <BoxLink
   title="Install Expo modules"
-  description="If you have already initialized a React Native app without `create-expo-app`, learn how to install the Expo module library."
+  Icon={Rocket02Icon}
   description={
     <>
       If you have already initialized a React Native app without <CODE>create-expo-app</CODE>, learn
@@ -54,22 +41,38 @@ Navigate into your project directory, and run the following commands to build th
   href="/bare/installing-expo-modules"
 />
 <BoxLink
-  title="Install libraries"
-  description="Learn how to install and configure native libraries."
-  href="/workflow/using-libraries#installing-a-third-party-library"
+  title="Use Expo SDK"
+  Icon={BookOpen02Icon}
+  description="Use one of the many libraries provided by the Expo SDK, an extensive set of libraries that provide access to native APIs."
+  href="/versions/"
+/>
+<BoxLink
+  title="Write native modules"
+  description="Use the Expo Modules API to write native modules using Swift and Kotlin."
+  Icon={Lightbulb01Icon}
+  href="/modules/overview/"
+/>
+<BoxLink
+  title="Use Expo CLI"
+  Icon={BookOpen02Icon}
+  description="Learn about the many benefits Expo CLI provides over @react-native-community/cli."
+  href="/bare/using-expo-cli/"
+/>
+<BoxLink
+  title="Native project upgrade helper"
+  Icon={ChevronUpDoubleIcon}
+  description="View file-by-file diffs of all the changes you need to make to your native projects to upgrade them to the next Expo SDK and React Native version."
+  href="/bare/upgrade/"
 />
-<BoxLink title="Use Expo SDK" description="Start adding features to your app." href="/versions/" />
 <BoxLink
   title="Adopt Prebuild"
-  description={
-    <>
-      Automate your native directories using the <DEMI>app.json</DEMI>.
-    </>
-  }
+  Icon={RefreshCw02Icon}
+  description="Learn how to simplify maintaining your native projects by generating them on demand from configuration."
   href="/guides/adopting-prebuild"
 />
 <BoxLink
   title="App distribution"
+  Icon={BuildArtifactIcon}
   description="Build and submit your app to the app store with a single command."
   href="/distribution/introduction"
 />