diff --git a/.circleci/config.yml b/.circleci/config.yml
index ac3cbfaa9a0..dd019ade62f 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -64,7 +64,7 @@ jobs:
- run:
name: Check for missing index.html (build errors)
command: |
- if [ ! -f build/react-native/index.html ]; then
+ if [ ! -f build/index.html ]; then
exit 1;
fi
# --------------------------------------------------
@@ -98,6 +98,7 @@ jobs:
git config --global user.name "Website Deployment Script"
echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" > ~/.netrc
echo "Deploying website..."
+ export NODE_OPTIONS=--max_old_space_size=4096
GIT_USER=reactjs-bot CIRCLE_PROJECT_REPONAME=react-native yarn run publish-gh-pages
else
echo "Skipping deploy."
diff --git a/.gitignore b/.gitignore
index 5d4acae64f8..e4401005a3f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,5 +13,6 @@ website/i18n/*
!website/i18n/en.json
.nvmrc
+.docusaurus
website/scripts/sync-api-docs/generatedComponentApiDocs.js
website/scripts/sync-api-docs/extracted.json
diff --git a/docs/_getting-started-linux-android.md b/docs/_getting-started-linux-android.md
new file mode 100644
index 00000000000..0386f23aef8
--- /dev/null
+++ b/docs/_getting-started-linux-android.md
@@ -0,0 +1,177 @@
+## Installing dependencies
+
+You will need Node, the React Native command line interface, a JDK, and Android Studio.
+
+While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.
+
+
Node
+
+Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node 10 or newer.
+
+
Java Development Kit
+
+React Native requires at least the version 8 of the Java SE Development Kit (JDK). You may download and install [OpenJDK](http://openjdk.java.net) from [AdoptOpenJDK](https://adoptopenjdk.net/) or your system packager. You may also [Download and install Oracle JDK 14](https://www.oracle.com/java/technologies/javase-jdk14-downloads.html) if desired.
+
+
Android development environment
+
+Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.
+
+
1. Install Android Studio
+
+[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio intallation wizard, make sure the boxes next to all of the following items are checked:
+
+- `Android SDK`
+- `Android SDK Platform`
+- `Android Virtual Device`
+
+Then, click "Next" to install all of these components.
+
+> If the checkboxes are grayed out, you will have a chance to install these components later on.
+
+Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
+
+
2. Install the Android SDK
+
+Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 10 (Q)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
+
+To do that, open Android Studio, click on "Configure" button and select "SDK Manager".
+
+> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.
+
+Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 10 (Q)` entry, then make sure the following items are checked:
+
+- `Android SDK Platform 29`
+- `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image`
+
+Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `29.0.2` is selected.
+
+Finally, click "Apply" to download and install the Android SDK and related build tools.
+
+
3. Configure the ANDROID_HOME environment variable
+
+The React Native tools require some environment variables to be set up in order to build apps with native code.
+
+Add the following lines to your `$HOME/.bash_profile` or `$HOME/.bashrc` (if you are using `zsh` then `~/.zprofile` or `~/.zshrc`) config file:
+
+```shell
+export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
+export PATH=$PATH:$ANDROID_HOME/tools
+export PATH=$PATH:$ANDROID_HOME/tools/bin
+export PATH=$PATH:$ANDROID_HOME/platform-tools
+```
+
+> `.bash_profile` is specific to `bash`. If you're using another shell, you will need to edit the appropriate shell-specific config file.
+
+Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`.
+
+> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.
+
+
Watchman
+
+Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install/#buildinstall) to compile and install Watchman from source.
+
+> [Watchman](https://facebook.github.io/watchman/docs/install/) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later).
+
+
React Native Command Line Interface
+
+React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-native `, the current stable version of the CLI will be downloaded and executed at the time the command is run.
+
+
Creating a new application
+
+> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues.
+
+React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":
+
+```shell
+npx react-native init AwesomeProject
+```
+
+This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Expo, or if you're adding Android support to an existing React Native project (see [Platform Specific Code](platform-specific-code.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite).
+
+
[Optional] Using a specific version or template
+
+If you want to start a new project with a specific React Native version, you can use the `--version` argument:
+
+```shell
+npx react-native init AwesomeProject --version X.XX.X
+```
+
+You can also start a project with a custom React Native template, like TypeScript, with `--template` argument:
+
+```shell
+npx react-native init AwesomeTSProject --template react-native-template-typescript
+```
+
+
Preparing the Android device
+
+You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.
+
+Either way, you will need to prepare the device to run Android apps for development.
+
+
Using a physical device
+
+If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions [here](running-on-device.md).
+
+
Using a virtual device
+
+If you use Android Studio to open `./AwesomeProject/android`, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:
+
+
+
+If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **Q** API Level 29 image.
+
+> We recommend configuring [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.
+
+Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.
+
+
Running your React Native application
+
+
Step 1: Start Metro
+
+First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts)
+
+To start Metro, run `npx react-native start` inside your React Native project folder:
+
+```shell
+npx react-native start
+```
+
+`react-native start` starts Metro Bundler.
+
+> If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project.
+
+> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more JavaScript.
+
+
Step 2: Start your application
+
+Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:
+
+```shell
+npx react-native run-android
+```
+
+If everything is set up correctly, you should see your new app running in your Android emulator shortly.
+
+`npx react-native run-android` is one way to run your app - you can also run it directly from within Android Studio.
+
+> If you can't get this to work, see the [Troubleshooting](troubleshooting.md#content) page.
+
+
Modifying your app
+
+Now that you have successfully run the app, let's modify it.
+
+- Open `App.js` in your text editor of choice and edit some lines.
+- Press the `R` key twice or select `Reload` from the Developer Menu (`Ctrl + M`) to see your changes!
+
+
That's it!
+
+Congratulations! You've successfully run and modified your first React Native app.
+
+
+
+
Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md).
+
+If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
diff --git a/docs/_getting-started-macos-android.md b/docs/_getting-started-macos-android.md
new file mode 100644
index 00000000000..a30208553ab
--- /dev/null
+++ b/docs/_getting-started-macos-android.md
@@ -0,0 +1,191 @@
+## Installing dependencies
+
+You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio.
+
+While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.
+
+
Node & Watchman
+
+We recommend installing Node and Watchman using [Homebrew](http://brew.sh/). Run the following commands in a Terminal after installing Homebrew:
+
+```shell
+brew install node
+brew install watchman
+```
+
+If you have already installed Node on your system, make sure it is Node 10 or newer.
+
+[Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.
+
+
Java Development Kit
+
+We recommend installing JDK using [Homebrew](http://brew.sh/). Run the following commands in a Terminal after installing Homebrew:
+
+```shell
+brew cask install adoptopenjdk/openjdk/adoptopenjdk8
+```
+
+If you have already installed JDK on your system, make sure it is JDK 8 or newer.
+
+
Android development environment
+
+Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.
+
+
1. Install Android Studio
+
+[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio intallation wizard, make sure the boxes next to all of the following items are checked:
+
+- `Android SDK`
+- `Android SDK Platform`
+- `Android Virtual Device`
+- If you are not already using Hyper-V: `Performance (Intel ® HAXM)` ([See here for AMD or Hyper-V](https://android-developers.googleblog.com/2018/07/android-emulator-amd-processor-hyper-v.html))
+
+Then, click "Next" to install all of these components.
+
+> If the checkboxes are grayed out, you will have a chance to install these components later on.
+
+Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
+
+
2. Install the Android SDK
+
+Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 10 (Q)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
+
+To do that, open Android Studio, click on "Configure" button and select "SDK Manager".
+
+
+
+> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.
+
+Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 10 (Q)` entry, then make sure the following items are checked:
+
+- `Android SDK Platform 29`
+- `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image`
+
+Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `29.0.2` is selected.
+
+Finally, click "Apply" to download and install the Android SDK and related build tools.
+
+
3. Configure the ANDROID_HOME environment variable
+
+The React Native tools require some environment variables to be set up in order to build apps with native code.
+
+Add the following lines to your `$HOME/.bash_profile` or `$HOME/.bashrc` (if you are using `zsh` then `~/.zprofile` or `~/.zshrc`) config file:
+
+```shell
+export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
+export PATH=$PATH:$ANDROID_HOME/tools
+export PATH=$PATH:$ANDROID_HOME/tools/bin
+export PATH=$PATH:$ANDROID_HOME/platform-tools
+```
+
+> `.bash_profile` is specific to `bash`. If you're using another shell, you will need to edit the appropriate shell-specific config file.
+
+Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`.
+
+> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.
+
+
React Native Command Line Interface
+
+React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-native `, the current stable version of the CLI will be downloaded and executed at the time the command is run.
+
+
Creating a new application
+
+> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues.
+
+React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":
+
+```shell
+npx react-native init AwesomeProject
+```
+
+This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Expo, or if you're adding Android support to an existing React Native project (see [Platform Specific Code](platform-specific-code.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite).
+
+
[Optional] Using a specific version or template
+
+If you want to start a new project with a specific React Native version, you can use the `--version` argument:
+
+```shell
+npx react-native init AwesomeProject --version X.XX.X
+```
+
+You can also start a project with a custom React Native template, like TypeScript, with `--template` argument:
+
+```shell
+npx react-native init AwesomeTSProject --template react-native-template-typescript
+```
+
+
Preparing the Android device
+
+You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.
+
+Either way, you will need to prepare the device to run Android apps for development.
+
+
Using a physical device
+
+If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions [here](running-on-device.md).
+
+
Using a virtual device
+
+If you use Android Studio to open `./AwesomeProject/android`, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:
+
+
+
+If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **Q** API Level 29 image.
+
+> If you don't have HAXM installed, follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-macOS) to set it up, then go back to the AVD Manager.
+
+Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.
+
+
Running your React Native application
+
+
Step 1: Start Metro
+
+First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts)
+
+To start Metro, run `npx react-native start` inside your React Native project folder:
+
+```shell
+npx react-native start
+```
+
+`react-native start` starts Metro Bundler.
+
+> If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project.
+
+> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more JavaScript.
+
+
Step 2: Start your application
+
+Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:
+
+```shell
+npx react-native run-android
+```
+
+If everything is set up correctly, you should see your new app running in your Android emulator shortly.
+
+
+
+`npx react-native run-android` is one way to run your app - you can also run it directly from within Android Studio.
+
+> If you can't get this to work, see the [Troubleshooting](troubleshooting.md#content) page.
+
+
Modifying your app
+
+Now that you have successfully run the app, let's modify it.
+
+- Open `App.js` in your text editor of choice and edit some lines.
+- Press the `R` key twice or select `Reload` from the Developer Menu (`⌘M`) to see your changes!
+
+
That's it!
+
+Congratulations! You've successfully run and modified your first React Native app.
+
+
+
+
Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md).
+
+If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
diff --git a/docs/_getting-started-macos-ios.md b/docs/_getting-started-macos-ios.md
new file mode 100644
index 00000000000..eba4bed9c53
--- /dev/null
+++ b/docs/_getting-started-macos-ios.md
@@ -0,0 +1,135 @@
+## Installing dependencies
+
+You will need Node, Watchman, the React Native command line interface, and Xcode.
+
+While you can use any editor of your choice to develop your app, you will need to install Xcode in order to set up the necessary tooling to build your React Native app for iOS.
+
+### Node & Watchman
+
+We recommend installing Node and Watchman using [Homebrew](http://brew.sh/). Run the following commands in a Terminal after installing Homebrew:
+
+```shell
+brew install node
+brew install watchman
+```
+
+If you have already installed Node on your system, make sure it is Node 10 or newer.
+
+[Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.
+
+### Xcode & CocoaPods
+
+The easiest way to install Xcode is via the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12). Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.
+
+If you have already installed Xcode on your system, make sure it is version 9.4 or newer.
+
+#### Command Line Tools
+
+You will also need to install the Xcode Command Line Tools. Open Xcode, then choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
+
+
+
+#### Installing an iOS Simulator in Xcode
+
+To install a simulator, open Xcode > Preferences... and select the Components tab. Select a simulator with the corresponding version of iOS you wish to use.
+
+#### CocoaPods
+
+[CocoaPods](https://cocoapods.org/) is built with Ruby and it will be installable with the default Ruby available on macOS. You can use a Ruby Version manager, however we recommend that you use the standard Ruby available on macOS unless you know what you're doing.
+
+Using the default Ruby install will require you to use `sudo` when installing gems. (This is only an issue for the duration of the gem installation, though.)
+
+```shell
+sudo gem install cocoapods
+```
+
+For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
+
+### React Native Command Line Interface
+
+React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-native `, the current stable version of the CLI will be downloaded and executed at the time the command is run.
+
+## Creating a new application
+
+> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues.
+
+You can use React Native's built-in command line interface to generate a new project. Let's create a new React Native project called "AwesomeProject":
+
+```shell
+npx react-native init AwesomeProject
+```
+
+This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Expo, or if you're adding iOS support to an existing React Native project (see [Platform Specific Code](platform-specific-code.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite).
+
+### [Optional] Using a specific version or template
+
+If you want to start a new project with a specific React Native version, you can use the `--version` argument:
+
+```shell
+npx react-native init AwesomeProject --version X.XX.X
+```
+
+You can also start a project with a custom React Native template, like TypeScript, with `--template` argument:
+
+```shell
+npx react-native init AwesomeTSProject --template react-native-template-typescript
+```
+
+> **Note** If the above command is failing, you may have old version of `react-native` or `react-native-cli` installed globally on your pc. Try uninstalling the cli and run the cli using `npx`.
+
+## Running your React Native application
+
+### Step 1: Start Metro
+
+First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts)
+
+To start Metro, run `npx react-native start` inside your React Native project folder:
+
+```shell
+npx react-native start
+```
+
+`react-native start` starts Metro Bundler.
+
+> If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project.
+
+> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more JavaScript.
+
+### Step 2: Start your application
+
+Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:
+
+```shell
+npx react-native run-ios
+```
+
+You should see your new app running in the iOS Simulator shortly.
+
+
+
+`npx react-native run-ios` is one way to run your app. You can also run it directly from within Xcode.
+
+> If you can't get this to work, see the [Troubleshooting](troubleshooting.md#content) page.
+
+### Running on a device
+
+The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions [here](running-on-device.md).
+
+### Modifying your app
+
+Now that you have successfully run the app, let's modify it.
+
+- Open `App.js` in your text editor of choice and edit some lines.
+- Hit `⌘R` in your iOS Simulator to reload the app and see your changes!
+
+### That's it!
+
+Congratulations! You've successfully run and modified your first React Native app.
+
+
+
+## Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md).
+
+If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
diff --git a/docs/_getting-started-windows-android.md b/docs/_getting-started-windows-android.md
new file mode 100644
index 00000000000..9a4d64511f7
--- /dev/null
+++ b/docs/_getting-started-windows-android.md
@@ -0,0 +1,206 @@
+
Installing dependencies
+
+You will need Node, the React Native command line interface, Python2, a JDK, and Android Studio.
+
+While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.
+
+
Node, Python2, JDK
+
+We recommend installing Node and Python2 via [Chocolatey](https://chocolatey.org), a popular package manager for Windows.
+
+React Native also requires [Java SE Development Kit (JDK)](https://openjdk.java.net/projects/jdk8/), as well as Python2. Both can be installed using Chocolatey.
+
+Open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the following command:
+
+```powershell
+choco install -y nodejs.install python2 openjdk8
+```
+
+If you have already installed Node on your system, make sure it is Node 10 or newer. If you already have a JDK on your system, make sure it is version 8 or newer.
+
+> You can find additional installation options on [Node's Downloads page](https://nodejs.org/en/download/).
+
+> If you're using the latest version of Java Development Kit, you'll need to change the Gradle version of your project so it can recognize the JDK. You can do that by going to `{project root folder}\android\gradle\wrapper\gradle-wrapper.properties` and changing the `distributionUrl` value to upgrade the Gradle version. You can check out [here the lastest releases of Gradle](https://gradle.org/releases/).
+
+
Android development environment
+
+Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.
+
+
1. Install Android Studio
+
+[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio intallation wizard, make sure the boxes next to all of the following items are checked:
+
+- `Android SDK`
+- `Android SDK Platform`
+- `Android Virtual Device`
+- If you are not already using Hyper-V: `Performance (Intel ® HAXM)` ([See here for AMD or Hyper-V](https://android-developers.googleblog.com/2018/07/android-emulator-amd-processor-hyper-v.html))
+
+Then, click "Next" to install all of these components.
+
+> If the checkboxes are grayed out, you will have a chance to install these components later on.
+
+Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
+
+
2. Install the Android SDK
+
+Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 10 (Q)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
+
+To do that, open Android Studio, click on "Configure" button and select "SDK Manager".
+
+
+
+> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.
+
+Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 10 (Q)` entry, then make sure the following items are checked:
+
+- `Android SDK Platform 29`
+- `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image`
+
+Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `29.0.2` is selected.
+
+Finally, click "Apply" to download and install the Android SDK and related build tools.
+
+
3. Configure the ANDROID_HOME environment variable
+
+The React Native tools require some environment variables to be set up in order to build apps with native code.
+
+1. Open the **Windows Control Panel.**
+2. Click on **User Accounts,** then click **User Accounts** again
+3. Click on **Change my environment variables**
+4. Click on **New...** to create a new `ANDROID_HOME` user variable that points to the path to your Android SDK:
+
+
+
+The SDK is installed, by default, at the following location:
+
+```powershell
+%LOCALAPPDATA%\Android\Sdk
+```
+
+You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.
+
+Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step.
+
+1. Open powershell
+2. Copy and paste **Get-ChildItem -Path Env:\\** into powershell
+3. Verify `ANDROID_HOME` has been added
+
+
4. Add platform-tools to Path
+
+1. Open the **Windows Control Panel.**
+2. Click on **User Accounts,** then click **User Accounts** again
+3. Click on **Change my environment variables**
+4. Select the **Path** variable.
+5. Click **Edit.**
+6. Click **New** and add the path to platform-tools to the list.
+
+The default location for this folder is:
+
+```powershell
+%LOCALAPPDATA%\Android\Sdk\platform-tools
+```
+
+
React Native Command Line Interface
+
+React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-native `, the current stable version of the CLI will be downloaded and executed at the time the command is run.
+
+
Creating a new application
+
+> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues.
+
+React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":
+
+```shell
+npx react-native init AwesomeProject
+```
+
+This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Expo, or if you're adding Android support to an existing React Native project (see [Platform Specific Code](platform-specific-code.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite).
+
+
[Optional] Using a specific version or template
+
+If you want to start a new project with a specific React Native version, you can use the `--version` argument:
+
+```shell
+npx react-native init AwesomeProject --version X.XX.X
+```
+
+You can also start a project with a custom React Native template, like TypeScript, with `--template` argument:
+
+```shell
+npx react-native init AwesomeTSProject --template react-native-template-typescript
+```
+
+
Preparing the Android device
+
+You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.
+
+Either way, you will need to prepare the device to run Android apps for development.
+
+
Using a physical device
+
+If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions [here](running-on-device.md).
+
+
Using a virtual device
+
+If you use Android Studio to open `./AwesomeProject/android`, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:
+
+
+
+If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **Q** API Level 29 image.
+
+> If you don't have HAXM installed, click on "Install HAXM" or follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows) to set it up, then go back to the AVD Manager.
+
+Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.
+
+
Running your React Native application
+
+
Step 1: Start Metro
+
+First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts)
+
+To start Metro, run `npx react-native start` inside your React Native project folder:
+
+```shell
+npx react-native start
+```
+
+`react-native start` starts Metro Bundler.
+
+> If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project.
+
+> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more JavaScript.
+
+
Step 2: Start your application
+
+Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:
+
+```shell
+npx react-native run-android
+```
+
+If everything is set up correctly, you should see your new app running in your Android emulator shortly.
+
+
+
+`npx react-native run-android` is one way to run your app - you can also run it directly from within Android Studio.
+
+> If you can't get this to work, see the [Troubleshooting](troubleshooting.md#content) page.
+
+
Modifying your app
+
+Now that you have successfully run the app, let's modify it.
+
+- Open `App.js` in your text editor of choice and edit some lines.
+- Press the `R` key twice or select `Reload` from the Developer Menu (`Ctrl + M`) to see your changes!
+
+
That's it!
+
+Congratulations! You've successfully run and modified your first React Native app.
+
+
+
+
Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md).
+
+If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
diff --git a/docs/_integration-with-exisiting-apps-java.md b/docs/_integration-with-exisiting-apps-java.md
new file mode 100644
index 00000000000..32f08877423
--- /dev/null
+++ b/docs/_integration-with-exisiting-apps-java.md
@@ -0,0 +1,390 @@
+## Key Concepts
+
+The keys to integrating React Native components into your Android application are to:
+
+1. Set up React Native dependencies and directory structure.
+2. Develop your React Native components in JavaScript.
+3. Add a `ReactRootView` to your Android app. This view will serve as the container for your React Native component.
+4. Start the React Native server and run your native application.
+5. Verify that the React Native aspect of your application works as expected.
+
+## Prerequisites
+
+Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for Android.
+
+### 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then copy your existing Android project to an `/android` subfolder.
+
+### 2. Install JavaScript dependencies
+
+Go to the root directory for your project and create a new `package.json` file with the following contents:
+
+```
+{
+ "name": "MyReactNativeApp",
+ "version": "0.0.1",
+ "private": true,
+ "scripts": {
+ "start": "yarn react-native start"
+ }
+}
+```
+
+Next, make sure you have [installed the yarn package manager](https://yarnpkg.com/lang/en/docs/install/).
+
+Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run:
+
+```shell
+$ yarn add react-native
+```
+
+This will print a message similar to the following (scroll up in the yarn output to see it):
+
+> warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".
+
+This is OK, it means we also need to install React:
+
+```shell
+$ yarn add react@version_printed_above
+```
+
+Yarn has created a new `/node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file.
+
+## Adding React Native to your app
+
+### Configuring maven
+
+Add the React Native and JSC dependency to your app's `build.gradle` file:
+
+```gradle
+dependencies {
+ implementation "com.android.support:appcompat-v7:27.1.1"
+ ...
+ implementation "com.facebook.react:react-native:+" // From node_modules
+ implementation "org.webkit:android-jsc:+"
+}
+```
+
+> If you want to ensure that you are always using a specific React Native version in your native build, replace `+` with an actual React Native version you've downloaded from `npm`.
+
+Add an entry for the local React Native and JSC maven directories to the top-level `build.gradle`. Be sure to add it to the “allprojects” block, above other maven repositories:
+
+```gradle
+allprojects {
+ repositories {
+ maven {
+ // All of React Native (JS, Android binaries) is installed from npm
+ url "$rootDir/../node_modules/react-native/android"
+ }
+ maven {
+ // Android JSC is installed from npm
+ url("$rootDir/../node_modules/jsc-android/dist")
+ }
+ ...
+ }
+ ...
+}
+```
+
+> Make sure that the path is correct! You shouldn’t run into any “Failed to resolve: com.facebook.react:react-native:0.x.x" errors after running Gradle sync in Android Studio.
+
+### Enable native modules autolinking
+
+To use the power of [autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md), we have to apply it a few places. First add the following entry to `settings.gradle`:
+
+```gradle
+apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
+```
+
+Next add the following entry at the very bottom of the `app/build.gradle`:
+
+```gradle
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+```
+
+### Configuring permissions
+
+Next, make sure you have the Internet permission in your `AndroidManifest.xml`:
+
+
+
+If you need to access to the `DevSettingsActivity` add to your `AndroidManifest.xml`:
+
+
+
+This is only used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to.
+
+### Cleartext Traffic (API level 28+)
+
+> Starting with Android 9 (API level 28), cleartext traffic is disabled by default; this prevents your application from connecting to the [Metro bundler][metro]. The changes below allow cleartext traffic in debug builds.
+
+#### 1. Apply the `usesCleartextTraffic` option to your Debug `AndroidManifest.xml`
+
+```xml
+
+
+
+
+
+```
+
+This is not required for Release builds.
+
+To learn more about Network Security Config and the cleartext traffic policy [see this link](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted).
+
+### Code integration
+
+Now we will actually modify the native Android application to integrate React Native.
+
+#### The React Native component
+
+The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.
+
+##### 1. Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `require`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will put everything in `index.js`.
+
+##### 2. Add your React Native code
+
+In your `index.js`, create your component. In our sample here, we will add a `` component within a styled ``:
+
+```jsx
+import React from 'react';
+import {
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+} from 'react-native';
+
+class HelloWorld extends React.Component {
+ render() {
+ return (
+
+ Hello, World
+
+ );
+ }
+}
+var styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center'
+ },
+ hello: {
+ fontSize: 20,
+ textAlign: 'center',
+ margin: 10
+ }
+});
+
+AppRegistry.registerComponent(
+ 'MyReactNativeApp',
+ () => HelloWorld
+);
+```
+
+##### 3. Configure permissions for development error overlay
+
+If your app is targeting the Android `API level 23` or greater, make sure you have the permission `android.permission.SYSTEM_ALERT_WINDOW` enabled for the development build. You can check this with `Settings.canDrawOverlays(this);`. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in `onCreate()` method.
+
+```java
+private final int OVERLAY_PERMISSION_REQ_CODE = 1; // Choose any value
+
+...
+
+if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+ if (!Settings.canDrawOverlays(this)) {
+ Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
+ Uri.parse("package:" + getPackageName()));
+ startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
+ }
+}
+```
+
+Finally, the `onActivityResult()` method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX. Also, for integrating Native Modules which use `startActivityForResult`, we need to pass the result to the `onActivityResult` method of our `ReactInstanceManager` instance.
+
+```java
+@Override
+protected void onActivityResult(int requestCode, int resultCode, Intent data) {
+ if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+ if (!Settings.canDrawOverlays(this)) {
+ // SYSTEM_ALERT_WINDOW permission not granted
+ }
+ }
+ }
+ mReactInstanceManager.onActivityResult( this, requestCode, resultCode, data );
+}
+```
+
+#### The Magic: `ReactRootView`
+
+Let's add some native code in order to start the React Native runtime and tell it to render our JS component. To do this, we're going to create an `Activity` that creates a `ReactRootView`, starts a React application inside it and sets it as the main content view.
+
+> If you are targeting Android version <5, use the `AppCompatActivity` class from the `com.android.support:appcompat` package instead of `Activity`.
+
+```java
+public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
+ private ReactRootView mReactRootView;
+ private ReactInstanceManager mReactInstanceManager;
+
+ @Override
+ protected void onCreate(Bundle savedInstanceState) {
+ super.onCreate(savedInstanceState);
+ SoLoader.init(this, false);
+
+ mReactRootView = new ReactRootView(this);
+ List packages = new PackageList(getApplication()).getPackages();
+ // Packages that cannot be autolinked yet can be added manually here, for example:
+ // packages.add(new MyReactNativePackage());
+ // Remember to include them in `settings.gradle` and `app/build.gradle` too.
+
+ mReactInstanceManager = ReactInstanceManager.builder()
+ .setApplication(getApplication())
+ .setCurrentActivity(this)
+ .setBundleAssetName("index.android.bundle")
+ .setJSMainModulePath("index")
+ .addPackages(packages)
+ .setUseDeveloperSupport(BuildConfig.DEBUG)
+ .setInitialLifecycleState(LifecycleState.RESUMED)
+ .build();
+ // The string here (e.g. "MyReactNativeApp") has to match
+ // the string in AppRegistry.registerComponent() in index.js
+ mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
+
+ setContentView(mReactRootView);
+ }
+
+ @Override
+ public void invokeDefaultOnBackPressed() {
+ super.onBackPressed();
+ }
+}
+```
+
+> If you are using a starter kit for React Native, replace the "HelloWorld" string with the one in your index.js file (it’s the first argument to the `AppRegistry.registerComponent()` method).
+
+Perform a “Sync Project files with Gradle” operation.
+
+If you are using Android Studio, use `Alt + Enter` to add all missing imports in your MyReactActivity class. Be careful to use your package’s `BuildConfig` and not the one from the `facebook` package.
+
+We need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` because some React Native UI components rely on this theme.
+
+```xml
+
+
+```
+
+> A `ReactInstanceManager` can be shared by multiple activities and/or fragments. You will want to make your own `ReactFragment` or `ReactActivity` and have a singleton _holder_ that holds a `ReactInstanceManager`. When you need the `ReactInstanceManager` (e.g., to hook up the `ReactInstanceManager` to the lifecycle of those Activities or Fragments) use the one provided by the singleton.
+
+Next, we need to pass some activity lifecycle callbacks to the `ReactInstanceManager` and `ReactRootView`:
+
+```java
+@Override
+protected void onPause() {
+ super.onPause();
+
+ if (mReactInstanceManager != null) {
+ mReactInstanceManager.onHostPause(this);
+ }
+}
+
+@Override
+protected void onResume() {
+ super.onResume();
+
+ if (mReactInstanceManager != null) {
+ mReactInstanceManager.onHostResume(this, this);
+ }
+}
+
+@Override
+protected void onDestroy() {
+ super.onDestroy();
+
+ if (mReactInstanceManager != null) {
+ mReactInstanceManager.onHostDestroy(this);
+ }
+ if (mReactRootView != null) {
+ mReactRootView.unmountReactApplication();
+ }
+}
+```
+
+We also need to pass back button events to React Native:
+
+```java
+@Override
+ public void onBackPressed() {
+ if (mReactInstanceManager != null) {
+ mReactInstanceManager.onBackPressed();
+ } else {
+ super.onBackPressed();
+ }
+}
+```
+
+This allows JavaScript to control what happens when the user presses the hardware back button (e.g. to implement navigation). When JavaScript doesn't handle the back button press, your `invokeDefaultOnBackPressed` method will be called. By default this finishes your `Activity`.
+
+Finally, we need to hook up the dev menu. By default, this is activated by (rage) shaking the device, but this is not very useful in emulators. So we make it show when you press the hardware menu button (use `Ctrl + M` if you're using Android Studio emulator):
+
+```java
+@Override
+public boolean onKeyUp(int keyCode, KeyEvent event) {
+ if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
+ mReactInstanceManager.showDevOptionsDialog();
+ return true;
+ }
+ return super.onKeyUp(keyCode, event);
+}
+```
+
+Now your activity is ready to run some JavaScript code.
+
+### Test your integration
+
+You have now done all the basic steps to integrate React Native with your current application. Now we will start the [Metro bundler][metro] to build the `index.bundle` package and the server running on localhost to serve it.
+
+##### 1. Run the packager
+
+To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project:
+
+```shell
+$ yarn start
+```
+
+##### 2. Run the app
+
+Now build and run your Android app as normal.
+
+Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:
+
+
+
+### Creating a release build in Android Studio
+
+You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app. There’s one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:
+
+```shell
+$ npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
+```
+
+> Don’t forget to replace the paths with correct ones and create the assets folder if it doesn’t exist.
+
+Now, create a release build of your native app from within Android Studio as usual and you should be good to go!
+
+### Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+
+[metro]: https://facebook.github.io/metro/
diff --git a/docs/_integration-with-exisiting-apps-objc.md b/docs/_integration-with-exisiting-apps-objc.md
new file mode 100644
index 00000000000..bc58ec92a7c
--- /dev/null
+++ b/docs/_integration-with-exisiting-apps-objc.md
@@ -0,0 +1,361 @@
+## Key Concepts
+
+The keys to integrating React Native components into your iOS application are to:
+
+1. Set up React Native dependencies and directory structure.
+2. Understand what React Native components you will use in your app.
+3. Add these components as dependencies using CocoaPods.
+4. Develop your React Native components in JavaScript.
+5. Add a `RCTRootView` to your iOS app. This view will serve as the container for your React Native component.
+6. Start the React Native server and run your native application.
+7. Verify that the React Native aspect of your application works as expected.
+
+## Prerequisites
+
+Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for iOS.
+
+### 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then copy your existing iOS project to a `/ios` subfolder.
+
+### 2. Install JavaScript dependencies
+
+Go to the root directory for your project and create a new `package.json` file with the following contents:
+
+```
+{
+ "name": "MyReactNativeApp",
+ "version": "0.0.1",
+ "private": true,
+ "scripts": {
+ "start": "yarn react-native start"
+ }
+}
+```
+
+Next, make sure you have [installed the yarn package manager](https://yarnpkg.com/lang/en/docs/install/).
+
+Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run:
+
+```shell
+$ yarn add react-native
+```
+
+This will print a message similar to the following (scroll up in the yarn output to see it):
+
+> warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".
+
+This is OK, it means we also need to install React:
+
+```shell
+$ yarn add react@version_printed_above
+```
+
+Yarn has created a new `/node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file.
+
+### 3. Install CocoaPods
+
+[CocoaPods](http://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
+
+We recommend installing CocoaPods using [Homebrew](http://brew.sh/).
+
+```shell
+$ brew install cocoapods
+```
+
+> It is technically possible not to use CocoaPods, but that would require manual library and linker additions that would overly complicate this process.
+
+## Adding React Native to your app
+
+Assume the [app for integration](https://github.com/JoelMarcey/iOS-2048) is a [2048](https://en.wikipedia.org/wiki/2048_%28video_game%29) game. Here is what the main menu of the native application looks like without React Native.
+
+
+
+### Command Line Tools for Xcode
+
+Install the Command Line Tools. Choose "Preferences..." in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
+
+
+
+### Configuring CocoaPods dependencies
+
+Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.
+
+The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/master/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `` elements), then you will need the `RCTImage` `subspec`.
+
+You can specify which `subspec`s your app will depend on in a `Podfile` file. The easiest way to create a `Podfile` is by running the CocoaPods `init` command in the `/ios` subfolder of your project:
+
+```shell
+$ pod init
+```
+
+The `Podfile` will contain a boilerplate setup that you will tweak for your integration purposes.
+
+> The `Podfile` version changes depending on your version of `react-native`. Refer to https://react-native-community.github.io/upgrade-helper/ for the specific version of `Podfile` you should be using.
+
+Ultimately, your `Podfile` should look something similar to this:
+
+```
+# The target name is most likely the name of your project.
+target 'NumberTileGame' do
+
+ # Your 'node_modules' directory is probably in the root of your project,
+ # but if not, adjust the `:path` accordingly
+ pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
+ pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
+ pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
+ pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
+ pod 'React', :path => '../node_modules/react-native/'
+ pod 'React-Core', :path => '../node_modules/react-native/'
+ pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
+ pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
+ pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
+ pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
+ pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
+ pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
+ pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
+ pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
+ pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
+ pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
+ pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
+ pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'
+
+ pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
+ pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
+ pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
+ pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
+ pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon"
+ pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
+ pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
+
+ pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
+ pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
+ pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+
+end
+```
+
+After you have created your `Podfile`, you are ready to install the React Native pod.
+
+```shell
+$ pod install
+```
+
+You should see output such as:
+
+```
+Analyzing dependencies
+Fetching podspec for `React` from `../node_modules/react-native`
+Downloading dependencies
+Installing React (0.62.0)
+Generating Pods project
+Integrating client project
+Sending stats
+Pod installation complete! There are 3 dependencies from the Podfile and 1 total pod installed.
+```
+
+> If this fails with errors mentioning `xcrun`, make sure that in Xcode in **Preferences > Locations** the Command Line Tools are assigned.
+
+### Code integration
+
+Now we will actually modify the native iOS application to integrate React Native. For our 2048 sample app, we will add a "High Score" screen in React Native.
+
+#### The React Native component
+
+The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.
+
+##### 1. Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `require`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will put everything in `index.js`.
+
+##### 2. Add your React Native code
+
+In your `index.js`, create your component. In our sample here, we will add a `` component within a styled ``
+
+```jsx
+import React from 'react';
+import {
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+} from 'react-native';
+
+class RNHighScores extends React.Component {
+ render() {
+ var contents = this.props['scores'].map((score) => (
+
+ {score.name}:{score.value}
+ {'\n'}
+
+ ));
+ return (
+
+
+ 2048 High Scores!
+
+ {contents}
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#FFFFFF'
+ },
+ highScoresTitle: {
+ fontSize: 20,
+ textAlign: 'center',
+ margin: 10
+ },
+ scores: {
+ textAlign: 'center',
+ color: '#333333',
+ marginBottom: 5
+ }
+});
+
+// Module name
+AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
+```
+
+> `RNHighScores` is the name of your module that will be used when you add a view to React Native from within your iOS application.
+
+#### The Magic: `RCTRootView`
+
+Now that your React Native component is created via `index.js`, you need to add that component to a new or existing `ViewController`. The easiest path to take is to optionally create an event path to your component and then add that component to an existing `ViewController`.
+
+We will tie our React Native component with a new native view in the `ViewController` that will actually contain it called `RCTRootView` .
+
+##### 1. Create an Event Path
+
+You can add a new link on the main game menu to go to the "High Score" React Native page.
+
+
+
+##### 2. Event Handler
+
+We will now add an event handler from the menu link. A method will be added to the main `ViewController` of your application. This is where `RCTRootView` comes into play.
+
+When you build a React Native application, you use the [Metro bundler][metro] to create an `index.bundle` that will be served by the React Native server. Inside `index.bundle` will be our `RNHighScore` module. So, we need to point our `RCTRootView` to the location of the `index.bundle` resource (via `NSURL`) and tie it to the module.
+
+We will, for debugging purposes, log that the event handler was invoked. Then, we will create a string with the location of our React Native code that exists inside the `index.bundle`. Finally, we will create the main `RCTRootView`. Notice how we provide `RNHighScores` as the `moduleName` that we created [above](#the-react-native-component) when writing the code for our React Native component.
+
+First `import` the `RCTRootView` header.
+
+```objectivec
+#import
+```
+
+> The `initialProperties` are here for illustration purposes so we have some data for our high score screen. In our React Native component, we will use `this.props` to get access to that data.
+
+```objectivec
+- (IBAction)highScoreButtonPressed:(id)sender {
+ NSLog(@"High Score Button Pressed");
+ NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
+
+ RCTRootView *rootView =
+ [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
+ moduleName: @"RNHighScores"
+ initialProperties:
+ @{
+ @"scores" : @[
+ @{
+ @"name" : @"Alex",
+ @"value": @"42"
+ },
+ @{
+ @"name" : @"Joel",
+ @"value": @"10"
+ }
+ ]
+ }
+ launchOptions: nil];
+ UIViewController *vc = [[UIViewController alloc] init];
+ vc.view = rootView;
+ [self presentViewController:vc animated:YES completion:nil];
+}
+```
+
+> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`.
+
+> When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file.
+
+##### 3. Wire Up
+
+Wire up the new link in the main menu to the newly added event handler method.
+
+
+
+> One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the `Touch Up Inside` event, drag that to the storyboard and then select the created method from the list provided.
+
+### Test your integration
+
+You have now done all the basic steps to integrate React Native with your current application. Now we will start the [Metro bundler][metro] to build the `index.bundle` package and the server running on `localhost` to serve it.
+
+##### 1. Add App Transport Security exception
+
+Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project's `Info.plist` (or equivalent) file.
+
+```xml
+NSAppTransportSecurity
+
+ NSExceptionDomains
+
+ localhost
+
+ NSTemporaryExceptionAllowsInsecureHTTPLoads
+
+
+
+
+```
+
+> App Transport Security is good for your users. Make sure to re-enable it prior to releasing your app for production.
+
+##### 2. Run the packager
+
+To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project:
+
+```shell
+$ npm start
+```
+
+##### 3. Run the app
+
+If you are using Xcode or your favorite editor, build and run your native iOS application as normal. Alternatively, you can run the app from the command line using:
+
+```
+# From the root of your project
+$ npx react-native run-ios
+```
+
+In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.
+
+Here is the _native_ application home screen:
+
+
+
+Here is the _React Native_ high score screen:
+
+
+
+> If you are getting module resolution issues when running your application please see [this GitHub issue](https://github.com/facebook/react-native/issues/4968) for information and possible resolution. [This comment](https://github.com/facebook/react-native/issues/4968#issuecomment-220941717) seemed to be the latest possible resolution.
+
+### See the Code
+
+You can examine the code that added the React Native screen to our sample app on [GitHub](https://github.com/JoelMarcey/iOS-2048/commit/9ae70c7cdd53eb59f5f7c7daab382b0300ed3585).
+
+### Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+
+[metro]: https://facebook.github.io/metro/
diff --git a/docs/_integration-with-exisiting-apps-swift.md b/docs/_integration-with-exisiting-apps-swift.md
new file mode 100644
index 00000000000..3262f14dca5
--- /dev/null
+++ b/docs/_integration-with-exisiting-apps-swift.md
@@ -0,0 +1,350 @@
+## Key Concepts
+
+The keys to integrating React Native components into your iOS application are to:
+
+1. Set up React Native dependencies and directory structure.
+2. Understand what React Native components you will use in your app.
+3. Add these components as dependencies using CocoaPods.
+4. Develop your React Native components in JavaScript.
+5. Add a `RCTRootView` to your iOS app. This view will serve as the container for your React Native component.
+6. Start the React Native server and run your native application.
+7. Verify that the React Native aspect of your application works as expected.
+
+## Prerequisites
+
+Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for iOS.
+
+### 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then copy your existing iOS project to a `/ios` subfolder.
+
+### 2. Install JavaScript dependencies
+
+Go to the root directory for your project and create a new `package.json` file with the following contents:
+
+```
+{
+ "name": "MyReactNativeApp",
+ "version": "0.0.1",
+ "private": true,
+ "scripts": {
+ "start": "yarn react-native start"
+ }
+}
+```
+
+Next, make sure you have [installed the yarn package manager](https://yarnpkg.com/lang/en/docs/install/).
+
+Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run:
+
+```shell
+$ yarn add react-native
+```
+
+This will print a message similar to the following (scroll up in the yarn output to see it):
+
+> warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".
+
+This is OK, it means we also need to install React:
+
+```shell
+$ yarn add react@version_printed_above
+```
+
+Yarn has created a new `/node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file.
+
+### 3. Install CocoaPods
+
+[CocoaPods](http://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
+
+We recommend installing CocoaPods using [Homebrew](http://brew.sh/).
+
+```shell
+$ brew install cocoapods
+```
+
+> It is technically possible not to use CocoaPods, but that would require manual library and linker additions that would overly complicate this process.
+
+## Adding React Native to your app
+
+Assume the [app for integration](https://github.com/JoelMarcey/swift-2048) is a [2048](https://en.wikipedia.org/wiki/2048_%28video_game%29) game. Here is what the main menu of the native application looks like without React Native.
+
+
+
+### Command Line Tools for Xcode
+
+Install the Command Line Tools. Choose "Preferences..." in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
+
+
+
+### Configuring CocoaPods dependencies
+
+Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.
+
+The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/master/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `` elements), then you will need the `RCTImage` `subspec`.
+
+You can specify which `subspec`s your app will depend on in a `Podfile` file. The easiest way to create a `Podfile` is by running the CocoaPods `init` command in the `/ios` subfolder of your project:
+
+```shell
+$ pod init
+```
+
+The `Podfile` will contain a boilerplate setup that you will tweak for your integration purposes.
+
+> The `Podfile` version changes depending on your version of `react-native`. Refer to https://react-native-community.github.io/upgrade-helper/ for the specific version of `Podfile` you should be using.
+
+Ultimately, your `Podfile` should look something similar to this:
+
+```
+source 'https://github.com/CocoaPods/Specs.git'
+
+# Required for Swift apps
+platform :ios, '8.0'
+use_frameworks!
+
+# The target name is most likely the name of your project.
+target 'swift-2048' do
+
+ # Your 'node_modules' directory is probably in the root of your project,
+ # but if not, adjust the `:path` accordingly
+ pod 'React', :path => '../node_modules/react-native', :subspecs => [
+ 'Core',
+ 'CxxBridge', # Include this for RN >= 0.47
+ 'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
+ 'RCTText',
+ 'RCTNetwork',
+ 'RCTWebSocket', # needed for debugging
+ # Add any other subspecs you want to use in your project
+ ]
+ # Explicitly include Yoga if you are using RN >= 0.42.0
+ pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
+
+ # Third party deps podspec link
+ pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
+ pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
+ pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+
+end
+```
+
+After you have created your `Podfile`, you are ready to install the React Native pod.
+
+```shell
+$ pod install
+```
+
+You should see output such as:
+
+```
+Analyzing dependencies
+Fetching podspec for `React` from `../node_modules/react-native`
+Downloading dependencies
+Installing React (0.62.0)
+Generating Pods project
+Integrating client project
+Sending stats
+Pod installation complete! There are 3 dependencies from the Podfile and 1 total pod installed.
+```
+
+> If this fails with errors mentioning `xcrun`, make sure that in Xcode in **Preferences > Locations** the Command Line Tools are assigned.
+
+> If you get a warning such as "_The `swift-2048 [Debug]` target overrides the `FRAMEWORK_SEARCH_PATHS` build setting defined in `Pods/Target Support Files/Pods-swift-2048/Pods-swift-2048.debug.xcconfig`. This can lead to problems with the CocoaPods installation_", then make sure the `Framework Search Paths` in `Build Settings` for both `Debug` and `Release` only contain `$(inherited)`.
+
+### Code integration
+
+Now we will actually modify the native iOS application to integrate React Native. For our 2048 sample app, we will add a "High Score" screen in React Native.
+
+#### The React Native component
+
+The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.
+
+##### 1. Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `require`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will put everything in `index.js`.
+
+##### 2. Add your React Native code
+
+In your `index.js`, create your component. In our sample here, we will add a `` component within a styled ``
+
+```jsx
+import React from 'react';
+import {
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View
+} from 'react-native';
+
+class RNHighScores extends React.Component {
+ render() {
+ var contents = this.props['scores'].map((score) => (
+
+ {score.name}:{score.value}
+ {'\n'}
+
+ ));
+ return (
+
+
+ 2048 High Scores!
+
+ {contents}
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#FFFFFF'
+ },
+ highScoresTitle: {
+ fontSize: 20,
+ textAlign: 'center',
+ margin: 10
+ },
+ scores: {
+ textAlign: 'center',
+ color: '#333333',
+ marginBottom: 5
+ }
+});
+
+// Module name
+AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
+```
+
+> `RNHighScores` is the name of your module that will be used when you add a view to React Native from within your iOS application.
+
+#### The Magic: `RCTRootView`
+
+Now that your React Native component is created via `index.js`, you need to add that component to a new or existing `ViewController`. The easiest path to take is to optionally create an event path to your component and then add that component to an existing `ViewController`.
+
+We will tie our React Native component with a new native view in the `ViewController` that will actually contain it called `RCTRootView` .
+
+##### 1. Create an Event Path
+
+You can add a new link on the main game menu to go to the "High Score" React Native page.
+
+
+
+##### 2. Event Handler
+
+We will now add an event handler from the menu link. A method will be added to the main `ViewController` of your application. This is where `RCTRootView` comes into play.
+
+When you build a React Native application, you use the [Metro bundler][metro] to create an `index.bundle` that will be served by the React Native server. Inside `index.bundle` will be our `RNHighScore` module. So, we need to point our `RCTRootView` to the location of the `index.bundle` resource (via `NSURL`) and tie it to the module.
+
+We will, for debugging purposes, log that the event handler was invoked. Then, we will create a string with the location of our React Native code that exists inside the `index.bundle`. Finally, we will create the main `RCTRootView`. Notice how we provide `RNHighScores` as the `moduleName` that we created [above](#the-react-native-component) when writing the code for our React Native component.
+
+First `import` the `React` library.
+
+```jsx
+import React
+```
+
+> The `initialProperties` are here for illustration purposes so we have some data for our high score screen. In our React Native component, we will use `this.props` to get access to that data.
+
+```swift
+@IBAction func highScoreButtonTapped(sender : UIButton) {
+ NSLog("Hello")
+ let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios")
+ let mockData:NSDictionary = ["scores":
+ [
+ ["name":"Alex", "value":"42"],
+ ["name":"Joel", "value":"10"]
+ ]
+ ]
+
+ let rootView = RCTRootView(
+ bundleURL: jsCodeLocation,
+ moduleName: "RNHighScores",
+ initialProperties: mockData as [NSObject : AnyObject],
+ launchOptions: nil
+ )
+ let vc = UIViewController()
+ vc.view = rootView
+ self.present(vc, animated: true, completion: nil)
+}
+```
+
+> Note that `RCTRootView bundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `RCTRootView bundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L89) to create a bridge and then use `RCTRootView initWithBridge`.
+
+> When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `let mainBundle = NSBundle(URLForResource: "main" withExtension:"jsbundle")`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file.
+
+##### 3. Wire Up
+
+Wire up the new link in the main menu to the newly added event handler method.
+
+
+
+> One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the `Touch Up Inside` event, drag that to the storyboard and then select the created method from the list provided.
+
+### Test your integration
+
+You have now done all the basic steps to integrate React Native with your current application. Now we will start the [Metro bundler][metro] to build the `index.bundle` package and the server running on `localhost` to serve it.
+
+##### 1. Add App Transport Security exception
+
+Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project's `Info.plist` (or equivalent) file.
+
+```xml
+NSAppTransportSecurity
+
+ NSExceptionDomains
+
+ localhost
+
+ NSTemporaryExceptionAllowsInsecureHTTPLoads
+
+
+
+
+```
+
+> App Transport Security is good for your users. Make sure to re-enable it prior to releasing your app for production.
+
+##### 2. Run the packager
+
+To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project:
+
+```shell
+$ npm start
+```
+
+##### 3. Run the app
+
+If you are using Xcode or your favorite editor, build and run your native iOS application as normal. Alternatively, you can run the app from the command line using:
+
+```
+# From the root of your project
+$ npx react-native run-ios
+```
+
+In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.
+
+Here is the _native_ application home screen:
+
+
+
+Here is the _React Native_ high score screen:
+
+
+
+> If you are getting module resolution issues when running your application please see [this GitHub issue](https://github.com/facebook/react-native/issues/4968) for information and possible resolution. [This comment](https://github.com/facebook/react-native/issues/4968#issuecomment-220941717) seemed to be the latest possible resolution.
+
+### See the Code
+
+You can examine the code that added the React Native screen to our sample app on [GitHub](https://github.com/JoelMarcey/swift-2048/commit/13272a31ee6dd46dc68b1dcf4eaf16c1a10f5229).
+
+### Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+
+[metro]: https://facebook.github.io/metro/
diff --git a/docs/accessibility.md b/docs/accessibility.md
index 20acbd5f28b..7d2e133bbe3 100644
--- a/docs/accessibility.md
+++ b/docs/accessibility.md
@@ -290,7 +290,7 @@ To use the volume key shortcut, press both volume keys for 3 seconds to start an
Additionally, if you prefer, you can toggle TalkBack via command line with:
-```sh
+```shell
# disable
adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
diff --git a/docs/accessibilityinfo.md b/docs/accessibilityinfo.md
index d7af5228b20..8983b7e8b89 100644
--- a/docs/accessibilityinfo.md
+++ b/docs/accessibilityinfo.md
@@ -3,22 +3,14 @@ id: accessibilityinfo
title: AccessibilityInfo
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
## Example
-
|
---
diff --git a/docs/alert.md b/docs/alert.md
index 9c4e51e2fa2..6f6e2870a2a 100644
--- a/docs/alert.md
+++ b/docs/alert.md
@@ -3,6 +3,8 @@ id: alert
title: Alert
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
Launches an alert dialog with the specified title and message.
Optionally provide a list of buttons. Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button.
@@ -11,18 +13,8 @@ This is an API that works both on Android and iOS and can show static alerts. To
### Example
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=Alert%20Function%20Component%20Example&supportedPlatforms=ios,android
import React, { useState } from "react";
@@ -64,7 +56,6 @@ const App = () => {
return (
-
);
@@ -81,7 +72,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
```SnackPlayer name=Alert%20Class%20Component%20Example&supportedPlatforms=ios,android
import React, { Component } from "react";
@@ -145,7 +137,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
## iOS
diff --git a/docs/alertios.md b/docs/alertios.md
index 3113eacacc9..e338397bbd6 100644
--- a/docs/alertios.md
+++ b/docs/alertios.md
@@ -1,6 +1,6 @@
---
id: alertios
-title: 🚧 AlertIOS
+title: '🚧 AlertIOS'
---
> **Deprecated.** Use [`Alert`](alert) instead.
diff --git a/docs/animated.md b/docs/animated.md
index abe51a79d39..de8d140e71c 100644
--- a/docs/animated.md
+++ b/docs/animated.md
@@ -3,47 +3,33 @@ id: animated
title: Animated
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`.
-
-
-
- Using with Function Components
-
-
- Using with Class Components
-
-
-
+
+
> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle.
-
+
+
> Don't modify the animated value directly. It is usually stored as a [state variable](intro-react#state) in class components.
-
+
+
## Example
The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=Animated
import React, { useRef } from "react";
@@ -114,7 +100,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
```SnackPlayer name=Animated
import React, { Component } from "react";
@@ -189,7 +176,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
Refer to the [Animations](animations#animated-api) guide to see additional examples of `Animated` in action.
diff --git a/docs/animations.md b/docs/animations.md
index 8adb6225fb1..b6b489f9931 100644
--- a/docs/animations.md
+++ b/docs/animations.md
@@ -3,6 +3,8 @@ id: animations
title: Animations
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
React Native provides two complementary animation systems: [`Animated`](animations#animated-api) for granular and interactive control of specific values, and [`LayoutAnimation`](animations#layoutanimation-api) for animated global layout transactions.
@@ -230,18 +232,8 @@ The following example implements a horizontal scrolling carousel where the scrol
#### ScrollView with Animated Event Example
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=Animated&supportedPlatforms=ios,android
import React, { useRef } from "react";
@@ -371,7 +363,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
```SnackPlayer name=Animated&supportedPlatforms=ios,android
import React, { Component } from "react";
@@ -524,7 +517,8 @@ const styles = StyleSheet.create({
});
```
-
+
+
When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.
@@ -539,18 +533,8 @@ onPanResponderMove={Animated.event(
#### PanResponder with Animated Event Example
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=Animated
import React, { useRef } from "react";
@@ -608,7 +592,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
```SnackPlayer name=Animated
import React, { Component } from "react";
@@ -664,7 +649,8 @@ const styles = StyleSheet.create({
});
```
-
+
+
### Responding to the current animation value
diff --git a/docs/appearance.md b/docs/appearance.md
index e55ed2575bb..08ddb5e3755 100644
--- a/docs/appearance.md
+++ b/docs/appearance.md
@@ -3,34 +3,34 @@ id: appearance
title: Appearance
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
```jsx
import { Appearance } from 'react-native';
```
The `Appearance` module exposes information about the user's appearance preferences, such as their preferred color scheme (light or dark).
-
- Developer Notes
-
-
-
-
-
-
+#### Developer notes
+
+
-
+
> The `Appearance` API is inspired by the [Media Queries draft](https://drafts.csswg.org/mediaqueries-5/) from the W3C. The color scheme preference is modeled after the [`prefers-color-scheme` CSS media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
-
+
+
> The color scheme preference will map to the user's Light or [Dark theme](https://developer.android.com/guide/topics/ui/look-and-feel/darktheme) preference on Android 10 (API level 29) devices and higher.
-
+
+
> The color scheme preference will map to the user's Light or [Dark Mode](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/) preference on iOS 13 devices and higher.
-
+
+
## Example
@@ -59,17 +59,13 @@ Indicates the current user preferred color scheme. The value may be updated late
Supported color schemes:
-| Value | Description |
-| --------- | --------------------------------------------------- |
-| `"light"` | The user prefers a light color theme. |
-| `"dark"` | The user prefers a dark color theme. |
-| `null` | The user has not indicated a preferred color theme. |
-
-> **Note:** `getColorScheme()` will always return `"light"` when debugging with browser.
+- `light`: The user prefers a light color theme.
+- `dark`: The user prefers a dark color theme.
+- null: The user has not indicated a preferred color theme.
-See also: [`useColorScheme`](usecolorscheme) hook.
+See also: `useColorScheme` hook.
----
+> Note: `getColorScheme()` will always return `light` when debugging with Chrome.
### `addChangeListener()`
@@ -79,8 +75,6 @@ static addChangeListener(listener)
Add an event handler that is fired when appearance preferences change.
----
-
### `removeChangeListener()`
```jsx
diff --git a/docs/appregistry.md b/docs/appregistry.md
index 1732520b6d8..05c33c3495c 100644
--- a/docs/appregistry.md
+++ b/docs/appregistry.md
@@ -3,7 +3,7 @@ id: appregistry
title: AppRegistry
---
-
+
Project with Native Code Required
If you are using the managed expo-cli workflow there is only ever one entry component registered with AppRegistry and it is handled automatically, you do not need to use this API.
@@ -44,10 +44,10 @@ Only called from native code. Cancels a headless task.
**Parameters:**
-| Name | Type | Required |
-| -------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------- |
-| taskId
Required
| number | The native id for this task instance that was used when `startHeadlessTask` was called. |
-| taskKey
Required
| string | The key for the task that was used when `startHeadlessTask` was called. |
+| Name | Type | Required |
+| ------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------------- |
+| taskId
Required
| number | The native id for this task instance that was used when `startHeadlessTask` was called. |
+| taskKey
Required
| string | The key for the task that was used when `startHeadlessTask` was called. |
---
@@ -59,9 +59,9 @@ static enableArchitectureIndicator(enabled)
**Parameters:**
-| Name | Type |
-| -------------------------------------------------------- | ------- |
-| enabled
Required
| boolean |
+| Name | Type |
+| ------------------------------------------------------------ | ------- |
+| enabled
Required
| boolean |
---
@@ -95,9 +95,9 @@ Returns a [Runnable](appregistry#runnable) object.
**Parameters:**
-| Name | Type |
-| ------------------------------------------------------- | ------ |
-| appKey
Required
| string |
+| Name | Type |
+| ----------------------------------------------------------- | ------ |
+| appKey
Required
| string |
---
@@ -131,11 +131,11 @@ Register a headless task which can be cancelled. A headless task is a bit of cod
**Parameters:**
-| Name | Type | Description |
-| --------------------------------------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| taskKey
Required
| string | The native id for this task instance that was used when startHeadlessTask was called. |
-| taskProvider
Required
| [TaskProvider](appregistry#taskprovider) | A promise returning function that takes some data passed from the native side as the only argument. When the promise is resolved or rejected the native side is notified of this event and it may decide to destroy the JS context. |
-| taskCancelProvider
Required
| [TaskCancelProvider](appregistry#taskcancelprovider) | a void returning function that takes no arguments; when a cancellation is requested, the function being executed by taskProvider should wrap up and return ASAP. |
+| Name | Type | Description |
+| ------------------------------------------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| taskKey
Required
| string | The native id for this task instance that was used when startHeadlessTask was called. |
+| taskProvider
Required
| [TaskProvider](appregistry#taskprovider) | A promise returning function that takes some data passed from the native side as the only argument. When the promise is resolved or rejected the native side is notified of this event and it may decide to destroy the JS context. |
+| taskCancelProvider
Required
| [TaskCancelProvider](appregistry#taskcancelprovider) | a void returning function that takes no arguments; when a cancellation is requested, the function being executed by taskProvider should wrap up and return ASAP. |
---
@@ -147,11 +147,11 @@ static registerComponent(appKey, componentProvider, section?)
**Parameters:**
-| Name | Type |
-| ------------------------------------------------------------------ | ----------------- |
-| appKey
Required
| string |
-| componentProvider
Required
| ComponentProvider |
-| section | boolean |
+| Name | Type |
+| ---------------------------------------------------------------------- | ----------------- |
+| appKey
| [AppConfig](appregistry#appconfig) |
+| Name | Type |
+| ----------------------------------------------------------- | ---------------------------------- |
+| config
Required
| [AppConfig](appregistry#appconfig) |
---
@@ -181,10 +181,10 @@ This is a way to run tasks in JavaScript while your app is in the background. It
**Parameters:**
-| Name | Type | Description |
-| --------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| taskKey
Required
| string | The native id for this task instance that was used when startHeadlessTask was called. |
-| taskProvider
Required
| [TaskProvider](appregistry#taskprovider) | A promise returning function that takes some data passed from the native side as the only argument. When the promise is resolved or rejected the native side is notified of this event and it may decide to destroy the JS context. |
+| Name | Type | Description |
+| ------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| taskKey
Required
| string | The native id for this task instance that was used when startHeadlessTask was called. |
+| taskProvider
Required
| [TaskProvider](appregistry#taskprovider) | A promise returning function that takes some data passed from the native side as the only argument. When the promise is resolved or rejected the native side is notified of this event and it may decide to destroy the JS context. |
---
@@ -196,10 +196,10 @@ static registerRunnable(appKey, run)
**Parameters:**
-| Name | Type |
-| ------------------------------------------------------- | -------- |
-| appKey
Required
| string |
-| run
Required
| function |
+| Name | Type |
+| ----------------------------------------------------------- | -------- |
+| appKey
Required
| string |
+| run
Required
| function |
---
@@ -211,10 +211,10 @@ static registerSection(appKey, component)
**Parameters:**
-| Name | Type |
-| ---------------------------------------------------------- | ----------------- |
-| appKey
Required
| string |
-| component
Required
| ComponentProvider |
+| Name | Type |
+| -------------------------------------------------------------- | ----------------- |
+| appKey
Required
| string |
+| component
Required
| ComponentProvider |
---
@@ -228,10 +228,10 @@ Loads the JavaScript bundle and runs the app.
**Parameters:**
-| Name | Type |
-| -------------------------------------------------------------- | ------ |
-| appKey
Required
| string |
-| appParameters
Required
| any |
+| Name | Type |
+| ------------------------------------------------------------------ | ------ |
+| appKey
Required
| string |
+| appParameters
Required
| any |
---
@@ -243,16 +243,16 @@ static setComponentProviderInstrumentationHook(hook)
**Parameters:**
-| Name | Type |
-| ----------------------------------------------------- | -------- |
-| hook
Required
| function |
+| Name | Type |
+| --------------------------------------------------------- | -------- |
+| hook
Required
| function |
A valid `hook` function accepts the following as arguments:
-| Name | Type |
-| ------------------------------------------------------------------------ | ------------------ |
-| component
Required
| ComponentProvider |
-| scopedPerformanceLogger
Required
| IPerformanceLogger |
+| Name | Type |
+| ---------------------------------------------------------------------------- | ------------------ |
+| component
Required
| ComponentProvider |
+| scopedPerformanceLogger
Required
| IPerformanceLogger |
The function must also return a React Component.
@@ -266,9 +266,9 @@ static setWrapperComponentProvider(provider)
**Parameters:**
-| Name | Type |
-| --------------------------------------------------------- | ----------------- |
-| provider
Required
| ComponentProvider |
+| Name | Type |
+| ------------------------------------------------------------- | ----------------- |
+| provider
Required
| ComponentProvider |
---
@@ -282,11 +282,11 @@ Only called from native code. Starts a headless task.
**Parameters:**
-| Name | Type | Description |
-| -------------------------------------------------------- | ------ | -------------------------------------------------------------------- |
-| taskId
Required
| number | The native id for this task instance to keep track of its execution. |
-| taskKey
Required
| string | The key for the task to start. |
-| data
Required
| any | The data to pass to the task. |
+| Name | Type | Description |
+| ------------------------------------------------------------ | ------ | -------------------------------------------------------------------- |
+| taskId
Required
| number | The native id for this task instance to keep track of its execution. |
+| taskKey
Required
| string | The key for the task to start. |
+| data
Required
| any | The data to pass to the task. |
---
@@ -300,9 +300,9 @@ Stops an application when a view should be destroyed.
**Parameters:**
-| Name | Type |
-| -------------------------------------------------------- | ------ |
-| rootTag
Required
| number |
+| Name | Type |
+| ------------------------------------------------------------ | ------ |
+| rootTag
Required
| number |
## Type Definitions
@@ -316,12 +316,12 @@ Application configuration for the `registerConfig` method.
**Properties:**
-| Name | Type |
-| ------------------------------------------------------- | ----------------- |
-| appKey
Required
| string |
-| component | ComponentProvider |
-| run | function |
-| section | boolean |
+| Name | Type |
+| ----------------------------------------------------------- | ----------------- |
+| appKey
Required
| string |
+| component | ComponentProvider |
+| run | function |
+| section | boolean |
> **Note:** Every config is expected to set either `component` or `run` function.
diff --git a/docs/appstate.md b/docs/appstate.md
index 7b1a81b5e23..8adf63bfbb5 100644
--- a/docs/appstate.md
+++ b/docs/appstate.md
@@ -3,6 +3,8 @@ id: appstate
title: AppState
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
AppState is frequently used to determine the intent and proper behavior when handling push notifications.
@@ -22,18 +24,8 @@ For more information, see [Apple's documentation](https://developer.apple.com/do
To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge.
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=AppState%20Function%20Component%20Example
import React, { useRef, useState, useEffect } from "react";
@@ -84,7 +76,8 @@ export default AppStateExample;
If you don't want to see the AppState update from `active` to `inactive` on iOS you can remove the state variable and use the `appState.current` value.
-
+
+
```SnackPlayer name=AppState%20Class%20Component%20Example
import React, { Component } from "react";
@@ -133,7 +126,8 @@ const styles = StyleSheet.create({
export default AppStateExample;
```
-
+
+
This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state, and the null state will happen only momentarily. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
diff --git a/docs/asyncstorage.md b/docs/asyncstorage.md
index 70f783e47ad..689a785e0d3 100644
--- a/docs/asyncstorage.md
+++ b/docs/asyncstorage.md
@@ -1,6 +1,6 @@
---
id: asyncstorage
-title: 🚧 AsyncStorage
+title: '🚧 AsyncStorage'
---
> **Deprecated.** Use [@react-native-community/async-storage](https://github.com/react-native-community/react-native-async-storage) instead.
diff --git a/docs/backhandler.md b/docs/backhandler.md
index f1f2a0a0a1e..42e507c46c6 100644
--- a/docs/backhandler.md
+++ b/docs/backhandler.md
@@ -3,6 +3,8 @@ id: backhandler
title: BackHandler
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
@@ -43,18 +45,8 @@ BackHandler.addEventListener('hardwareBackPress', function() {
The following example implements a scenario where you confirm if the user wants to exit the app:
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=BackHandler&supportedPlatforms=android
import React, { useEffect } from "react";
@@ -104,7 +96,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
```SnackPlayer name=BackHandler&supportedPlatforms=android
import React, { Component } from "react";
@@ -158,24 +151,15 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
Additionally `BackHandler.removeEventListener` can also be used to clear the event listener. Ensure the callback has the reference to the same function used in the `addEventListener` call as shown the following example ﹣
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=BackHandler&supportedPlatforms=android
import React, { useEffect } from "react";
@@ -223,7 +207,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
```SnackPlayer name=BackHandler&supportedPlatforms=android
import React, { Component } from "react";
@@ -274,7 +259,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
## Usage with React Navigation
diff --git a/docs/building-for-tv.md b/docs/building-for-tv.md
index 412c00c287e..d88da2092ea 100644
--- a/docs/building-for-tv.md
+++ b/docs/building-for-tv.md
@@ -1,45 +1,16 @@
---
id: building-for-tv
title: Building For TV Devices
+hide_table_of_contents: true
---
-TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.
-
-
-
-
- Android
-
-
- 🚧 iOS
-
-
-
-
-
-
-> **Deprecated.** Use [react-native-tvos](https://github.com/react-native-community/react-native-tvos) instead. For the details please check the [0.62 release blog post](https://reactnative.dev/blog/#moving-apple-tv-to-react-native-tvos).
-
-The RNTester app supports Apple TV; use the `RNTester-tvOS` build target to build for tvOS.
-
-## Build changes
-
-- _Native layer_: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'.
-
-- _react-native init_: New React Native projects created with `react-native init` will have Apple TV target automatically created in their XCode projects.
-
-- _JavaScript layer_: Support for Apple TV has been added to `Platform.ios.js`. You can check whether code is running on AppleTV by doing
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-```jsx
-var Platform = require('Platform');
-var running_on_tv = Platform.isTV;
+TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.
-// If you want to be more specific and only detect devices running tvOS
-// (but no Android TV devices) you can use:
-var running_on_apple_tv = Platform.isTVOS;
-```
+
-
+
## Build changes
@@ -68,39 +39,97 @@ var Platform = require('Platform');
var running_on_android_tv = Platform.isTV;
```
-
-
## Code changes
-
-
-- _General support for tvOS_: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.
-
-- _Common codebase_: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.
-
-- _Access to touchable controls_: When running on Apple TV, the native view class is `RCTTVView`, which has additional methods to make use of the tvOS focus engine. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableWithoutFeedback`, `TouchableHighlight` and `TouchableOpacity` will work as expected. In particular:
+- _Access to touchable controls_: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableWithoutFeedback`, `TouchableHighlight`, `TouchableOpacity` and `TouchableNativeFeedback` will work as expected. In particular:
- `onFocus` will be executed when the touchable view goes into focus
- `onBlur` will be executed when the touchable view goes out of focus
- `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.
-
+- _TV remote/keyboard input_: A new native class, `ReactAndroidTVRootViewHelper`, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code:
-- _Access to touchable controls_: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableWithoutFeedback`, `TouchableHighlight`, `TouchableOpacity` and `TouchableNativeFeedback` will work as expected. In particular:
+```jsx
+var TVEventHandler = require('TVEventHandler');
- - `onFocus` will be executed when the touchable view goes into focus
- - `onBlur` will be executed when the touchable view goes out of focus
- - `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.
+class Game2048 extends React.Component {
+ _tvEventHandler: any;
-
+ _enableTVEventHandler() {
+ this._tvEventHandler = new TVEventHandler();
+ this._tvEventHandler.enable(this, function(cmp, evt) {
+ if (evt && evt.eventType === 'right') {
+ cmp.setState({ board: cmp.state.board.move(2) });
+ } else if (evt && evt.eventType === 'up') {
+ cmp.setState({ board: cmp.state.board.move(1) });
+ } else if (evt && evt.eventType === 'left') {
+ cmp.setState({ board: cmp.state.board.move(0) });
+ } else if (evt && evt.eventType === 'down') {
+ cmp.setState({ board: cmp.state.board.move(3) });
+ } else if (evt && evt.eventType === 'playPause') {
+ cmp.restartGame();
+ }
+ });
+ }
-- _TV remote/keyboard input_: A new native class, `RCTTVRemoteHandler`, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by `RCTTVNavigationEventEmitter` (a subclass of `RCTEventEmitter`), that fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code:
+ _disableTVEventHandler() {
+ if (this._tvEventHandler) {
+ this._tvEventHandler.disable();
+ delete this._tvEventHandler;
+ }
+ }
-
+ componentDidMount() {
+ this._enableTVEventHandler();
+ }
-- _TV remote/keyboard input_: A new native class, `ReactAndroidTVRootViewHelper`, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code:
+ componentWillUnmount() {
+ this._disableTVEventHandler();
+ }
+}
+```
+
+- _Dev Menu support_: On the simulator, cmd-M will bring up the developer menu, similar to Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )
+
+- _Known issues_:
+
+ - `InputText` components do not work for now (i.e. they cannot receive focus).
+
+
+
+
+> **Deprecated.** Use [react-native-tvos](https://github.com/react-native-community/react-native-tvos) instead. For the details please check the [0.62 release blog post](https://reactnative.dev/blog/#moving-apple-tv-to-react-native-tvos).
+
+## Build changes
+
+- _Native layer_: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'.
+
+- _react-native init_: New React Native projects created with `react-native init` will have Apple TV target automatically created in their XCode projects.
+
+- _JavaScript layer_: Support for Apple TV has been added to `Platform.ios.js`. You can check whether code is running on AppleTV by doing
-
+```jsx
+var Platform = require('Platform');
+var running_on_tv = Platform.isTV;
+
+// If you want to be more specific and only detect devices running tvOS
+// (but no Android TV devices) you can use:
+var running_on_apple_tv = Platform.isTVOS;
+```
+
+## Code changes
+
+- _General support for tvOS_: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.
+
+- _Common codebase_: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.
+
+- _Access to touchable controls_: When running on Apple TV, the native view class is `RCTTVView`, which has additional methods to make use of the tvOS focus engine. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableWithoutFeedback`, `TouchableHighlight` and `TouchableOpacity` will work as expected. In particular:
+
+ - `onFocus` will be executed when the touchable view goes into focus
+ - `onBlur` will be executed when the touchable view goes out of focus
+ - `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.
+
+- _TV remote/keyboard input_: A new native class, `RCTTVRemoteHandler`, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by `RCTTVNavigationEventEmitter` (a subclass of `RCTEventEmitter`), that fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code:
```jsx
var TVEventHandler = require('TVEventHandler');
@@ -112,14 +141,14 @@ class Game2048 extends React.Component {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function(cmp, evt) {
if (evt && evt.eventType === 'right') {
- cmp.setState({board: cmp.state.board.move(2)});
- } else if(evt && evt.eventType === 'up') {
- cmp.setState({board: cmp.state.board.move(1)});
- } else if(evt && evt.eventType === 'left') {
- cmp.setState({board: cmp.state.board.move(0)});
- } else if(evt && evt.eventType === 'down') {
- cmp.setState({board: cmp.state.board.move(3)});
- } else if(evt && evt.eventType === 'playPause') {
+ cmp.setState({ board: cmp.state.board.move(2) });
+ } else if (evt && evt.eventType === 'up') {
+ cmp.setState({ board: cmp.state.board.move(1) });
+ } else if (evt && evt.eventType === 'left') {
+ cmp.setState({ board: cmp.state.board.move(0) });
+ } else if (evt && evt.eventType === 'down') {
+ cmp.setState({ board: cmp.state.board.move(3) });
+ } else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
});
@@ -139,20 +168,20 @@ class Game2048 extends React.Component {
componentWillUnmount() {
this._disableTVEventHandler();
}
+}
```
-
-
- _Dev Menu support_: On the simulator, cmd-D will bring up the developer menu, similar to iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )
- _TV remote animations_: `RCTTVView` native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties.
- _Back navigation with the TV remote menu button_: The `BackHandler` component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote.
-
-
-- _Dev Menu support_: On the simulator, cmd-M will bring up the developer menu, similar to Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )
+- _TabBarIOS behavior_: The `TabBarIOS` component wraps the native `UITabBar` API, which works differently on Apple TV. To avoid jittery re-rendering of the tab bar in tvOS (see [this issue](https://github.com/facebook/react-native/issues/15081)), the selected tab bar item can only be set from Javascript on initial render, and is controlled after that by the user through native code.
- _Known issues_:
- - `TextInput` components do not work for now (i.e. they cannot receive focus, see [this comment](https://github.com/facebook/react-native/pull/16500#issuecomment-629285638)).
+ - [ListView scrolling](https://github.com/facebook/react-native/issues/12793). The issue can be worked around by setting `removeClippedSubviews` to false in ListView and similar components. For more discussion of this issue, see [this PR](https://github.com/facebook/react-native/pull/12944).
+
+
+
diff --git a/docs/button.md b/docs/button.md
index feefb4786ba..46d61ed517b 100644
--- a/docs/button.md
+++ b/docs/button.md
@@ -142,9 +142,9 @@ Text to display for blindness accessibility features.
Color of the text (iOS), or background color of the button (Android).
-| Type | Default |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [color](colors) | `'#2196F3'`
-
diff --git a/docs/datepickerandroid.md b/docs/datepickerandroid.md
index 899db97ca7b..0165d750212 100644
--- a/docs/datepickerandroid.md
+++ b/docs/datepickerandroid.md
@@ -1,6 +1,6 @@
---
id: datepickerandroid
-title: 🚧 DatePickerAndroid
+title: '🚧 DatePickerAndroid'
---
> **Deprecated.** Use [@react-native-community/datetimepicker](https://github.com/react-native-community/react-native-datetimepicker) instead.
diff --git a/docs/datepickerios.md b/docs/datepickerios.md
index 6db2339a52d..05be7c221d1 100644
--- a/docs/datepickerios.md
+++ b/docs/datepickerios.md
@@ -1,26 +1,18 @@
---
id: datepickerios
-title: 🚧 DatePickerIOS
+title: '🚧 DatePickerIOS'
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
> **Deprecated.** Use [@react-native-community/datetimepicker](https://github.com/react-native-community/react-native-datetimepicker) instead.
Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a controlled component, so you must hook in to the `onDateChange` callback and update the `date` prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect `props.date` as the source of truth.
### Example
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios
import React, {useState} from 'react';
@@ -50,7 +42,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios
import React, {Component} from 'react';
@@ -88,7 +81,8 @@ const styles = StyleSheet.create({
});
```
-
+
+
---
@@ -158,7 +152,7 @@ Restricts the range of possible date/time values.
| ---- | -------- |
| Date | No |
-See [`maximumDate`](datepickerios.md#maximumdate) for an example image.
+See [`maximumDate`](#maximumdate) for an example image.
---
diff --git a/docs/debugging.md b/docs/debugging.md
index 670e4af0a62..30d67b457dc 100644
--- a/docs/debugging.md
+++ b/docs/debugging.md
@@ -131,7 +131,7 @@ Then select a React component in React DevTools. There is a search box at the to
You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.
-
+
## Debugging Application State
@@ -141,7 +141,7 @@ You can view installation instructions [in the README](https://github.com/infini
# Native Debugging
-
+
Projects with Native Code Only
The following section only applies to projects with native code exposed. If you are using the managed expo-cli workflow, see the guide on ejecting to use this API.
@@ -152,7 +152,7 @@ You can view installation instructions [in the README](https://github.com/infini
You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:
-```sh
+```shell
$ npx react-native log-ios
$ npx react-native log-android
```
diff --git a/docs/dimensions.md b/docs/dimensions.md
index 737385e9133..d6158accc22 100644
--- a/docs/dimensions.md
+++ b/docs/dimensions.md
@@ -3,6 +3,8 @@ id: dimensions
title: Dimensions
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
> [`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
```jsx
@@ -22,18 +24,8 @@ If you are targeting foldable devices or devices which can change the screen siz
## Example
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=Dimensions
import React, { useState, useEffect } from "react";
@@ -75,7 +67,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
```SnackPlayer name=Dimensions
import React, { Component } from "react";
@@ -127,7 +120,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
# Reference
diff --git a/docs/dynamiccolorios.md b/docs/dynamiccolorios.md
index 2783a6950bb..2e3b51aca1f 100644
--- a/docs/dynamiccolorios.md
+++ b/docs/dynamiccolorios.md
@@ -1,45 +1,45 @@
----
-id: dynamiccolorios
-title: DynamicColorIOS
----
-
-The `DynamicColorIOS` function is a platform color type specific to iOS.
-
-```jsx
-DynamicColorIOS({ light: color, dark: color });
-```
-
-`DynamicColorIOS` takes a single argument as an object with two keys: `dark` and `light`. These correspond to the colors you want to use for "light mode" and "dark mode" on iOS.
-
-> In the future, more keys might become available for different user preferences, like high contrast.
-
-At runtime, the system will choose which of the two colors to display depending on the current system appearance settings. Dynamic colors are useful for branding colors or other app specific colors that still respond automatically to system setting changes.
-
-
- Developer Notes
-
-
-
-
-
-
-
-
-> If you’re familiar with `@media (prefers-color-scheme: dark)` in CSS, this is similar! Only instead of defining all the colors in a media query, you define which color to use under what circumstances right there where you're using it. Neat!
-
-
-
-> The `DynamicColorIOS` function is similar to the iOS native methods [`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider)
-
-
-
-## Example
-
-```jsx
-import { DynamicColorIOS } from 'react-native';
-
-const customDynamicTextColor = DynamicColorIOS({
- dark: 'lightskyblue',
- light: 'midnightblue'
-});
-```
+---
+id: dynamiccolorios
+title: DynamicColorIOS
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+The `DynamicColorIOS` function is a platform color type specific to iOS.
+
+```jsx
+DynamicColorIOS({ light: color, dark: color });
+```
+
+`DynamicColorIOS` takes a single argument as an object with two keys: `dark` and `light`. These correspond to the colors you want to use for "light mode" and "dark mode" on iOS.
+
+> In the future, more keys might become available for different user preferences, like high contrast.
+
+At runtime, the system will choose which of the two colors to display depending on the current system appearance settings. Dynamic colors are useful for branding colors or other app specific colors that still respond automatically to system setting changes.
+
+#### Developer notes
+
+
+
+
+
+> If you’re familiar with `@media (prefers-color-scheme: dark)` in CSS, this is similar! Only instead of defining all the colors in a media query, you define which color to use under what circumstances right there where you're using it. Neat!
+
+
+
+
+> The `DynamicColorIOS` function is similar to the iOS native methods [`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider)
+
+
+
+
+## Example
+
+```jsx
+import { DynamicColorIOS } from 'react-native';
+
+const customDynamicTextColor = DynamicColorIOS({
+ dark: 'lightskyblue',
+ light: 'midnightblue'
+});
+```
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 4e11c1bea9b..b2738701dab 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -1,42 +1,66 @@
---
id: environment-setup
title: Setting up the development environment
+hide_table_of_contents: true
---
-This page will help you install and build your first React Native app.
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+import GuideLinuxAndroid from './\_getting-started-linux-android.md'; import GuideMacOSAndroid from './\_getting-started-macos-android.md'; import GuideWindowsAndroid from './\_getting-started-windows-android.md'; import GuideMacOSIOS from './\_getting-started-macos-ios.md';
-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.io/).
+This page will help you install and build your first React Native app.
-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.
+**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.io/).
-
-
-
- Expo CLI Quickstart
-
-
- React Native CLI Quickstart
-
-
-
+**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.
-
+
+
Assuming that you have [Node 12 LTS](https://nodejs.org/en/download/) or greater installed, you can use npm to install the Expo CLI command line utility:
-```sh
+
+
+
+```shell
npm install -g expo-cli
```
+
+
+
+```shell
+yarn global add expo-cli
+```
+
+
+
+
Then run the following commands to create a new React Native project called "AwesomeProject":
-```sh
+
+
+
+```shell
expo init AwesomeProject
cd AwesomeProject
npm start # you can also use: expo start
```
+
+
+
+```shell
+expo init AwesomeProject
+
+cd AwesomeProject
+yarn start # you can also use: expo start
+```
+
+
+
+
This will start a development server for you.
Running your React Native application
@@ -82,533 +106,87 @@ Expo CLI configures your project to use the most recent React Native version tha
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.
-
+
+
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.
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.
-
- Development OS:
-
-
-
-
-
-
-
-
- Target OS:
-
-
-
-
-
-
-
-
-
Unsupported
-
-
A Mac is required to build projects with native code for iOS. You can follow the Quick Start to learn how to build your app using Expo instead.
-
-
-
-
Installing dependencies
-
-You will need Node, Watchman, the React Native command line interface, and Xcode.
-
-While you can use any editor of your choice to develop your app, you will need to install Xcode in order to set up the necessary tooling to build your React Native app for iOS.
-
-
-
-
Installing dependencies
-
-You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio.
-
-
-
-
Installing dependencies
-
-You will need Node, the React Native command line interface, a JDK, and Android Studio.
-
-
-
-
Installing dependencies
-
-You will need Node, the React Native command line interface, Python2, a JDK, and Android Studio.
-
-
-
-While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.
-
-
-
-
Node & Watchman
-
-We recommend installing Node and Watchman using [Homebrew](http://brew.sh/). Run the following commands in a Terminal after installing Homebrew:
-
-```sh
-brew install node
-brew install watchman
-```
-
-If you have already installed Node on your system, make sure it is Node 10 or newer.
-
-[Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.
-
-
-
-
Java Development Kit
-
-We recommend installing JDK using [Homebrew](http://brew.sh/). Run the following commands in a Terminal after installing Homebrew:
-
-```sh
-brew cask install adoptopenjdk/openjdk/adoptopenjdk8
-```
-
-If you have already installed JDK on your system, make sure it is JDK 8 or newer.
-
-
-
-
Node
-
-Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node 10 or newer.
-
-
-
-
Node, Python2, JDK
-
-We recommend installing Node and Python2 via [Chocolatey](https://chocolatey.org), a popular package manager for Windows.
-
-React Native also requires [Java SE Development Kit (JDK)](https://openjdk.java.net/projects/jdk8/), as well as Python2. Both can be installed using Chocolatey.
-
-Open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the following command:
-
-```powershell
-choco install -y nodejs.install python2 openjdk8
-```
-
-If you have already installed Node on your system, make sure it is Node 10 or newer. If you already have a JDK on your system, make sure it is version 8 or newer.
-
-> You can find additional installation options on [Node's Downloads page](https://nodejs.org/en/download/).
-
-> If you're using the latest version of Java Development Kit, you'll need to change the Gradle version of your project so it can recognize the JDK. You can do that by going to `{project root folder}\android\gradle\wrapper\gradle-wrapper.properties` and changing the `distributionUrl` value to upgrade the Gradle version. You can check out [here the latest releases of Gradle](https://gradle.org/releases/).
-
-
-
-
Xcode & CocoaPods
-
-The easiest way to install Xcode is via the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12). Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.
-
-If you have already installed Xcode on your system, make sure it is version 9.4 or newer.
-
-
Command Line Tools
-
-You will also need to install the Xcode Command Line Tools. Open Xcode, then choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
-
-
-
-
Installing an iOS Simulator in Xcode
-
-To install a simulator, open Xcode > Preferences... and select the Components tab. Select a simulator with the corresponding version of iOS you wish to use.
-
-
CocoaPods
-
-[CocoaPods](https://cocoapods.org/) is built with Ruby and it will be installable with the default Ruby available on macOS. You can use a Ruby Version manager, however we recommend that you use the standard Ruby available on macOS unless you know what you're doing.
-
-Using the default Ruby install will require you to use `sudo` when installing gems. (This is only an issue for the duration of the gem installation, though.)
-
-```sh
-sudo gem install cocoapods
-```
-
-For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
-
-
-
-
Java Development Kit
-
-React Native requires at least the version 8 of the Java SE Development Kit (JDK). You may download and install [OpenJDK](http://openjdk.java.net) from [AdoptOpenJDK](https://adoptopenjdk.net/) or your system packager. You may also [Download and install Oracle JDK 14](https://www.oracle.com/java/technologies/javase-jdk14-downloads.html) if desired.
-
-
-
-
Android development environment
-
-Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.
-
-
-
-
1. Install Android Studio
-
-[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
-
-
-
-- `Android SDK`
-- `Android SDK Platform`
-- `Android Virtual Device`
-- If you are not already using Hyper-V: `Performance (Intel ® HAXM)` ([See here for AMD or Hyper-V](https://android-developers.googleblog.com/2018/07/android-emulator-amd-processor-hyper-v.html))
-
-
-
-- `Android SDK`
-- `Android SDK Platform`
-- `Android Virtual Device`
-
-
-
-Then, click "Next" to install all of these components.
-
-> If the checkboxes are grayed out, you will have a chance to install these components later on.
-
-Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
-
-
2. Install the Android SDK
-
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 10 (Q)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
-
-To do that, open Android Studio, click on "Configure" button and select "SDK Manager".
-
-
-
-
-
-
-
-
-
-
-
-> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.
-
-Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 10 (Q)` entry, then make sure the following items are checked:
-
-- `Android SDK Platform 29`
-- `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image`
-
-Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `29.0.2` is selected.
-
-Finally, click "Apply" to download and install the Android SDK and related build tools.
-
-
3. Configure the ANDROID_HOME environment variable
-
-The React Native tools require some environment variables to be set up in order to build apps with native code.
-
-
-
-Add the following lines to your `$HOME/.bash_profile` or `$HOME/.bashrc` (if you are using `zsh` then `~/.zprofile` or `~/.zshrc`) config file:
-
-
-
-```sh
-export ANDROID_HOME=$HOME/Library/Android/sdk
-export PATH=$PATH:$ANDROID_HOME/emulator
-export PATH=$PATH:$ANDROID_HOME/tools
-export PATH=$PATH:$ANDROID_HOME/tools/bin
-export PATH=$PATH:$ANDROID_HOME/platform-tools
-```
-
-
-
-```sh
-export ANDROID_HOME=$HOME/Android/Sdk
-export PATH=$PATH:$ANDROID_HOME/emulator
-export PATH=$PATH:$ANDROID_HOME/tools
-export PATH=$PATH:$ANDROID_HOME/tools/bin
-export PATH=$PATH:$ANDROID_HOME/platform-tools
-```
-
-
-
-> `.bash_profile` is specific to `bash`. If you're using another shell, you will need to edit the appropriate shell-specific config file.
-
-Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`.
-
-> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.
+#### Development OS
-
+
+
-1. Open the **Windows Control Panel.**
-2. Click on **User Accounts,** then click **User Accounts** again
-3. Click on **Change my environment variables**
-4. Click on **New...** to create a new `ANDROID_HOME` user variable that points to the path to your Android SDK:
+#### Target OS
-
+
+
-The SDK is installed, by default, at the following location:
+[//]: # 'macOS, Android'
-```powershell
-%LOCALAPPDATA%\Android\Sdk
-```
-
-You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.
-
-Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step.
-
-1. Open powershell
-2. Copy and paste **Get-ChildItem -Path Env:\\** into powershell
-3. Verify `ANDROID_HOME` has been added
-
-
4. Add platform-tools to Path
-
-1. Open the **Windows Control Panel.**
-2. Click on **User Accounts,** then click **User Accounts** again
-3. Click on **Change my environment variables**
-4. Select the **Path** variable.
-5. Click **Edit.**
-6. Click **New** and add the path to platform-tools to the list.
-
-The default location for this folder is:
-
-```powershell
-%LOCALAPPDATA%\Android\Sdk\platform-tools
-```
-
-
-
-
Watchman
-
-Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install/#buildinstall) to compile and install Watchman from source.
-
-> [Watchman](https://facebook.github.io/watchman/docs/install/) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later).
-
-
-
-
React Native Command Line Interface
-
-React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-native `, the current stable version of the CLI will be downloaded and executed at the time the command is run.
-
-
-
-
Creating a new application
-
-> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues.
-
-You can use React Native's built-in command line interface to generate a new project. Let's create a new React Native project called "AwesomeProject":
-
-```sh
-npx react-native init AwesomeProject
-```
-
-This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Expo, or if you're adding iOS support to an existing React Native project (see [Platform Specific Code](platform-specific-code.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite).
-
-
[Optional] Using a specific version or template
-
-If you want to start a new project with a specific React Native version, you can use the `--version` argument:
-
-```sh
-npx react-native init AwesomeProject --version X.XX.X
-```
-
-You can also start a project with a custom React Native template, like TypeScript, with `--template` argument:
-
-```sh
-npx react-native init AwesomeTSProject --template react-native-template-typescript
-```
-
-> **Note** If the above command is failing, you may have old version of `react-native` or `react-native-cli` installed globally on your pc. Try uninstalling the cli and run the cli using `npx`.
-
-
-
-
Creating a new application
-
-> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues.
-
-React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":
-
-```sh
-npx react-native init AwesomeProject
-```
-
-This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Expo, or if you're adding Android support to an existing React Native project (see [Platform Specific Code](platform-specific-code.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite).
-
-
[Optional] Using a specific version or template
-
-If you want to start a new project with a specific React Native version, you can use the `--version` argument:
-
-```sh
-npx react-native init AwesomeProject --version X.XX.X
-```
-
-You can also start a project with a custom React Native template, like TypeScript, with `--template` argument:
-
-```sh
-npx react-native init AwesomeTSProject --template react-native-template-typescript
-```
-
-
-
-
Preparing the Android device
-
-You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.
-
-Either way, you will need to prepare the device to run Android apps for development.
-
-
Using a physical device
-
-If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions [here](running-on-device.md).
-
-
Using a virtual device
-
-If you use Android Studio to open `./AwesomeProject/android`, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:
-
-
-
-If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **Q** API Level 29 image.
-
-
-
-> We recommend configuring [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.
-
-
-
-> If you don't have HAXM installed, click on "Install HAXM" or follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows) to set it up, then go back to the AVD Manager.
-
-
+
-> If you don't have HAXM installed, follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-macOS) to set it up, then go back to the AVD Manager.
+
+
-
+[//]: # 'macOS, iOS'
-Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.
+
-
+
+
-
Running your React Native application
-
-
Step 1: Start Metro
-
-First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts)
-
-To start Metro, run `npx react-native start` inside your React Native project folder:
-
-```sh
-npx react-native start
-```
-
-`react-native start` starts Metro Bundler.
-
-> If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project.
-
-> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more JavaScript.
-
-
Step 2: Start your application
-
-Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:
-
-```sh
-npx react-native run-ios
-```
-
-You should see your new app running in the iOS Simulator shortly.
-
-
-
-`npx react-native run-ios` is one way to run your app. You can also run it directly from within Xcode.
-
-> If you can't get this to work, see the [Troubleshooting](troubleshooting.md#content) page.
-
-
Running on a device
-
-The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions [here](running-on-device.md).
-
-
-
-
Running your React Native application
-
-
Step 1: Start Metro
-
-First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts)
-
-To start Metro, run `npx react-native start` inside your React Native project folder:
-
-```sh
-npx react-native start
-```
-
-`react-native start` starts Metro Bundler.
-
-> If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project.
-
-> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more JavaScript.
+
+
-
Step 2: Start your application
+#### Target OS
-Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:
+
+
-```sh
-npx react-native run-android
-```
-
-If everything is set up correctly, you should see your new app running in your Android emulator shortly.
-
-
-
-
-
-
-
-
-
-
-
-`npx react-native run-android` is one way to run your app - you can also run it directly from within Android Studio.
-
-> If you can't get this to work, see the [Troubleshooting](troubleshooting.md#content) page.
-
-
-
-
Modifying your app
-
-Now that you have successfully run the app, let's modify it.
-
-
-
-- Open `App.js` in your text editor of choice and edit some lines.
-- Hit `⌘R` in your iOS Simulator to reload the app and see your changes!
+[//]: # 'Windows, Android'
-
+
-- Open `App.js` in your text editor of choice and edit some lines.
-- Press the `R` key twice or select `Reload` from the Developer Menu (`⌘M`) to see your changes!
+
+
-
+[//]: # 'Windows, iOS'
-
Modifying your app
+## Unsupported
-Now that you have successfully run the app, let's modify it.
+> 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.
-- Open `App.js` in your text editor of choice and edit some lines.
-- Press the `R` key twice or select `Reload` from the Developer Menu (`Ctrl + M`) to see your changes!
+
+
-
+
+
-
That's it!
+#### Target OS
-Congratulations! You've successfully run and modified your first React Native app.
+
+
-
+[//]: # 'Linux, Android'
-
+
-
That's it!
+
+
-Congratulations! You've successfully run and modified your first React Native app.
+[//]: # 'Linux, iOS'
-
+## 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.
-
Now what?
+
+
-- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md).
+
+
-If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
-
-
-
-
Now what?
-
-- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md).
-
-If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
+
+
diff --git a/docs/hermes.md b/docs/hermes.md
index 208dcea2644..09073d9ab3c 100644
--- a/docs/hermes.md
+++ b/docs/hermes.md
@@ -4,7 +4,7 @@ title: Using Hermes
---
-
+
[Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size. At this time Hermes is an **opt-in** React Native feature, and this guide explains how to enable it.
@@ -36,13 +36,13 @@ Also, if you're using ProGuard, you will need to add these rules in `proguard-ru
Next, if you've already built your app at least once, clean the build:
-```sh
+```shell
$ cd android && ./gradlew clean
```
That's it! You should now be able to develop and deploy your app as normal:
-```sh
+```shell
$ npx react-native run-android
```
@@ -64,7 +64,7 @@ const isHermes = () => !!global.HermesInternal;
To see the benefits of Hermes, try making a release build/deployment of your app to compare. For example:
-```sh
+```shell
$ npx react-native run-android --variant release
```
diff --git a/docs/image-style-props.md b/docs/image-style-props.md
index 292dafab4b1..76fac320948 100644
--- a/docs/image-style-props.md
+++ b/docs/image-style-props.md
@@ -3,22 +3,14 @@ id: image-style-props
title: Image Style Props
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
## Examples
### Image Resize Mode
-
-
-
+
+
```SnackPlayer name=Style%20tintColor%20Function%20Component
import React from "react";
@@ -486,7 +454,8 @@ const styles = StyleSheet.create({
export default DisplayAnImageWithStyle;
```
-
+
+
```SnackPlayer name=Style%20tintColor%20Class%20Component
import React, { Component } from "react";
@@ -525,7 +494,8 @@ const styles = StyleSheet.create({
export default DisplayAnImageWithStyle;
```
-
+
+
# Reference
diff --git a/docs/image.md b/docs/image.md
index 9482e37b90b..0637d732e2b 100644
--- a/docs/image.md
+++ b/docs/image.md
@@ -3,6 +3,8 @@ id: image
title: Image
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.
This example shows fetching and displaying an image from local storage as well as one from network and even from data provided in the `'data:'` uri scheme.
@@ -11,18 +13,8 @@ This example shows fetching and displaying an image from local storage as well a
## Examples
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=Function%20Component%20Example
@@ -70,7 +62,8 @@ const DisplayAnImage = () => {
export default DisplayAnImage;
```
-
+
+
```SnackPlayer name=Class%20Component%20Example
@@ -115,22 +108,13 @@ class DisplayAnImage extends Component {
export default DisplayAnImage;
```
-
+
+
You can also add `style` to an image:
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=Function%20Component%20Example
@@ -162,7 +146,8 @@ const DisplayAnImageWithStyle = () => {
export default DisplayAnImageWithStyle;
```
-
+
+
```SnackPlayer name=Class%20Component%20Example
@@ -193,7 +178,8 @@ class DisplayAnImageWithStyle extends Component {
export default DisplayAnImageWithStyle;
```
-
+
+
## GIF and WebP support on Android
diff --git a/docs/imageeditor.md b/docs/imageeditor.md
index 8b61d8aa4b7..6133c4cf056 100644
--- a/docs/imageeditor.md
+++ b/docs/imageeditor.md
@@ -1,6 +1,6 @@
---
id: imageeditor
-title: 🚧 ImageEditor
+title: '🚧 ImageEditor'
---
> **Deprecated.** Use [@react-native-community/image-editor](https://github.com/react-native-community/react-native-image-editor) instead.
diff --git a/docs/imagepickerios.md b/docs/imagepickerios.md
index 5e4685eff8e..c998b94ea18 100644
--- a/docs/imagepickerios.md
+++ b/docs/imagepickerios.md
@@ -1,6 +1,6 @@
---
id: imagepickerios
-title: 🚧 ImagePickerIOS
+title: '🚧 ImagePickerIOS'
---
> **Deprecated.** Use [@react-native-community/image-picker-ios](https://github.com/react-native-community/react-native-image-picker-ios) instead.
diff --git a/docs/integration-with-existing-apps.md b/docs/integration-with-existing-apps.md
index a4db91fd9e3..90e47ac2f55 100644
--- a/docs/integration-with-existing-apps.md
+++ b/docs/integration-with-existing-apps.md
@@ -1,853 +1,32 @@
---
id: integration-with-existing-apps
title: Integration with Existing Apps
+hide_table_of_contents: true
---
-React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc.
-
-The specific steps are different depending on what platform you're targeting.
-
-
-
-
- iOS (Objective-C)
-
-
- iOS (Swift)
-
-
- Android (Java)
-
-
-
-
-
-
-## Key Concepts
-
-
-
-The keys to integrating React Native components into your iOS application are to:
-
-1. Set up React Native dependencies and directory structure.
-2. Understand what React Native components you will use in your app.
-3. Add these components as dependencies using CocoaPods.
-4. Develop your React Native components in JavaScript.
-5. Add a `RCTRootView` to your iOS app. This view will serve as the container for your React Native component.
-6. Start the React Native server and run your native application.
-7. Verify that the React Native aspect of your application works as expected.
-
-
-
-The keys to integrating React Native components into your Android application are to:
-
-1. Set up React Native dependencies and directory structure.
-2. Develop your React Native components in JavaScript.
-3. Add a `ReactRootView` to your Android app. This view will serve as the container for your React Native component.
-4. Start the React Native server and run your native application.
-5. Verify that the React Native aspect of your application works as expected.
-
-
-
-## Prerequisites
-
-
-
-Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for iOS.
-
-### 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then copy your existing iOS project to a `/ios` subfolder.
-
-
-
-Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for Android.
-
-### 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then copy your existing Android project to an `/android` subfolder.
-
-
-
-### 2. Install JavaScript dependencies
-
-Go to the root directory for your project and create a new `package.json` file with the following contents:
-
-```
-{
- "name": "MyReactNativeApp",
- "version": "0.0.1",
- "private": true,
- "scripts": {
- "start": "yarn react-native start"
- }
-}
-```
-
-Next, make sure you have [installed the yarn package manager](https://yarnpkg.com/lang/en/docs/install/).
-
-Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run:
-
-```sh
-$ yarn add react-native
-```
-
-This will print a message similar to the following (scroll up in the yarn output to see it):
-
-> warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".
-
-This is OK, it means we also need to install React:
-
-```sh
-$ yarn add react@version_printed_above
-```
-
-Yarn has created a new `/node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
-
-Add `node_modules/` to your `.gitignore` file.
-
-
-
-### 3. Install CocoaPods
-
-[CocoaPods](http://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
-
-We recommend installing CocoaPods using [Homebrew](http://brew.sh/).
-
-```sh
-$ brew install cocoapods
-```
-
-> It is technically possible not to use CocoaPods, but that would require manual library and linker additions that would overly complicate this process.
-
-
-
-## Adding React Native to your app
-
-
-
-Assume the [app for integration](https://github.com/JoelMarcey/iOS-2048) is a [2048](https://en.wikipedia.org/wiki/2048_%28video_game%29) game. Here is what the main menu of the native application looks like without React Native.
-
-
-
-Assume the [app for integration](https://github.com/JoelMarcey/swift-2048) is a [2048](https://en.wikipedia.org/wiki/2048_%28video_game%29) game. Here is what the main menu of the native application looks like without React Native.
-
-
-
-
-
-### Command Line Tools for Xcode
-
-Install the Command Line Tools. Choose "Preferences..." in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
-
-
-
-### Configuring CocoaPods dependencies
-
-Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.
-
-The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/master/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `` elements), then you will need the `RCTImage` `subspec`.
-
-You can specify which `subspec`s your app will depend on in a `Podfile` file. The easiest way to create a `Podfile` is by running the CocoaPods `init` command in the `/ios` subfolder of your project:
-
-```sh
-$ pod init
-```
-
-The `Podfile` will contain a boilerplate setup that you will tweak for your integration purposes.
-
-> The `Podfile` version changes depending on your version of `react-native`. Refer to https://react-native-community.github.io/upgrade-helper/ for the specific version of `Podfile` you should be using.
-
-Ultimately, your `Podfile` should look something similar to this:
-
-
-
-```
-# The target name is most likely the name of your project.
-target 'NumberTileGame' do
-
- # Your 'node_modules' directory is probably in the root of your project,
- # but if not, adjust the `:path` accordingly
- pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
- pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
- pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
- pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
- pod 'React', :path => '../node_modules/react-native/'
- pod 'React-Core', :path => '../node_modules/react-native/'
- pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
- pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
- pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
- pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
- pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
- pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
- pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
- pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
- pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
- pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
- pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
- pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'
-
- pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
- pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
- pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
- pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
- pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon"
- pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
- pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
-
- pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
- pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
- pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
-
-end
-```
-
-
-
-```
-source 'https://github.com/CocoaPods/Specs.git'
-
-# Required for Swift apps
-platform :ios, '8.0'
-use_frameworks!
-
-# The target name is most likely the name of your project.
-target 'swift-2048' do
-
- # Your 'node_modules' directory is probably in the root of your project,
- # but if not, adjust the `:path` accordingly
- pod 'React', :path => '../node_modules/react-native', :subspecs => [
- 'Core',
- 'CxxBridge', # Include this for RN >= 0.47
- 'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
- 'RCTText',
- 'RCTNetwork',
- 'RCTWebSocket', # needed for debugging
- # Add any other subspecs you want to use in your project
- ]
- # Explicitly include Yoga if you are using RN >= 0.42.0
- pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
-
- # Third party deps podspec link
- pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
- pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
- pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
-
-end
-```
-
-
-
-After you have created your `Podfile`, you are ready to install the React Native pod.
-
-```sh
-$ pod install
-```
-
-You should see output such as:
-
-```
-Analyzing dependencies
-Fetching podspec for `React` from `../node_modules/react-native`
-Downloading dependencies
-Installing React (0.62.0)
-Generating Pods project
-Integrating client project
-Sending stats
-Pod installation complete! There are 3 dependencies from the Podfile and 1 total pod installed.
-```
-
-> If this fails with errors mentioning `xcrun`, make sure that in Xcode in **Preferences > Locations** the Command Line Tools are assigned.
-
-
-
-> If you get a warning such as "_The `swift-2048 [Debug]` target overrides the `FRAMEWORK_SEARCH_PATHS` build setting defined in `Pods/Target Support Files/Pods-swift-2048/Pods-swift-2048.debug.xcconfig`. This can lead to problems with the CocoaPods installation_", then make sure the `Framework Search Paths` in `Build Settings` for both `Debug` and `Release` only contain `$(inherited)`.
-
-
-
-### Code integration
-
-Now we will actually modify the native iOS application to integrate React Native. For our 2048 sample app, we will add a "High Score" screen in React Native.
-
-#### The React Native component
-
-The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.
-
-##### 1. Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `require`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will put everything in `index.js`.
-
-##### 2. Add your React Native code
-
-In your `index.js`, create your component. In our sample here, we will add a `` component within a styled ``
-
-```jsx
-import React from 'react';
-import {
- AppRegistry,
- StyleSheet,
- Text,
- View
-} from 'react-native';
-
-class RNHighScores extends React.Component {
- render() {
- var contents = this.props['scores'].map((score) => (
-
- {score.name}:{score.value}
- {'\n'}
-
- ));
- return (
-
-
- 2048 High Scores!
-
- {contents}
-
- );
- }
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#FFFFFF'
- },
- highScoresTitle: {
- fontSize: 20,
- textAlign: 'center',
- margin: 10
- },
- scores: {
- textAlign: 'center',
- color: '#333333',
- marginBottom: 5
- }
-});
-
-// Module name
-AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
-```
-
-> `RNHighScores` is the name of your module that will be used when you add a view to React Native from within your iOS application.
-
-#### The Magic: `RCTRootView`
-
-Now that your React Native component is created via `index.js`, you need to add that component to a new or existing `ViewController`. The easiest path to take is to optionally create an event path to your component and then add that component to an existing `ViewController`.
-
-We will tie our React Native component with a new native view in the `ViewController` that will actually contain it called `RCTRootView` .
-
-##### 1. Create an Event Path
-
-You can add a new link on the main game menu to go to the "High Score" React Native page.
-
-
-
-##### 2. Event Handler
-
-We will now add an event handler from the menu link. A method will be added to the main `ViewController` of your application. This is where `RCTRootView` comes into play.
-
-When you build a React Native application, you use the [Metro bundler][metro] to create an `index.bundle` that will be served by the React Native server. Inside `index.bundle` will be our `RNHighScore` module. So, we need to point our `RCTRootView` to the location of the `index.bundle` resource (via `NSURL`) and tie it to the module.
-
-We will, for debugging purposes, log that the event handler was invoked. Then, we will create a string with the location of our React Native code that exists inside the `index.bundle`. Finally, we will create the main `RCTRootView`. Notice how we provide `RNHighScores` as the `moduleName` that we created [above](#the-react-native-component) when writing the code for our React Native component.
-
-
-
-First `import` the `RCTRootView` header.
-
-```objectivec
-#import
-```
-
-> The `initialProperties` are here for illustration purposes so we have some data for our high score screen. In our React Native component, we will use `this.props` to get access to that data.
-
-```objectivec
-- (IBAction)highScoreButtonPressed:(id)sender {
- NSLog(@"High Score Button Pressed");
- NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
-
- RCTRootView *rootView =
- [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
- moduleName: @"RNHighScores"
- initialProperties:
- @{
- @"scores" : @[
- @{
- @"name" : @"Alex",
- @"value": @"42"
- },
- @{
- @"name" : @"Joel",
- @"value": @"10"
- }
- ]
- }
- launchOptions: nil];
- UIViewController *vc = [[UIViewController alloc] init];
- vc.view = rootView;
- [self presentViewController:vc animated:YES completion:nil];
-}
-```
-
-> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`.
-
-
-
-First `import` the `React` library.
-
-```jsx
-import React
-```
-
-> The `initialProperties` are here for illustration purposes so we have some data for our high score screen. In our React Native component, we will use `this.props` to get access to that data.
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';
-```swift
-@IBAction func highScoreButtonTapped(sender : UIButton) {
- NSLog("Hello")
- let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios")
- let mockData:NSDictionary = ["scores":
- [
- ["name":"Alex", "value":"42"],
- ["name":"Joel", "value":"10"]
- ]
- ]
+import IntegrationJava from './\_integration-with-exisiting-apps-java.md'; import IntegrationObjC from './\_integration-with-exisiting-apps-objc.md'; import IntegrationSwift from './\_integration-with-exisiting-apps-swift.md';
- let rootView = RCTRootView(
- bundleURL: jsCodeLocation,
- moduleName: "RNHighScores",
- initialProperties: mockData as [NSObject : AnyObject],
- launchOptions: nil
- )
- let vc = UIViewController()
- vc.view = rootView
- self.present(vc, animated: true, completion: nil)
-}
-```
-
-> Note that `RCTRootView bundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `RCTRootView bundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L89) to create a bridge and then use `RCTRootView initWithBridge`.
-
-
-
-> When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file.
-
-
-
-> When moving your app to production, the `URL` can point to a pre-bundled file on disk via something like `Bundle.main.url(forResource: "main", withExtension: "jsbundle")`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file.
-
-
-
-##### 3. Wire Up
-
-Wire up the new link in the main menu to the newly added event handler method.
-
-
-
-> One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the `Touch Up Inside` event, drag that to the storyboard and then select the created method from the list provided.
-
-### Test your integration
-
-You have now done all the basic steps to integrate React Native with your current application. Now we will start the [Metro bundler][metro] to build the `index.bundle` package and the server running on `localhost` to serve it.
-
-##### 1. Add App Transport Security exception
-
-Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project's `Info.plist` (or equivalent) file.
-
-```xml
-NSAppTransportSecurity
-
- NSExceptionDomains
-
- localhost
-
- NSTemporaryExceptionAllowsInsecureHTTPLoads
-
-
-
-
-```
-
-> App Transport Security is good for your users. Make sure to re-enable it prior to releasing your app for production.
-
-##### 2. Run the packager
-
-To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project:
-
-```sh
-$ npm start
-```
-
-##### 3. Run the app
-
-If you are using Xcode or your favorite editor, build and run your native iOS application as normal. Alternatively, you can run the app from the command line using:
-
-```
-# From the root of your project
-$ npx react-native run-ios
-```
-
-In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.
-
-Here is the _native_ application home screen:
-
-
-
-Here is the _React Native_ high score screen:
-
-
-
-> If you are getting module resolution issues when running your application please see [this GitHub issue](https://github.com/facebook/react-native/issues/4968) for information and possible resolution. [This comment](https://github.com/facebook/react-native/issues/4968#issuecomment-220941717) seemed to be the latest possible resolution.
-
-### See the Code
-
-
-
-You can examine the code that added the React Native screen to our sample app on [GitHub](https://github.com/JoelMarcey/iOS-2048/commit/9ae70c7cdd53eb59f5f7c7daab382b0300ed3585).
-
-
-
-You can examine the code that added the React Native screen to our sample app on [GitHub](https://github.com/JoelMarcey/swift-2048/commit/13272a31ee6dd46dc68b1dcf4eaf16c1a10f5229).
-
-
-
-## Adding React Native to your app
-
-### Configuring maven
-
-Add the React Native and JSC dependency to your app's `build.gradle` file:
-
-```gradle
-dependencies {
- implementation "com.android.support:appcompat-v7:27.1.1"
- ...
- implementation "com.facebook.react:react-native:+" // From node_modules
- implementation "org.webkit:android-jsc:+"
-}
-```
-
-> If you want to ensure that you are always using a specific React Native version in your native build, replace `+` with an actual React Native version you've downloaded from `npm`.
-
-Add an entry for the local React Native and JSC maven directories to the top-level `build.gradle`. Be sure to add it to the “allprojects” block, above other maven repositories:
-
-```gradle
-allprojects {
- repositories {
- maven {
- // All of React Native (JS, Android binaries) is installed from npm
- url "$rootDir/../node_modules/react-native/android"
- }
- maven {
- // Android JSC is installed from npm
- url("$rootDir/../node_modules/jsc-android/dist")
- }
- ...
- }
- ...
-}
-```
-
-> Make sure that the path is correct! You shouldn’t run into any “Failed to resolve: com.facebook.react:react-native:0.x.x" errors after running Gradle sync in Android Studio.
-
-### Enable native modules autolinking
-
-To use the power of [autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md), we have to apply it a few places. First add the following entry to `settings.gradle`:
-
-```gradle
-apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
-```
-
-Next add the following entry at the very bottom of the `app/build.gradle`:
-
-```gradle
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
-```
-
-### Configuring permissions
-
-Next, make sure you have the Internet permission in your `AndroidManifest.xml`:
-
-
-
-If you need to access to the `DevSettingsActivity` add to your `AndroidManifest.xml`:
-
-
-
-This is only used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to.
-
-### Cleartext Traffic (API level 28+)
-
-> Starting with Android 9 (API level 28), cleartext traffic is disabled by default; this prevents your application from connecting to the [Metro bundler][metro]. The changes below allow cleartext traffic in debug builds.
-
-#### 1. Apply the `usesCleartextTraffic` option to your Debug `AndroidManifest.xml`
-
-```xml
-
-
-
-
-
-```
-
-This is not required for Release builds.
-
-To learn more about Network Security Config and the cleartext traffic policy [see this link](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted).
-
-### Code integration
-
-Now we will actually modify the native Android application to integrate React Native.
-
-#### The React Native component
-
-The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.
-
-##### 1. Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `require`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will put everything in `index.js`.
-
-##### 2. Add your React Native code
-
-In your `index.js`, create your component. In our sample here, we will add a `` component within a styled ``:
-
-```jsx
-import React from 'react';
-import {
- AppRegistry,
- StyleSheet,
- Text,
- View
-} from 'react-native';
-
-class HelloWorld extends React.Component {
- render() {
- return (
-
- Hello, World
-
- );
- }
-}
-var styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center'
- },
- hello: {
- fontSize: 20,
- textAlign: 'center',
- margin: 10
- }
-});
-
-AppRegistry.registerComponent(
- 'MyReactNativeApp',
- () => HelloWorld
-);
-```
-
-##### 3. Configure permissions for development error overlay
-
-If your app is targeting the Android `API level 23` or greater, make sure you have the permission `android.permission.SYSTEM_ALERT_WINDOW` enabled for the development build. You can check this with `Settings.canDrawOverlays(this);`. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in `onCreate()` method.
-
-```java
-private final int OVERLAY_PERMISSION_REQ_CODE = 1; // Choose any value
-
-...
-
-if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
- if (!Settings.canDrawOverlays(this)) {
- Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
- Uri.parse("package:" + getPackageName()));
- startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
- }
-}
-```
-
-Finally, the `onActivityResult()` method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX. Also, for integrating Native Modules which use `startActivityForResult`, we need to pass the result to the `onActivityResult` method of our `ReactInstanceManager` instance.
-
-```java
-@Override
-protected void onActivityResult(int requestCode, int resultCode, Intent data) {
- if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
- if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
- if (!Settings.canDrawOverlays(this)) {
- // SYSTEM_ALERT_WINDOW permission not granted
- }
- }
- }
- mReactInstanceManager.onActivityResult( this, requestCode, resultCode, data );
-}
-```
-
-#### The Magic: `ReactRootView`
-
-Let's add some native code in order to start the React Native runtime and tell it to render our JS component. To do this, we're going to create an `Activity` that creates a `ReactRootView`, starts a React application inside it and sets it as the main content view.
-
-> If you are targeting Android version <5, use the `AppCompatActivity` class from the `com.android.support:appcompat` package instead of `Activity`.
-
-```java
-public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
- private ReactRootView mReactRootView;
- private ReactInstanceManager mReactInstanceManager;
-
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- SoLoader.init(this, false);
-
- mReactRootView = new ReactRootView(this);
- List packages = new PackageList(getApplication()).getPackages();
- // Packages that cannot be autolinked yet can be added manually here, for example:
- // packages.add(new MyReactNativePackage());
- // Remember to include them in `settings.gradle` and `app/build.gradle` too.
-
- mReactInstanceManager = ReactInstanceManager.builder()
- .setApplication(getApplication())
- .setCurrentActivity(this)
- .setBundleAssetName("index.android.bundle")
- .setJSMainModulePath("index")
- .addPackages(packages)
- .setUseDeveloperSupport(BuildConfig.DEBUG)
- .setInitialLifecycleState(LifecycleState.RESUMED)
- .build();
- // The string here (e.g. "MyReactNativeApp") has to match
- // the string in AppRegistry.registerComponent() in index.js
- mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
-
- setContentView(mReactRootView);
- }
-
- @Override
- public void invokeDefaultOnBackPressed() {
- super.onBackPressed();
- }
-}
-```
-
-> If you are using a starter kit for React Native, replace the "HelloWorld" string with the one in your index.js file (it’s the first argument to the `AppRegistry.registerComponent()` method).
-
-Perform a “Sync Project files with Gradle” operation.
-
-If you are using Android Studio, use `Alt + Enter` to add all missing imports in your MyReactActivity class. Be careful to use your package’s `BuildConfig` and not the one from the `facebook` package.
-
-We need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` because some React Native UI components rely on this theme.
-
-```xml
-
-
-```
-
-> A `ReactInstanceManager` can be shared by multiple activities and/or fragments. You will want to make your own `ReactFragment` or `ReactActivity` and have a singleton _holder_ that holds a `ReactInstanceManager`. When you need the `ReactInstanceManager` (e.g., to hook up the `ReactInstanceManager` to the lifecycle of those Activities or Fragments) use the one provided by the singleton.
-
-Next, we need to pass some activity lifecycle callbacks to the `ReactInstanceManager` and `ReactRootView`:
-
-```java
-@Override
-protected void onPause() {
- super.onPause();
-
- if (mReactInstanceManager != null) {
- mReactInstanceManager.onHostPause(this);
- }
-}
-
-@Override
-protected void onResume() {
- super.onResume();
-
- if (mReactInstanceManager != null) {
- mReactInstanceManager.onHostResume(this, this);
- }
-}
-
-@Override
-protected void onDestroy() {
- super.onDestroy();
-
- if (mReactInstanceManager != null) {
- mReactInstanceManager.onHostDestroy(this);
- }
- if (mReactRootView != null) {
- mReactRootView.unmountReactApplication();
- }
-}
-```
-
-We also need to pass back button events to React Native:
-
-```java
-@Override
- public void onBackPressed() {
- if (mReactInstanceManager != null) {
- mReactInstanceManager.onBackPressed();
- } else {
- super.onBackPressed();
- }
-}
-```
-
-This allows JavaScript to control what happens when the user presses the hardware back button (e.g. to implement navigation). When JavaScript doesn't handle the back button press, your `invokeDefaultOnBackPressed` method will be called. By default this finishes your `Activity`.
-
-Finally, we need to hook up the dev menu. By default, this is activated by (rage) shaking the device, but this is not very useful in emulators. So we make it show when you press the hardware menu button (use `Ctrl + M` if you're using Android Studio emulator):
-
-```java
-@Override
-public boolean onKeyUp(int keyCode, KeyEvent event) {
- if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
- mReactInstanceManager.showDevOptionsDialog();
- return true;
- }
- return super.onKeyUp(keyCode, event);
-}
-```
-
-Now your activity is ready to run some JavaScript code.
-
-### Test your integration
-
-You have now done all the basic steps to integrate React Native with your current application. Now we will start the [Metro bundler][metro] to build the `index.bundle` package and the server running on localhost to serve it.
-
-##### 1. Run the packager
-
-To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project:
-
-```sh
-$ yarn start
-```
-
-##### 2. Run the app
-
-Now build and run your Android app as normal.
-
-Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:
-
-
+React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc.
-### Creating a release build in Android Studio
+The specific steps are different depending on what platform you're targeting.
-You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app. There’s one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:
+
-```sh
-$ npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
-```
+
-> Don’t forget to replace the paths with correct ones and create the assets folder if it doesn’t exist.
+
-Now, create a release build of your native app from within Android Studio as usual and you should be good to go!
+
+
-
+
-### Now what?
+
+
-At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+
-[metro]: https://facebook.github.io/metro/
+
+
diff --git a/docs/intro-react-native-components.md b/docs/intro-react-native-components.md
index a45e52fcb51..a74eff50606 100644
--- a/docs/intro-react-native-components.md
+++ b/docs/intro-react-native-components.md
@@ -1,7 +1,7 @@
---
id: intro-react-native-components
title: Core Components and Native Components
-description: React Native lets you compose app interfaces using Native Components. Conveniently, it comes with a set of these components for you to get started with right now—the Core Components!
+description: 'React Native lets you compose app interfaces using Native Components. Conveniently, it comes with a set of these components for you to get started with right now—the Core Components!'
---
React Native is an open source framework for building Android and iOS applications using [React](https://reactjs.org/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native.
diff --git a/docs/intro-react.md b/docs/intro-react.md
index 5dfd595c442..2d11718d54a 100644
--- a/docs/intro-react.md
+++ b/docs/intro-react.md
@@ -4,6 +4,8 @@ title: React Fundamentals
description: To understand React Native fully, you need a solid foundation in React. This short introduction to React can help you get started or get refreshed.
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
React Native runs on [React](https://reactjs.org/), a popular open source library for building user interfaces with JavaScript. To make the most of React Native, it helps to understand React itself. This section can get you started or can serve as a refresher course.
We’re going to cover the core concepts behind React:
@@ -19,18 +21,8 @@ If you want to dig deeper, we encourage you to check out [React’s official doc
The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component:
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=Your%20Cat
import React from 'react';
@@ -78,7 +70,8 @@ const Cat = () => {
export default Cat;
```
-
+
+
Class components tend to be a bit more verbose than function components.
@@ -131,7 +124,8 @@ class Cat extends Component {
export default Cat;
```
-
+
+
> This is one of many ways to export your component. This kind of export works well with the Snack Player. However, depending on your app’s file structure, you might need to use a different convention. This [handy cheatsheet on JavaScript imports and exports](https://medium.com/dailyjs/javascript-module-cheatsheet-7bd474f1d829) can help.
@@ -209,23 +203,21 @@ const Cat = () => {
export default Cat;
```
-
- Developer Notes
-
-
-
-
-
+#### Developer notes
-
+
+
+
> If you’re familiar with web development, `` and `` might remind you of HTML! You can think of them as the `
` and `
` tags of application development.
-
+
+
> On Android, you usually put your views inside `LinearLayout`, `FrameLayout`, `RelativeLayout`, etc. to define how the view’s children will be arranged on the screen. In React Native, `View` uses Flexbox for its children’s layout. You can learn more in [our guide to layout with Flexbox](flexbox).
-
+
+
You can render this component multiple times and in multiple places without repeating your code by using ``:
@@ -323,18 +315,8 @@ While you can think of props as arguments you use to configure how components re
The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state.
-
-
-
- State with Function Components
-
-
- State with Class Components
-
-
-
-
-
+
+
You can add state to a component by calling [React’s `useState` Hook](https://reactjs.org/docs/hooks-state.html). A Hook is a kind of function that lets you “hook into” React features. For example, `useState` is a Hook that lets you add state to function components. You can learn more about [other kinds of Hooks in the React documentation.](https://reactjs.org/docs/hooks-intro.html)
@@ -433,7 +415,8 @@ const Cafe = () => {
};
```
-
+
+
The older class components approach is a little different when it comes to state.
@@ -547,7 +530,8 @@ class Cafe extends Component {
export default Cafe;
```
-
+
+
> See the `<>` and `>` above? These bits of JSX are [fragments](https://reactjs.org/docs/fragments.html). Adjacent JSX elements must be wrapped in an enclosing tag. Fragments let you do that without nesting an extra, unnecessary wrapping element like `View`.
diff --git a/docs/introduction.md b/docs/introduction.md
index e80dfc549c5..a5149173148 100644
--- a/docs/introduction.md
+++ b/docs/introduction.md
@@ -1,14 +1,17 @@
---
id: getting-started
+slug: /
title: Introduction
description: This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment.
---
-
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+
Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more!
-
+
Many different kinds of people use React Native: from advanced iOS developers to React beginners, to people getting started programming for the first time in their career. These docs were written for all learners, no matter their experience level or background.
@@ -54,18 +57,8 @@ With React, you can make components using either classes or functions. Originall
[Hooks were introduced in React Native 0.58.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so:
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=Hello%20World%20Function%20Component
import React from 'react';
@@ -86,7 +79,8 @@ const HelloWorldApp = () => {
export default HelloWorldApp;
```
-
+
+
```SnackPlayer name=Hello%20World%20Class%20Component
import React, { Component } from 'react';
@@ -109,7 +103,8 @@ class HelloWorldApp extends Component {
export default HelloWorldApp;
```
-
+
+
You can find more examples of class components in [previous versions of this documentation](/versions).
@@ -117,28 +112,24 @@ You can find more examples of class components in [previous versions of this doc
People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so:
-
- Developer Notes
-
-
-
-
-
-
+
-
+
> Web developers may be familiar with this concept.
-
+
+
> Android developers may be familiar with this concept.
-
+
+
> iOS developers may be familiar with this concept.
-
+
+
## Formatting
diff --git a/docs/keyboard.md b/docs/keyboard.md
index fabf73b2130..ce4d2abd2f1 100644
--- a/docs/keyboard.md
+++ b/docs/keyboard.md
@@ -3,24 +3,16 @@ id: keyboard
title: Keyboard
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
`Keyboard` module to control keyboard events.
### Usage
The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=Keyboard%20Function%20Component%20Example
@@ -64,7 +56,8 @@ const s = StyleSheet.create({
export default Example;
```
-
+
+
```SnackPlayer name=Keyboard%20Class%20Component%20Example
import React, {Component} from 'react';
@@ -113,7 +106,8 @@ const s = StyleSheet.create({
export default Example;
```
-
+
+
---
diff --git a/docs/layoutanimation.md b/docs/layoutanimation.md
index 02f90e23b0b..fa23a811fb7 100644
--- a/docs/layoutanimation.md
+++ b/docs/layoutanimation.md
@@ -3,6 +3,8 @@ id: layoutanimation
title: LayoutAnimation
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
Automatically animates views to their new positions when the next layout happens.
A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components.
@@ -68,8 +70,6 @@ const style = StyleSheet.create({
export default App;
```
-
-
---
# Reference
@@ -119,18 +119,8 @@ Helper that creates an object (with `create`, `update`, and `delete` fields) to
Example usage:
-
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+
Projects with Native Code Only
The following section only applies to projects with native code exposed. If you are using the managed expo-cli workflow, see the guide on Linking in the Expo documentation for the appropriate alternative.
@@ -35,18 +37,8 @@ As mentioned in the introduction, there are some URL schemes for core functional
If you want to enable deep links in your app, please read the below guide:
-
-
-
- Android
-
-
- iOS
-
-
-
-
-
+
+
> For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
@@ -58,7 +50,8 @@ If you wish to receive the intent in an existing instance of MainActivity, you m
android:launchMode="singleTask">
```
-
+
+
> **NOTE:** On iOS, you'll need to link `RCTLinking` to your project by following the steps described [here](linking-libraries-ios.md#manual-linking). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:
@@ -100,7 +93,8 @@ If your app is using [Universal Links](https://developer.apple.com/library/prere
}
```
-
+
+
### Handling Deep Links
diff --git a/docs/modal.md b/docs/modal.md
index fd79613eefd..2ebcba05ae1 100644
--- a/docs/modal.md
+++ b/docs/modal.md
@@ -3,22 +3,14 @@ id: modal
title: Modal
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
The Modal component is a basic way to present content above an enclosing view.
## Example
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=Modal&supportedPlatforms=android,ios
import React, { useState } from "react";
@@ -114,7 +106,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
```SnackPlayer name=Modal&supportedPlatforms=android,ios
import React, { Component } from "react";
@@ -220,7 +213,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
---
diff --git a/docs/native-components-ios.md b/docs/native-components-ios.md
index 470c05edfa6..db49f101af2 100644
--- a/docs/native-components-ios.md
+++ b/docs/native-components-ios.md
@@ -274,7 +274,7 @@ Until now we've only returned a `MKMapView` instance from our manager's `-(UIVie
Note that all `RCTBubblingEventBlock` must be prefixed with `on`. Next, declare an event handler property on `RNTMapManager`, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view.
-```objectivec{9,17,31-48}
+```objectivec {9,17,31-48}
// RNTMapManager.m
#import
diff --git a/docs/native-modules-setup.md b/docs/native-modules-setup.md
index adf3e1ae384..501d4ecf598 100644
--- a/docs/native-modules-setup.md
+++ b/docs/native-modules-setup.md
@@ -7,19 +7,19 @@ Native modules are usually distributed as npm packages, except that on top of th
To get set up with the basic project structure for a native module we will use the community tool called [Bob](https://github.com/react-native-community/bob). You can go ahead further and dive deep into how that library works, but for our needs we will only execute the basic `create` script:
-```sh
+```shell
npx @react-native-community/bob create react-native-awesome-module
```
Where `react-native-awesome-module` is the name you would like for the new module. After doing this you will navigate into `react-native-awesome-module` folder and bootstrap the example project by running:
-```sh
+```shell
yarn bootstrap
```
When the bootstrap is done, you will be able to start the example app by executing one of the following commands:
-```sh
+```shell
# Android app
yarn example android
# iOS app
diff --git a/docs/navigation.md b/docs/navigation.md
index 8b3b2f9184c..8655f501c24 100644
--- a/docs/navigation.md
+++ b/docs/navigation.md
@@ -17,7 +17,7 @@ The community solution to navigation is a standalone library that allows develop
First, you need to install them in your project:
-```sh
+```shell
npm install @react-navigation/native @react-navigation/stack
```
@@ -25,19 +25,19 @@ Next, install the required peer dependencies. You need to run different commands
- If you have an Expo managed project, install the dependencies with `expo`:
- ```sh
+ ```shell
expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
```
- If you have a bare React Native project, install the dependencies with `npm`:
- ```sh
+ ```shell
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
```
For iOS with bare React Native project, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then install the pods to complete the installation:
- ```sh
+ ```shell
cd ios
pod install
cd ..
diff --git a/docs/network.md b/docs/network.md
index 8cb6485cf27..568e3cff09e 100644
--- a/docs/network.md
+++ b/docs/network.md
@@ -3,6 +3,8 @@ id: network
title: Networking
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
## Using Fetch
@@ -72,18 +74,8 @@ const getMoviesFromApiAsync = async () => {
Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=Fetch%20Example
import React, { useEffect, useState } from 'react';
@@ -117,7 +109,8 @@ export default App = () => {
};
```
-
+
+
```SnackPlayer name=Fetch%20Example
import React, { Component } from 'react';
@@ -165,7 +158,8 @@ export default class App extends Component {
};
```
-
+
+
> By default, iOS will block any request that's not encrypted using [SSL](https://hosting.review/web-hosting-glossary/#12). If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an App Transport Security exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](integration-with-existing-apps.md#app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
diff --git a/docs/panresponder.md b/docs/panresponder.md
index 52a4b2b1c1f..0a1843b29fe 100644
--- a/docs/panresponder.md
+++ b/docs/panresponder.md
@@ -3,6 +3,8 @@ id: panresponder
title: PanResponder
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
By default, `PanResponder` holds an `InteractionManager` handle to block long-running JS events from interrupting active gestures.
@@ -78,18 +80,8 @@ const ExampleComponent = () => {
`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
-
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+
Project with Native Code Required
The following section only applies to projects with native code exposed. If you are using the managed expo-cli workflow, see the guide on Permissions in the Expo documentation for the appropriate alternative.
@@ -18,18 +20,8 @@ If a user has previously turned off a permission that you prompt for, the OS wil
### Example
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android
import React from "react";
@@ -86,7 +78,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android
import React, { Component } from "react";
@@ -147,7 +140,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
### Permissions that require prompting the user
@@ -159,7 +153,6 @@ Available as constants under `PermissionsAndroid.PERMISSIONS`:
- `READ_CONTACTS`: 'android.permission.READ_CONTACTS'
- `WRITE_CONTACTS`: 'android.permission.WRITE_CONTACTS'
- `GET_ACCOUNTS`: 'android.permission.GET_ACCOUNTS'
-- `ACCESS_BACKGROUND_LOCATION`: 'android.permission.ACCESS_BACKGROUND_LOCATION`
- `ACCESS_FINE_LOCATION`: 'android.permission.ACCESS_FINE_LOCATION'
- `ACCESS_COARSE_LOCATION`: 'android.permission.ACCESS_COARSE_LOCATION'
- `RECORD_AUDIO`: 'android.permission.RECORD_AUDIO'
diff --git a/docs/picker.md b/docs/picker.md
index 67df9bf4163..ffe72b9a847 100644
--- a/docs/picker.md
+++ b/docs/picker.md
@@ -1,6 +1,6 @@
---
id: picker
-title: 🚧 Picker
+title: '🚧 Picker'
---
> **Deprecated.** Use [@react-native-community/picker](https://github.com/react-native-community/react-native-picker) instead.
diff --git a/docs/pickerios.md b/docs/pickerios.md
index 5d603e2b866..a18ad1e1085 100644
--- a/docs/pickerios.md
+++ b/docs/pickerios.md
@@ -1,6 +1,6 @@
---
id: pickerios
-title: 🚧 PickerIOS
+title: '🚧 PickerIOS'
---
> **Deprecated.** Use [@react-native-community/picker](https://github.com/react-native-community/react-native-picker) instead.
diff --git a/docs/platform-specific-code.md b/docs/platform-specific-code.md
index fe6be855be2..21b8335d937 100644
--- a/docs/platform-specific-code.md
+++ b/docs/platform-specific-code.md
@@ -103,7 +103,7 @@ When your platform-specific code is more complex, you should consider splitting
For example, say you have the following files in your project:
-```sh
+```shell
BigButton.ios.js
BigButton.android.js
```
@@ -122,7 +122,7 @@ You can also use the `.native.js` extension when a module needs to be shared bet
For example, say you have the following files in your project:
-```sh
+```shell
Container.js # picked up by Webpack, Rollup or any other Web bundler
Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro)
```
diff --git a/docs/platformcolor.md b/docs/platformcolor.md
index fd579201407..fcb960ecd1a 100644
--- a/docs/platformcolor.md
+++ b/docs/platformcolor.md
@@ -1,77 +1,77 @@
----
-id: platformcolor
-title: PlatformColor
----
-
-```js
-PlatformColor(color1, [color2, ...colorN]);
-```
-
-You can use the `PlatformColor` function to access native colors on the target platform by supplying the native color’s corresponding string value. You pass a string to the `PlatformColor` function and, provided it exists on that platform, it will return the corresponding native color, which you can apply in any part of your application.
-
-If you pass more than one string value to the `PlatformColor` function, it will treat the first value as the default and the rest as fallback.
-
-```js
-PlatformColor('bogusName', 'linkColor');
-```
-
-Since native colors can be sensitive to themes and/or high contrast, this platform specific logic also translates inside your components.
-
-
- Developer Notes
-
-
-
-
-
-
-
-> If you’re familiar with design systems, another way of thinking about this is that `PlatformColor` lets you tap into the local design system's color tokens so your app can blend right in!
-
-
-
-For a full list of the types of system colors supported, see:
-
-- Android:
- - [R.attr](https://developer.android.com/reference/android/R.attr) - `?attr` prefix
- - [R.color](https://developer.android.com/reference/android/R.color) - `@android:color` prefix
-- [iOS UIColor](https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors)
-
-## Example
-
-```jsx
-import React from 'react';
-import {
- Platform,
- PlatformColor,
- StyleSheet,
- Text,
- View
-} from 'react-native';
-
-export default (App = () => (
-
-
- I am a special label color!
-
-
-));
-
-const styles = StyleSheet.create({
- labelCell: {
- flex: 1,
- alignItems: 'stretch',
- ...Platform.select({
- ios: { color: PlatformColor('label') },
- android: {
- color: PlatformColor('?attr/colorControlNormal')
- },
- default: { color: 'black' }
- })
- }
-});
-```
-
-The string value provided to the `PlatformColor` function must match the string as it exists on the native platform where the app is running. In order to avoid runtime errors, the function should be wrapped in a platform check, either through a `Platform.OS === 'platform'` or a `Platform.Select()`, as shown on the example above.
-
-> **Note:** You can find a complete example that demonstrates proper, intended use of `PlatformColor` in [PlatformColorExample.js](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js).
+---
+id: platformcolor
+title: PlatformColor
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+```js
+PlatformColor(color1, [color2, ...colorN]);
+```
+
+You can use the `PlatformColor` function to access native colors on the target platform by supplying the native color’s corresponding string value. You pass a string to the `PlatformColor` function and, provided it exists on that platform, it will return the corresponding native color, which you can apply in any part of your application.
+
+If you pass more than one string value to the `PlatformColor` function, it will treat the first value as the default and the rest as fallback.
+
+```js
+PlatformColor('bogusName', 'linkColor');
+```
+
+Since native colors can be sensitive to themes and/or high contrast, this platform specific logic also translates inside your components.
+
+#### Developer notes
+
+
+
+
+
+> If you’re familiar with design systems, another way of thinking about this is that `PlatformColor` lets you tap into the local design system's color tokens so your app can blend right in!
+
+
+
+
+For a full list of the types of system colors supported, see:
+
+- Android:
+ - [R.attr](https://developer.android.com/reference/android/R.attr) - `?attr` prefix
+ - [R.color](https://developer.android.com/reference/android/R.color) - `@android:color` prefix
+- [iOS UIColor](https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors)
+
+## Example
+
+```jsx
+import React from 'react';
+import {
+ Platform,
+ PlatformColor,
+ StyleSheet,
+ Text,
+ View
+} from 'react-native';
+
+export default (App = () => (
+
+
+ I am a special label color!
+
+
+));
+
+const styles = StyleSheet.create({
+ labelCell: {
+ flex: 1,
+ alignItems: 'stretch',
+ ...Platform.select({
+ ios: { color: PlatformColor('label') },
+ android: {
+ color: PlatformColor('?attr/colorControlNormal')
+ },
+ default: { color: 'black' }
+ })
+ }
+});
+```
+
+The string value provided to the `PlatformColor` function must match the string as it exists on the native platform where the app is running. In order to avoid runtime errors, the function should be wrapped in a platform check, either through a `Platform.OS === 'platform'` or a `Platform.Select()`, as shown on the example above.
+
+> **Note:** You can find a complete example that demonstrates proper, intended use of `PlatformColor` in [PlatformColorExample.js](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js).
diff --git a/docs/profiling.md b/docs/profiling.md
index 24ef78f3183..c5fe6ca8eed 100644
--- a/docs/profiling.md
+++ b/docs/profiling.md
@@ -23,7 +23,7 @@ The first step for debugging this jank is to answer the fundamental question of
First, connect a device that exhibits the stuttering you want to investigate to your computer via USB and get it to the point right before the navigation/animation you want to profile. Run `systrace` as follows:
-```sh
+```shell
$ /platform-tools/systrace/systrace.py --time=10 -o trace.html sched gfx view -a
```
diff --git a/docs/progressbarandroid.md b/docs/progressbarandroid.md
index 3e444b658b5..b1014f92c60 100644
--- a/docs/progressbarandroid.md
+++ b/docs/progressbarandroid.md
@@ -1,6 +1,6 @@
---
id: progressbarandroid
-title: 🚧 ProgressBarAndroid
+title: '🚧 ProgressBarAndroid'
---
> **Deprecated.** Use [@react-native-community/progress-bar-android](https://github.com/react-native-community/progress-bar-android) instead.
diff --git a/docs/progressviewios.md b/docs/progressviewios.md
index 20114f3a01b..39274a1b021 100644
--- a/docs/progressviewios.md
+++ b/docs/progressviewios.md
@@ -1,6 +1,6 @@
---
id: progressviewios
-title: 🚧 ProgressViewIOS
+title: '🚧 ProgressViewIOS'
---
> **Deprecated.** Use [@react-native-community/progress-view](https://github.com/react-native-community/progress-view) instead.
diff --git a/docs/publishing-to-app-store.md b/docs/publishing-to-app-store.md
index 93e3ed221f7..068a0e8e515 100644
--- a/docs/publishing-to-app-store.md
+++ b/docs/publishing-to-app-store.md
@@ -36,7 +36,7 @@ As your App Bundle grows in size, you may start to see a blank screen flash betw
The static bundle is built every time you target a physical device, even in Debug. If you want to save time, turn off bundle generation in Debug by adding the following to your shell script in the Xcode Build Phase `Bundle React Native code and images`:
-```sh
+```shell
if [ "${CONFIGURATION}" == "Debug" ]; then
export SKIP_BUNDLING=true
fi
diff --git a/docs/pushnotificationios.md b/docs/pushnotificationios.md
index 319d52b95ae..ee79b0cd7d1 100644
--- a/docs/pushnotificationios.md
+++ b/docs/pushnotificationios.md
@@ -1,11 +1,11 @@
---
id: pushnotificationios
-title: 🚧 PushNotificationIOS
+title: '🚧 PushNotificationIOS'
---
> **Deprecated.** Use [@react-native-community/push-notification-ios](https://github.com/react-native-community/react-native-push-notification-ios) instead.
-
+
Projects with Native Code Only
The following section only applies to projects with native code exposed. If you are using the managed expo-cli workflow, see the guide on Notifications in the Expo documentation for the appropriate alternative.
diff --git a/docs/running-on-device.md b/docs/running-on-device.md
index 98561a6ae32..dd3c336322a 100644
--- a/docs/running-on-device.md
+++ b/docs/running-on-device.md
@@ -1,73 +1,108 @@
---
id: running-on-device
title: Running On Device
+hide_table_of_contents: true
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
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).
-
-
-
- iOS
-
-
- Android
-
-
-
+
+
-
+## Running your app on Android devices
-
Running your app on iOS devices
+#### Development OS
-
+
+
-
Running your app on Android devices
+[//]: # 'macOS, Android'
-
+### 1. Enable Debugging over USB
-
- Development OS:
-
-
-
-
-
-
+Most Android devices can only install and run apps downloaded from Google Play, by default. You will need to enable USB Debugging on your device in order to install your app during development.
-
+To enable USB debugging on your device, you will first need to enable the "Developer options" menu by going to **Settings** → **About phone** → **Software information** and then tapping the `Build number` row at the bottom seven times. You can then go back to **Settings** → **Developer options** to enable "USB debugging".
-A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [environment setup guide](environment-setup) to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
+### 2. Plug in your device via USB
-
+Let's now set up an Android device to run our React Native projects. Go ahead and plug in your device via USB to your development machine.
-### 1. Plug in your device via USB
+Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running `adb devices`.
-Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the `ios` folder in your project, then open the `.xcodeproj` file, or if you are using CocoaPods open `.xcworkspace`, within it using Xcode.
+```shell
+$ adb devices
+List of devices attached
+emulator-5554 offline # Google emulator
+14ed2fcc device # Physical device
+```
-If this is your first time running an app on your iOS device, you may need to register your device for development. Open the **Product** menu from Xcode's menubar, then go to **Destination**. Look for and select your device from the list. Xcode will then register your device for development.
+Seeing `device` in the right column means the device is connected. You must have **only one device connected** at a time.
-### 2. Configure code signing
+### 3. Run your app
-Register for an [Apple developer account](https://developer.apple.com/) if you don't have one yet.
+Type the following in your command prompt to install and launch your app on the device:
-Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown. Do the same for the tests target (it ends with Tests, and is below your main target).
+```shell
+$ npx react-native run-android
+```
-**Repeat** this step for the **Tests** target in your project.
+> If you get a "bridge configuration isn't available" error, see [Using adb reverse](running-on-device.md#method-1-using-adb-reverse-recommended).
-
+> Hint: You can also use the `React Native CLI` to generate and run a `Release` build (e.g. `npx react-native run-android --variant=release`).
-### 3. Build and Run your app
+
Connecting to the development server
-If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (`⇧⌘2`). You can now press the **Build and run** button (`⌘R`) or select **Run** from the **Product** menu. Your app will launch on your device shortly.
+You can also iterate quickly on a device by connecting to the development server running on your development machine. There are several ways of accomplishing this, depending on whether you have access to a USB cable or a Wi-Fi network.
-
+### Method 1: Using adb reverse (recommended)
-> If you run into any issues, please take a look at Apple's [Launching Your App on a Device](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4) docs.
+You can use this method if your device is running Android 5.0 (Lollipop) or newer, it has USB debugging enabled, and it is connected via USB to your development machine.
+
+Run the following in a command prompt:
+
+```shell
+$ adb -s reverse tcp:8081 tcp:8081
+```
+
+To find the device name, run the following adb command:
+
+```shell
+$ adb devices
+```
+
+You can now enable Live reloading from the [Developer menu](debugging.md#accessing-the-in-app-developer-menu). Your app will reload whenever your JavaScript code has changed.
+
+### Method 2: Connect via Wi-Fi
+
+You can also connect to the development server over Wi-Fi. You'll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You'll need your development machine's current IP address before proceeding.
+
+You can find the IP address in **System Preferences** → **Network**.
+
+
+
+1. Make sure your laptop and your phone are on the **same** Wi-Fi network.
+2. Open your React Native app on your device.
+3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that.
+4. Open the in-app [Developer menu](debugging.md#accessing-the-in-app-developer-menu).
+5. Go to **Dev Settings** → **Debug server host & port for device**.
+6. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
+7. Go back to the **Developer menu** and select **Reload JS**.
+
+You can now enable Live reloading from the [Developer menu](debugging.md#accessing-the-in-app-developer-menu). Your app will reload whenever your JavaScript code has changed.
-
+## Building your app for production
+
+You have built a great app using React Native, and you are now itching to release it in the Play Store. The process is the same as any other native Android app, with some additional considerations to take into account. Follow the guide for [generating a signed APK](signed-apk-android.md) to learn more.
+
+
+
+
+[//]: # 'Windows, Android'
### 1. Enable Debugging over USB
@@ -79,7 +114,87 @@ To enable USB debugging on your device, you will first need to enable the "Devel
Let's now set up an Android device to run our React Native projects. Go ahead and plug in your device via USB to your development machine.
-
+Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running `adb devices`.
+
+```shell
+$ adb devices
+List of devices attached
+emulator-5554 offline # Google emulator
+14ed2fcc device # Physical device
+```
+
+Seeing `device` in the right column means the device is connected. You must have **only one device connected** at a time.
+
+### 3. Run your app
+
+Type the following in your command prompt to install and launch your app on the device:
+
+```shell
+$ npx react-native run-android
+```
+
+> If you get a "bridge configuration isn't available" error, see [Using adb reverse](running-on-device.md#method-1-using-adb-reverse-recommended).
+
+> Hint: You can also use the `React Native CLI` to generate and run a `Release` build (e.g. `npx react-native run-android --variant=release`).
+
+
Connecting to the development server
+
+You can also iterate quickly on a device by connecting to the development server running on your development machine. There are several ways of accomplishing this, depending on whether you have access to a USB cable or a Wi-Fi network.
+
+### Method 1: Using adb reverse (recommended)
+
+You can use this method if your device is running Android 5.0 (Lollipop) or newer, it has USB debugging enabled, and it is connected via USB to your development machine.
+
+Run the following in a command prompt:
+
+```shell
+$ adb -s reverse tcp:8081 tcp:8081
+```
+
+To find the device name, run the following adb command:
+
+```shell
+$ adb devices
+```
+
+You can now enable Live reloading from the [Developer menu](debugging.md#accessing-the-in-app-developer-menu). Your app will reload whenever your JavaScript code has changed.
+
+### Method 2: Connect via Wi-Fi
+
+You can also connect to the development server over Wi-Fi. You'll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You'll need your development machine's current IP address before proceeding.
+
+Open the command prompt and type `ipconfig` to find your machine's IP address ([more info](http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information)).
+
+
+
+1. Make sure your laptop and your phone are on the **same** Wi-Fi network.
+2. Open your React Native app on your device.
+3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that.
+4. Open the in-app [Developer menu](debugging.md#accessing-the-in-app-developer-menu).
+5. Go to **Dev Settings** → **Debug server host & port for device**.
+6. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
+7. Go back to the **Developer menu** and select **Reload JS**.
+
+You can now enable Live reloading from the [Developer menu](debugging.md#accessing-the-in-app-developer-menu). Your app will reload whenever your JavaScript code has changed.
+
+## Building your app for production
+
+You have built a great app using React Native, and you are now itching to release it in the Play Store. The process is the same as any other native Android app, with some additional considerations to take into account. Follow the guide for [generating a signed APK](signed-apk-android.md) to learn more.
+
+
+
+
+[//]: # 'Linux, Android'
+
+### 1. Enable Debugging over USB
+
+Most Android devices can only install and run apps downloaded from Google Play, by default. You will need to enable USB Debugging on your device in order to install your app during development.
+
+To enable USB debugging on your device, you will first need to enable the "Developer options" menu by going to **Settings** → **About phone** → **Software information** and then tapping the `Build number` row at the bottom seven times. You can then go back to **Settings** → **Developer options** to enable "USB debugging".
+
+### 2. Plug in your device via USB
+
+Let's now set up an Android device to run our React Native projects. Go ahead and plug in your device via USB to your development machine.
Next, check the manufacturer code by using `lsusb` (on mac, you must first [install lsusb](https://github.com/jlhonora/lsusb)). `lsusb` should output something like this:
@@ -120,17 +235,15 @@ In this case, it's `22b8`. That's the identifier for Motorola.
You'll need to input this into your udev rules in order to get up and running:
-```sh
+```shell
echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules
```
Make sure that you replace `22b8` with the identifier you get in the above command.
-
-
Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running `adb devices`.
-```sh
+```shell
$ adb devices
List of devices attached
emulator-5554 offline # Google emulator
@@ -143,19 +256,96 @@ Seeing `device` in the right column means the device is connected. You must have
Type the following in your command prompt to install and launch your app on the device:
-```sh
+```shell
$ npx react-native run-android
```
> If you get a "bridge configuration isn't available" error, see [Using adb reverse](running-on-device.md#method-1-using-adb-reverse-recommended).
-> Hint
->
-> You can also use the `React Native CLI` to generate and run a `Release` build (e.g. `npx react-native run-android --variant=release`).
+> Hint: You can also use the `React Native CLI` to generate and run a `Release` build (e.g. `npx react-native run-android --variant=release`).
+
+
Connecting to the development server
+
+You can also iterate quickly on a device by connecting to the development server running on your development machine. There are several ways of accomplishing this, depending on whether you have access to a USB cable or a Wi-Fi network.
-
+### Method 1: Using adb reverse (recommended)
+
+You can use this method if your device is running Android 5.0 (Lollipop) or newer, it has USB debugging enabled, and it is connected via USB to your development machine.
+
+Run the following in a command prompt:
+
+```shell
+$ adb -s reverse tcp:8081 tcp:8081
+```
+
+To find the device name, run the following adb command:
+
+```shell
+$ adb devices
+```
+
+You can now enable Live reloading from the [Developer menu](debugging.md#accessing-the-in-app-developer-menu). Your app will reload whenever your JavaScript code has changed.
+
+### Method 2: Connect via Wi-Fi
-
+You can also connect to the development server over Wi-Fi. You'll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You'll need your development machine's current IP address before proceeding.
+
+Open a terminal and type `/sbin/ifconfig` to find your machine's IP address.
+
+
+
+1. Make sure your laptop and your phone are on the **same** Wi-Fi network.
+2. Open your React Native app on your device.
+3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that.
+4. Open the in-app [Developer menu](debugging.md#accessing-the-in-app-developer-menu).
+5. Go to **Dev Settings** → **Debug server host & port for device**.
+6. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
+7. Go back to the **Developer menu** and select **Reload JS**.
+
+You can now enable Live reloading from the [Developer menu](debugging.md#accessing-the-in-app-developer-menu). Your app will reload whenever your JavaScript code has changed.
+
+## Building your app for production
+
+You have built a great app using React Native, and you are now itching to release it in the Play Store. The process is the same as any other native Android app, with some additional considerations to take into account. Follow the guide for [generating a signed APK](signed-apk-android.md) to learn more.
+
+
+
+
+
+
+
+## Running your app on iOS devices
+
+#### Development OS
+
+
+
+
+[//]: # 'macOS, iOS'
+
+### 1. Plug in your device via USB
+
+Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the `ios` folder in your project, then open the `.xcodeproj` file, or if you are using CocoaPods open `.xcworkspace`, within it using Xcode.
+
+If this is your first time running an app on your iOS device, you may need to register your device for development. Open the **Product** menu from Xcode's menubar, then go to **Destination**. Look for and select your device from the list. Xcode will then register your device for development.
+
+### 2. Configure code signing
+
+Register for an [Apple developer account](https://developer.apple.com/) if you don't have one yet.
+
+Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown. Do the same for the tests target (it ends with Tests, and is below your main target).
+
+**Repeat** this step for the **Tests** target in your project.
+
+
+
+### 3. Build and Run your app
+
+If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (`⇧⌘2`). You can now press the **Build and run** button (`⌘R`) or select **Run** from the **Product** menu. Your app will launch on your device shortly.
+
+
+
+> If you run into any issues, please take a look at Apple's [Launching Your App on a Device](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4) docs.
Connecting to the development server
@@ -169,7 +359,7 @@ You can also iterate quickly on a device using the development server. You only
When trying to connect to the development server you might get a [red screen with an error](debugging.md#in-app-errors-and-warnings) saying:
-> Connection to [http://localhost:8081/debugger-proxy?role=client]() timed out. Are you running node proxy? If you are running on the device, check if you have the right IP address in `RCTWebSocketExecutor.m`.
+> Connection to `http://localhost:8081/debugger-proxy?role=client` timed out. Are you running node proxy? If you are running on the device, check if you have the right IP address in `RCTWebSocketExecutor.m`.
To solve this issue check the following points.
@@ -202,72 +392,26 @@ To still use xip.io behind your router:
- configure your phone to use Google DNS (8.8.8.8)
- disable the appropriate security feature in your router
-
-
-
Connecting to the development server
-
-You can also iterate quickly on a device by connecting to the development server running on your development machine. There are several ways of accomplishing this, depending on whether you have access to a USB cable or a Wi-Fi network.
-
-### Method 1: Using adb reverse (recommended)
-
-
-
-You can use this method if your device is running Android 5.0 (Lollipop) or newer, it has USB debugging enabled, and it is connected via USB to your development machine.
-
-
-
-Run the following in a command prompt:
-
-```sh
-$ adb -s reverse tcp:8081 tcp:8081
-```
-
-To find the device name, run the following adb command:
-
-```sh
-$ adb devices
-```
-
-You can now enable Live reloading from the [Developer menu](debugging.md#accessing-the-in-app-developer-menu). Your app will reload whenever your JavaScript code has changed.
-
-### Method 2: Connect via Wi-Fi
-
-You can also connect to the development server over Wi-Fi. You'll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You'll need your development machine's current IP address before proceeding.
-
-
-
-You can find the IP address in **System Preferences** → **Network**.
-
-
-
-Open the command prompt and type `ipconfig` to find your machine's IP address ([more info](http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information)).
+## Building your app for production
-
-
-Open a terminal and type `/sbin/ifconfig` to find your machine's IP address.
-
-
-
-
+You have built a great app using React Native, and you are now itching to release it in the App Store. The process is the same as any other native iOS app, with some additional considerations to take into account. Follow the guide for [publishing to the Apple App Store](publishing-to-app-store.md) to learn more.
-1. Make sure your laptop and your phone are on the **same** Wi-Fi network.
-2. Open your React Native app on your device.
-3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that.
-4. Open the in-app [Developer menu](debugging.md#accessing-the-in-app-developer-menu).
-5. Go to **Dev Settings** → **Debug server host & port for device**.
-6. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
-7. Go back to the **Developer menu** and select **Reload JS**.
+
+
-You can now enable Live reloading from the [Developer menu](debugging.md#accessing-the-in-app-developer-menu). Your app will reload whenever your JavaScript code has changed.
+[//]: # 'Windows, iOS'
-
+> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [environment setup guide](environment-setup) to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
-
Building your app for production
+
+
-You have built a great app using React Native, and you are now itching to release it in the App Store. The process is the same as any other native iOS app, with some additional considerations to take into account. Follow the guide for [publishing to the Apple App Store](publishing-to-app-store.md) to learn more.
+[//]: # 'Linux, iOS'
-
+> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [environment setup guide](environment-setup) to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
-
Building your app for production
+
+
-You have built a great app using React Native, and you are now itching to release it in the Play Store. The process is the same as any other native Android app, with some additional considerations to take into account. Follow the guide for [generating a signed APK](signed-apk-android.md) to learn more.
+
+
diff --git a/docs/sectionlist.md b/docs/sectionlist.md
index 872fe6bc464..bc0b20bac3b 100644
--- a/docs/sectionlist.md
+++ b/docs/sectionlist.md
@@ -3,6 +3,8 @@ id: sectionlist
title: SectionList
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
A performant interface for rendering sectioned lists, supporting the most handy features:
- Fully cross-platform.
@@ -20,18 +22,8 @@ If you don't need section support and want a simpler interface, use [`
## Example
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=SectionList%20Example
import React from "react";
@@ -105,7 +97,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
```SnackPlayer name=SectionList%20Example
import React, { Component } from "react";
@@ -183,7 +176,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
This is a convenience wrapper around [``](virtualizedlist.md), and thus inherits its props (as well as those of [``](scrollview.md) that aren't explicitly listed here, along with the following caveats:
diff --git a/docs/security.md b/docs/security.md
index 576e357c0f0..873765e1bfa 100644
--- a/docs/security.md
+++ b/docs/security.md
@@ -3,9 +3,11 @@ id: security
title: Security
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
Security is often overlooked when building apps. It is true that it is impossible to build software that is completely impenetrable—we’ve yet to invent a completely impenetrable lock (bank vaults do, after all, still get broken into). However, the probability of falling victim to a malicious attack or being exposed for a security vulnerability is inversely proportional to the effort you’re willing to put in to protecting your application against any such eventuality. Although an ordinary padlock is pickable, it is still much harder to get past than a cabinet hook!
-
+
In this guide, you will learn about best practices for storing sensitive information, authentication, network security, and tools that will help you secure your app. This is not a preflight checklist—it is a catalogue of options, each of which will help further protect your app and users.
@@ -30,18 +32,16 @@ If you must have an API key or a secret to access some resource from your app, t
| Persisting GraphQL state | |
| Storing global app-wide variables | |
-
- Developer Notes
-
-
-
-
+#### Developer Notes
+
+
-
+
> Async Storage is the React Native equivalent of Local Storage from the web
-
+
+
### Secure Storage
@@ -70,7 +70,7 @@ In order to use iOS Keychain services or Android Secure Shared Preferences, you
## Authentication and Deep Linking
-
+
Mobile apps have a unique vulnerability that is non-existent in the web: **deep linking**. Deep linking is a way of sending data directly to a native application from an outside source. A deep link looks like `app://` where `app` is your app scheme and anything following the // could be used internally to handle the request.
diff --git a/docs/segmentedcontrolios.md b/docs/segmentedcontrolios.md
index 0d9aa116063..8d8597423d5 100644
--- a/docs/segmentedcontrolios.md
+++ b/docs/segmentedcontrolios.md
@@ -1,6 +1,6 @@
---
id: segmentedcontrolios
-title: 🚧 SegmentedControlIOS
+title: '🚧 SegmentedControlIOS'
---
> **Deprecated.** Use [@react-native-community/segmented-control](https://github.com/react-native-community/segmented-control) instead.
diff --git a/docs/share.md b/docs/share.md
index 235c8a4f0ac..14645bbcc90 100644
--- a/docs/share.md
+++ b/docs/share.md
@@ -3,20 +3,12 @@ id: share
title: Share
---
-## Example
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
+## Example
-
+
+
```SnackPlayer name=Function%20Component%20Example&supportedPlatforms=ios,android
import React from 'react';
@@ -52,7 +44,8 @@ const ShareExample = () => {
export default ShareExample;
```
-
+
+
```SnackPlayer name=Class%20Component%20Example&supportedPlatforms=ios,android
import React, { Component } from 'react';
@@ -92,7 +85,8 @@ class ShareExample extends Component {
export default ShareExample;
```
-
+
+
# Reference
diff --git a/docs/signed-apk-android.md b/docs/signed-apk-android.md
index fe6a059e86c..e78f6ad0a35 100644
--- a/docs/signed-apk-android.md
+++ b/docs/signed-apk-android.md
@@ -9,7 +9,7 @@ Android requires that all apps be digitally signed with a certificate before the
You can generate a private signing key using `keytool`. On Windows `keytool` must be run from `C:\Program Files\Java\jdkx.x.x_x\bin`.
- $ keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
+ $ keytool -genkeypair -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
This command prompts you for passwords for the keystore and key and for the Distinguished Name fields for your key. It then generates the keystore as a file called `my-upload-key.keystore`.
@@ -78,7 +78,7 @@ android {
Run the following in a terminal:
-```sh
+```shell
$ cd android
$ ./gradlew bundleRelease
```
@@ -95,7 +95,7 @@ _Note: In order for Google Play to accept AAB format the App Signing by Google P
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using the following command in the project root:
-```sh
+```shell
$ npx react-native run-android --variant=release
```
diff --git a/docs/slider.md b/docs/slider.md
index 80b40435bfe..68336d72812 100644
--- a/docs/slider.md
+++ b/docs/slider.md
@@ -1,6 +1,6 @@
---
id: slider
-title: 🚧 Slider
+title: '🚧 Slider'
---
> **Deprecated.** Use [@react-native-community/slider](https://github.com/react-native-community/react-native-slider) instead.
diff --git a/docs/statusbarios.md b/docs/statusbarios.md
index ae1289efaba..c2dd2d7702e 100644
--- a/docs/statusbarios.md
+++ b/docs/statusbarios.md
@@ -1,6 +1,6 @@
---
id: statusbarios
-title: 🚧 StatusBarIOS
+title: '🚧 StatusBarIOS'
---
> **Deprecated.** Use [`StatusBar`](statusbar.md) for mutating the status bar.
diff --git a/docs/symbolication.md b/docs/symbolication.md
index f182d68193e..01e470a87e6 100644
--- a/docs/symbolication.md
+++ b/docs/symbolication.md
@@ -5,7 +5,7 @@ title: Symbolicating a stack trace
If a React Native app throws an unhandled exception in a release build, the output may be obfuscated and hard to read:
-```sh
+```shell
07-15 10:58:25.820 18979 18998 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
07-15 10:58:25.820 18979 18998 E AndroidRuntime: Process: com.awesomeproject, PID: 18979 07-15 10:58:25.820 18979 18998 E AndroidRuntime: com.facebook.react.common.JavascriptException: Failed, js engine: hermes, stack:
07-15 10:58:25.820 18979 18998 E AndroidRuntime: p@1:132161
@@ -20,13 +20,13 @@ The sections like `p@1:132161` are minified function names and bytecode offsets.
From a file containing the stacktrace:
-```sh
+```shell
npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map < stacktrace.txt
```
From `adb logcat`directly:
-```sh
+```shell
adb logcat -d | npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map
```
diff --git a/docs/systrace.md b/docs/systrace.md
index ea2fad0c0d4..f775766dd6a 100644
--- a/docs/systrace.md
+++ b/docs/systrace.md
@@ -3,24 +3,16 @@ id: systrace
title: Systrace
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
`Systrace` is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize.
## Example
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=Systrace%20Function%20Component%20Example
import React from "react";
@@ -70,7 +62,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
```SnackPlayer name=Systrace%20Class%20Component%20Example
import React, { Component } from "react";
@@ -122,7 +115,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
---
diff --git a/docs/text.md b/docs/text.md
index 8286d814dfd..f7f1b5d3e95 100644
--- a/docs/text.md
+++ b/docs/text.md
@@ -3,24 +3,16 @@ id: text
title: Text
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
A React component for displaying text.
`Text` supports nesting, styling, and touch handling.
In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=Text%20Functional%20Component%20Example
import React, { useState } from "react";
@@ -60,7 +52,8 @@ export default TextInANest;
```
-
+
+
```SnackPlayer name=Text%20Class%20Component%20Example
import React, { Component } from "react";
@@ -102,7 +95,8 @@ const styles = StyleSheet.create({
export default TextInANest;
```
-
+
+
## Nested text
diff --git a/docs/timepickerandroid.md b/docs/timepickerandroid.md
index 57755621227..dd82974a085 100644
--- a/docs/timepickerandroid.md
+++ b/docs/timepickerandroid.md
@@ -1,6 +1,6 @@
---
id: timepickerandroid
-title: 🚧 TimePickerAndroid
+title: '🚧 TimePickerAndroid'
---
> **Deprecated.** Use [@react-native-community/datetimepicker](https://github.com/react-native-community/react-native-datetimepicker) instead.
diff --git a/docs/touchablehighlight.md b/docs/touchablehighlight.md
index 0092108b20c..a3bd7bf3116 100644
--- a/docs/touchablehighlight.md
+++ b/docs/touchablehighlight.md
@@ -3,6 +3,8 @@ id: touchablehighlight
title: TouchableHighlight
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
@@ -30,18 +32,8 @@ function MyComponent(props) {
## Example
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=TouchableHighlight%20Function%20Component%20Example
import React, { useState } from "react";
@@ -90,7 +82,8 @@ const styles = StyleSheet.create({
export default TouchableHighlightExample;
```
-
+
+
```SnackPlayer name=TouchableHighlight%20Class%20Component%20Example
import React, { Component } from "react";
@@ -149,7 +142,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
---
diff --git a/docs/touchableopacity.md b/docs/touchableopacity.md
index ce8fd825927..23664bdbb15 100644
--- a/docs/touchableopacity.md
+++ b/docs/touchableopacity.md
@@ -3,6 +3,8 @@ id: touchableopacity
title: TouchableOpacity
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
@@ -11,18 +13,8 @@ Opacity is controlled by wrapping the children in an `Animated.View`, which is a
## Example
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=TouchableOpacity%20Function%20Component%20Example
import React, { useState } from "react";
@@ -67,7 +59,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
```SnackPlayer name=TouchableOpacity%20Class%20Component%20Example
import React, { Component } from "react";
@@ -123,7 +116,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
---
diff --git a/docs/transforms.md b/docs/transforms.md
index 3f272ab99f7..9397ae3c61b 100644
--- a/docs/transforms.md
+++ b/docs/transforms.md
@@ -3,22 +3,14 @@ id: transforms
title: Transforms
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
## Example
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
-
-
+
+
```SnackPlayer name=Transforms
import React from "react";
@@ -140,7 +132,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
```SnackPlayer name=Transforms
import React, { Component } from "react";
@@ -266,7 +259,8 @@ const styles = StyleSheet.create({
export default App;
```
-
+
+
---
diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
index 7600fa35e0c..34d78f18656 100644
--- a/docs/troubleshooting.md
+++ b/docs/troubleshooting.md
@@ -13,13 +13,13 @@ The [Metro bundler][metro] runs on port 8081. If another process is already usin
Run the following command to find the id for the process that is listening on port 8081:
-```sh
+```shell
$ sudo lsof -i :8081
```
Then run the following to terminate the process:
-```sh
+```shell
$ kill -9
```
@@ -29,7 +29,7 @@ On Windows you can find the process using port 8081 using [Resource Monitor](htt
You can configure the bundler to use a port other than 8081 by using the `port` parameter:
-```sh
+```shell
$ npx react-native start --port=8088
```
diff --git a/docs/tutorial.md b/docs/tutorial.md
index 4f7f7b4493d..77cf62181dc 100644
--- a/docs/tutorial.md
+++ b/docs/tutorial.md
@@ -108,7 +108,7 @@ In a React component, the props are the variables that we pass from a parent com
#### Are there differences between React and React Native to handle the state?
-
+
```jsx
// ReactJS Counter Example using Hooks!
diff --git a/docs/typescript.md b/docs/typescript.md
index 229dae4fa63..343cd3d2bcb 100644
--- a/docs/typescript.md
+++ b/docs/typescript.md
@@ -3,13 +3,17 @@ id: typescript
title: Using TypeScript
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
[TypeScript][ts] is a language which extends JavaScript by adding type definitions, much like [Flow][flow]. While React Native is built in Flow, it supports both TypeScript _and_ Flow by default.
## Getting Started with TypeScript
-If you're starting a new project, there are a few different ways to get started. You can use the [TypeScript template][ts-template]:
+If you're starting a new project, there are a few different ways to get started.
+
+You can use the [TypeScript template][ts-template]:
-```sh
+```shell
npx react-native init MyApp --template react-native-template-typescript
```
@@ -21,28 +25,67 @@ npx react-native init MyApp --template react-native-template-typescript
You can use [Expo][expo] which has two TypeScript templates:
-```sh
+
+
+
+```shell
npm install -g expo-cli
expo init MyTSProject
```
+
+
+
+```shell
+yarn global add expo-cli
+expo init MyTSProject
+```
+
+
+
+
Or you could use [Ignite][ignite], which also has a TypeScript template:
-```sh
+
+
+
+```shell
npm install -g ignite-cli
ignite new MyTSProject
```
+
+
+
+```shell
+yarn global add ignite-cli
+ignite new MyTSProject
+```
+
+
+
+
## Adding TypeScript to an Existing Project
1. Add TypeScript and the types for React Native and Jest to your project.
-```sh
-yarn add --dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer
-# or for npm
-npm install --save-dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer
+
+
+
+```shell
+npm install -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer
+```
+
+
+
+
+```shell
+yarn add -d typescript @types/jest @types/react @types/react-native @types/react-test-renderer
```
+
+
+
2. Add a TypeScript config file. Create a `tsconfig.json` in the root of your project:
```json
@@ -91,8 +134,7 @@ Out of the box, transforming your files to JavaScript works via the same [Babel
You can provide an interface for a React Component's [Props][props] and [State][state] via `React.Component` which will provide type-checking and editor auto-completing when working with that component in JSX.
-```tsx
-// components/Hello.tsx
+```tsx title="components/Hello.tsx"
import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
@@ -119,7 +161,6 @@ const Hello: React.FC = (props) => {
Hello{' '}
{props.name + getExclamationMarks(enthusiasmLevel || 0)}
-
-