Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update references to Expo / Expo CLI #3267

Merged
merged 2 commits into from
Aug 17, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/appregistry.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ title: AppRegistry
<div className="banner-native-code-required">
<h3>Project with Native Code Required</h3>
<p>
If you are using the managed <code>expo-cli</code> workflow there is only ever one entry component registered with <code>AppRegistry</code> and it is handled automatically, you do not need to use this API.
If you are using the managed Expo workflow there is only ever one entry component registered with <code>AppRegistry</code> and it is handled automatically (or through [registerRootComponent](https://docs.expo.dev/versions/latest/sdk/register-root-component/)). You do not need to use this API.
</p>
</div>

Expand Down
2 changes: 1 addition & 1 deletion docs/debugging.md
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ You can view installation instructions [in the README](https://github.com/infini
<div className="banner-native-code-required">
<h3>Projects with Native Code Only</h3>
<p>
The following section only applies to projects with native code exposed. If you are using the managed <code>expo-cli</code> workflow, see the guide on <a href="https://docs.expo.dev/workflow/customizing/" target="_blank">ejecting</a> to use this API.
The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/workflow/prebuild/" target="_blank">prebuild</a> to use this API.
</p>
</div>

Expand Down
58 changes: 17 additions & 41 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,52 +10,33 @@ import GuideLinuxAndroid from './\_getting-started-linux-android.md'; import Gui

This page will help you install and build your first React Native app.

**If you are new to mobile development**, the easiest way to get started is with Expo CLI. Expo is a set of tools built around React Native and, while it has many [features](https://expo.io/features), the most relevant feature for us right now is that it can get you writing a React Native app within minutes. You will only need a recent version of Node.js and a phone or emulator. If you'd like to try out React Native directly in your web browser before installing any tools, you can try out [Snack](https://snack.expo.dev/).
**If you are new to mobile development**, the easiest way to get started is with Expo Go. Expo is a set of tools and services built around React Native and, while it has many [features](https://docs.expo.dev), the most relevant feature for us right now is that it can get you writing a React Native app within minutes. You will only need a recent version of Node.js and a phone or emulator. If you'd like to try out React Native directly in your web browser before installing any tools, you can try out [Snack](https://snack.expo.dev/).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably worth adding a deprecation note for expo-cli somewhere?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the best place for the notice is within the tool itself, so we added this note when you run a command with the deprecated expo-cli:

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's great. Just note that if someone ⌘ + F for expo-cli in the website it won't find anything at this stage. I believe it's fine but just so you know 👍


**If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them.

<Tabs groupId="guide" defaultValue={constants.defaultGuide} values={constants.guides}>
<TabItem value="quickstart">

Assuming that you have [Node 14 LTS](https://nodejs.org/en/download/) or greater installed, you can use npm to install the Expo CLI command line utility:
Run the following command to create a new React Native project called "AwesomeProject":

<Tabs groupId="package-manager" defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
<TabItem value="npm">

```shell
npm install -g expo-cli
```

</TabItem>
<TabItem value="yarn">

```shell
yarn global add expo-cli
```

</TabItem>
</Tabs>

Then run the following commands to create a new React Native project called "AwesomeProject":

<Tabs groupId="package-manager" defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
<TabItem value="npm">

```shell
expo init AwesomeProject
npx create-expo-app AwesomeProject

cd AwesomeProject
npm start # you can also use: expo start
npm start # you can also use: npx expo start
```

</TabItem>
<TabItem value="yarn">

```shell
expo init AwesomeProject
yarn create expo-app AwesomeProject

cd AwesomeProject
yarn start # you can also use: expo start
yarn start # you can also use: yarn expo start
```

</TabItem>
Expand All @@ -65,7 +46,7 @@ This will start a development server for you.

<h2>Running your React Native application</h2>

Install the [Expo](https://expo.io) client app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the Camera app.
Install the [Expo Go](https://expo.dev/client) app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo Go app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the default iOS Camera app.

<h3>Modifying your app</h3>

Expand All @@ -79,37 +60,32 @@ Congratulations! You've successfully run and modified your first React Native ap

<h2>Now what?</h2>

Expo also has [docs](https://docs.expo.dev) you can reference if you have questions specific to the tool. You can also ask for help at [Expo forums](https://forums.expo.io).

These tools help you get started quickly, but before committing to building your app with Expo CLI, [read about the limitations](https://docs.expo.dev/introduction/why-not-expo/).

If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:
Expo also has [docs](https://docs.expo.dev) you can reference if you have questions specific to the tool. You can also ask for help on the [Expo Discord](https://chat.expo.dev).

- in the [Expo CLI issues](https://github.com/expo/expo-cli/issues) (for issues related to Expo CLI), or
- in the [Expo issues](https://github.com/expo/expo/issues) (for issues about the Expo client or SDK).
If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it in the [Expo issues](https://github.com/expo/expo/issues).

If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).

<h3>Running your app on a simulator or virtual device</h3>

Expo CLI allows you to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment.
Expo Go allows you to run your React Native app on a physical device without installing iOS and Android native SDKs. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment.

Once you've set these up, you can launch your app on an Android Virtual Device by running `npm run android`, or on the iOS Simulator by running `npm run ios` (macOS only).

<h3>Caveats</h3>

Because you don't build any native code when using Expo to create a project, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.
The Expo Go app is a great tool to get started — it exists to help developers quickly get projects off the ground, to experiment with ideas (such as on [Snack](https://snack.expo.dev/)) and share their work with minimal friction. Expo Go makes this possible by including a feature-rich native runtime made up of every module in the [Expo SDK](https://docs.expo.dev/versions/latest/), so all you need to do to use a module is install the package with `npx expo install` and reload your app.

If you know that you'll eventually need to include your own native code, Expo is still a good way to get started. In that case you'll need to "[eject](https://docs.expo.dev/workflow/customizing/)" eventually to create your own native builds. If you do eject, the "React Native CLI Quickstart" instructions will be required to continue working on your project.
The tradeoff is that the Expo Go app does not allow you to add custom native code — you can only use native modules built into the Expo SDK. There are many great libraries available outside of the Expo SDK, and you may even want to build your own native library. You can leverage these libraries with [development builds](https://docs.expo.dev/development/introduction/), or by using ["prebuild"](https://docs.expo.dev/workflow/prebuild/) to generate the native projects, or both. [Learn more about adding native code to projects created with `create-expo-app`](https://docs.expo.dev/workflow/customizing/).

Expo CLI configures your project to use the most recent React Native version that is supported by the Expo client app. The Expo client app usually gains support for a given React Native version with new SDK (released quarterly). You can check [this document](https://docs.expo.dev/versions/latest/#each-expo-sdk-version-depends-on-a) to find out what versions are supported.
`create-expo-app` configures your project to use the most recent React Native version that is supported by the Expo SDK. The Expo Go app usually gains support for a given React Native version with new SDK (released quarterly). You can check [this document](https://docs.expo.dev/versions/latest/#each-expo-sdk-version-depends-on-a) to find out what versions are supported.

If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.
If you're integrating React Native into an existing project, [you can use the Expo SDK](https://docs.expo.dev/bare/installing-expo-modules/) and [development builds](https://docs.expo.dev/development/introduction/), but you will need to set up a native development environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.

</TabItem>
<TabItem value="native">

<p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from Expo, you'll need this section.</p>
<p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you ran "prebuild" from Expo to generate your project's native code, you'll need this section.</p>

The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both Android and iOS, that's fine - you can pick one to start with, since the setup is a bit different.

Expand Down Expand Up @@ -156,7 +132,7 @@ The instructions are a bit different depending on your development operating sys

## Unsupported

> A Mac is required to build projects with native code for iOS. You can follow the **Expo CLI Quickstart** to learn how to build your app using Expo instead.
> A Mac is required to build projects with native code for iOS. You can follow the **Expo Go Quickstart** to learn how to build your app using Expo instead.

</TabItem>
</Tabs>
Expand All @@ -180,7 +156,7 @@ The instructions are a bit different depending on your development operating sys

## Unsupported

> A Mac is required to build projects with native code for iOS. You can follow the **Expo CLI Quickstart** to learn how to build your app using Expo instead.
> A Mac is required to build projects with native code for iOS. You can follow the **Expo Go Quickstart** to learn how to build your app using Expo instead.

</TabItem>
</Tabs>
Expand Down
14 changes: 7 additions & 7 deletions docs/linking.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,6 @@ title: Linking

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';

<div className="banner-native-code-required">
<h3>Projects with Native Code Only</h3>
<p>
The following section only applies to projects with native code exposed. If you are using the managed <code>expo-cli</code> workflow, see the guide on <a href="http://docs.expo.io/versions/latest/workflow/linking/">Linking</a> in the Expo documentation for the appropriate alternative.
</p>
</div>

`Linking` gives you a general interface to interact with both incoming and outgoing app links.

Every Link (URL) has a URL Scheme, some websites are prefixed with `https://` or `http://` and the `http` is the URL Scheme. Let's call it scheme for short.
Expand All @@ -35,6 +28,13 @@ As mentioned in the introduction, there are some URL schemes for core functional

### Enabling Deep Links

<div className="banner-native-code-required">
<h3>Projects with Native Code Only</h3>
<p>
The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/linking/">Linking</a> in the Expo documentation for the appropriate alternative.
</p>
</div>

If you want to enable deep links in your app, please read the below guide:

<Tabs groupId="syntax" defaultValue={constants.defaultPlatform} values={constants.platforms}>
Expand Down
2 changes: 1 addition & 1 deletion docs/permissionsandroid.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
<div className="banner-native-code-required">
<h3>Project with Native Code Required</h3>
<p>
The following section only applies to projects with native code exposed. If you are using the managed <code>expo-cli</code> workflow, see the guide on <a href="https://docs.expo.dev/guides/permissions/">Permissions</a> in the Expo documentation for the appropriate alternative.
The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/permissions/">Permissions</a> in the Expo documentation for the appropriate alternative.
</p>
</div>

Expand Down
2 changes: 1 addition & 1 deletion docs/publishing-to-app-store.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ title: Publishing to Apple App Store
The publishing process is the same as any other native iOS app, with some additional considerations to take into account.

:::info
If you are using Expo then read the Expo Guide for [Building Standalone Apps](https://docs.expo.dev/classic/building-standalone-apps/).
If you are using Expo, read the Expo guide for [Deploying to App Stores](https://docs.expo.dev/distribution/app-stores/) to build and submit your app for the Apple App Store. This guide works with any React Native app to automate the deployment process.
:::

### 1. Enable App Transport Security
Expand Down
2 changes: 1 addition & 1 deletion docs/pushnotificationios.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ title: '🚧 PushNotificationIOS'
<div className="banner-native-code-required">
<h3>Projects with Native Code Only</h3>
<p>
The following section only applies to projects with native code exposed. If you are using the managed <code>expo-cli</code> workflow, see the guide on <a href="https://docs.expo.dev/versions/latest/sdk/notifications/">Notifications</a> in the Expo documentation for the appropriate alternative.
The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/versions/latest/sdk/notifications/">Notifications</a> in the Expo documentation for the appropriate alternative.
</p>
</div>

Expand Down
4 changes: 3 additions & 1 deletion docs/running-on-device.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con

It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.

If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app—but in order to build and run your app on a device, you will need to eject and install the native code dependencies from the [environment setup guide](environment-setup).
:::info
If you used `create-expo-app` to set up your project, you can run your app on a device in Expo Go by scanning the QR code that is displayed when you run `npm start`. Refer to the Expo guide for [running your project on your device](https://docs.expo.dev/workflow/run-on-device/) for more information.
:::

<Tabs groupId="platform" defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
<TabItem value="android">
Expand Down
4 changes: 4 additions & 0 deletions docs/signed-apk-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ title: Publishing to Google Play Store

Android requires that all apps be digitally signed with a certificate before they can be installed. In order to distribute your Android application via [Google Play store](https://play.google.com/store) it needs to be signed with a release key that then needs to be used for all future updates. Since 2017 it is possible for Google Play to manage signing releases automatically thanks to [App Signing by Google Play](https://developer.android.com/studio/publish/app-signing#app-signing-google-play) functionality. However, before your application binary is uploaded to Google Play it needs to be signed with an upload key. The [Signing Your Applications](https://developer.android.com/tools/publishing/app-signing.html) page on Android Developers documentation describes the topic in detail. This guide covers the process in brief, as well as lists the steps required to package the JavaScript bundle.

:::info
If you are using Expo, read the Expo guide for [Deploying to App Stores](https://docs.expo.dev/distribution/app-stores/) to build and submit your app for the Google Play Store. This guide works with any React Native app to automate the deployment process.
:::

## Generating an upload key

You can generate a private signing key using `keytool`.
Expand Down
8 changes: 3 additions & 5 deletions docs/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,22 +30,20 @@ Optionally, you can also use the command given below to get started with your te

:::

You can use [Expo][expo] which has two TypeScript templates:
You can use [Expo][expo], which maintains TypeScript templates, or will prompt you to automatically install and configure TypeScript when a `.ts` or `.tsx` file is added to your project:

<Tabs groupId="package-manager" defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
<TabItem value="npm">

```shell
npm install -g expo-cli
expo init MyTSProject
npx create-expo-app --template
```

</TabItem>
<TabItem value="yarn">

```shell
yarn global add expo-cli
expo init MyTSProject
yarn create expo-app --template
```

</TabItem>
Expand Down
4 changes: 1 addition & 3 deletions docs/upgrading.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ Upgrading to new versions of React Native will give you access to more APIs, vie

## Expo projects

Upgrading your Expo project to a new version of React Native requires updating the `react-native`, `react`, and `expo` package versions in your `package.json` file. Please refer to [this list](https://docs.expo.dev/versions/latest/#each-expo-sdk-version-depends-on-a) to find out what versions are supported. You will also need to set the correct `sdkVersion` in your `app.json` file.

See the [Upgrading Expo SDK Walkthrough](https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/) for up-to-date information about upgrading your project.
Upgrading your Expo project to a new version of React Native requires updating the `react-native`, `react`, and `expo` package versions in your `package.json` file. Expo provides an `upgrade` command to handle upgrading these and any other known dependencies for you. See the [Upgrading Expo SDK Walkthrough](https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/) for up-to-date information about upgrading your project.

## React Native projects

Expand Down
2 changes: 1 addition & 1 deletion website/core/TabsConstants.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const javaScriptSpecLanguages = [
const defaultJavaScriptSpecLanguages = 'flow';

const guides = [
{label: 'Expo CLI Quickstart', value: 'quickstart'},
{label: 'Expo Go Quickstart', value: 'quickstart'},
{label: 'React Native CLI Quickstart', value: 'native'},
];
const defaultGuide = 'quickstart';
Expand Down
Loading