Skip to content

Commit

Permalink
[docs] Rough outline for brownfield docs
Browse files Browse the repository at this point in the history
  • Loading branch information
brentvatne committed Mar 12, 2024
1 parent 3af31e2 commit 7b69247
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 1 deletion.
6 changes: 5 additions & 1 deletion docs/constants/navigation.js
Expand Up @@ -412,7 +412,7 @@ const general = [
makePage('accounts/working-together.mdx'),
makePage('accounts/sso.mdx'),
]),
makeSection('Bare React Native', [
makeSection('Existing React Native apps', [
makePage('bare/overview.mdx'),
makePage('bare/installing-expo-modules.mdx'),
makePage('bare/using-expo-cli.mdx'),
Expand All @@ -422,6 +422,10 @@ const general = [
makePage('bare/error-recovery.mdx'),
makePage('bare/upgrade.mdx'),
]),
makeSection('Existing Native apps', [
makePage('brownfield/overview.mdx'),
makePage('brownfield/installing-expo-modules.mdx'),
]),
],
{ expanded: true }
),
Expand Down
52 changes: 52 additions & 0 deletions docs/pages/brownfield/installing-expo-modules.mdx
@@ -0,0 +1,52 @@
---
title: Install Expo modules
description: Learn how to prepare your existing native project to install and use Expo modules and the module API.
---

import InstallSection from '~/components/plugins/InstallSection';
import { DiffBlock } from '~/ui/components/Snippet';
import { YesIcon, NoIcon } from '~/ui/components/DocIcons';
import { Collapsible } from '~/ui/components/Collapsible';
import Step from '~/components/Step';

## Prerequisites

You should have a native project with React Native installed and configured to render a root view.

## Install Expo modules

First, add the `expo` package to your project. Ensure you are using a version of the `expo` package that is compatible with the React Native version in your project. [Learn more](/versions/latest/#each-expo-sdk-version-depends-on-a-react-native-version).

<Terminal cmdCopy="npm install expo" />

### iOS

<Step label="1">
Next thing goes here
</Step>

<Step label="2">
Next thing goes here again
</Step>

<Step label="3">
And more if needed
</Step>

### Android

<Step label="1">
Next thing goes here but for Android this time
</Step>

<Step label="2">
Next thing goes here again
</Step>

<Step label="3">
And more if needed
</Step>

## Limitations

Here we list limitations.
41 changes: 41 additions & 0 deletions docs/pages/brownfield/overview.mdx
@@ -0,0 +1,41 @@
---
title: Integrating Expo tools into existing native apps
sidebar_title: Overview
hideTOC: true
description: An overview of how you can integrate Expo tools into existing native apps ("brownfield" apps).
---

import { BoxLink } from '~/ui/components/BoxLink';
import { Terminal } from '~/ui/components/Snippet';
import { DEMI, CODE } from '~/ui/components/Text';

If you already have a native app for Android and/or iOS and want to learn how to use Expo and React Native in your project, perhaps on a single screen or feature to start, this guide is for you. This type of app is commonly referred to as a "brownfield" app in the React Native ecosystem (as opposed to "greenfield" apps, which are created from scratch using Expo and React Native).

## Compatibility

Expo is primarily built with greenfield apps in mind — not all Expo tools and services are compatible with existing native projects.

| Tool/Service | Supports brownfield? |
| --------------------------------------------------- | -------------------- |
| [Expo SDK](/versions/latest/) | Yes |
| [Expo Modules API](/modules/overview/) | Yes |
| [Expo Router](/router/introduction/) | No |
| [Expo CLI](/more/expo-cli/) | No |
| [Expo Dev Client](/versions/latest/sdk/dev-client/) | No |
| [EAS Build](/build/introduction/) | Yes |
| [EAS Submit](/submit/introduction/) | Yes |
| [EAS Update](/eas-update/introduction/) | No |

## Next steps

<BoxLink
title="Integrating your first React Native view"
description="Learn how to add a React Native root view to your existing native app"
href="<TODO>"
/>

<BoxLink
title="Install Expo modules"
description="Install the Expo Modules API and use it to add existing Expo modules or write your own modules"
href="/brownfield/installing-expo-modules"
/>

0 comments on commit 7b69247

Please sign in to comment.