Add RN Android/iOS docs

Summary:
I trimmed the previous versions of this down a lot to only
focus on what RN developers need to know without duplicating
what we have in the non-RN docs.

Reviewed By: mweststrate

Differential Revision: D20816115

fbshipit-source-id: 9d88a6fb0d49e823194cce647e64b86d61d6229a
This commit is contained in:
Pascal Hartig
2020-04-06 08:24:55 -07:00
committed by Facebook GitHub Bot
parent 988f7442ed
commit 2823307c62
6 changed files with 321 additions and 17 deletions

View File

@@ -4,20 +4,10 @@ title: Set up your React Native App
sidebar_label: React Native
---
<div class="warning">
Starting with React Native 0.62, after generating your project with `react-native init`, the Flipper integration is ready out of the box for debug builds:
This tutorial is for React Native applications using version **0.62.0**, please refer to the following if you are using a different version:
* [Flipper on RN < 0.61.5 tutorial](https://github.com/facebook/flipper/blob/da25241f7fbb06dffd913958559044d758c54fb8/docs/getting-started.md#setup-your-react-native-app)
* [Flipper on RN 0.61.5 - 0.62 tutorial](https://github.com/facebook/flipper/blob/4297b3061f14ceca4d184aa3eebd0731b5bf20f5/docs/getting-started.md#setup-your-react-native-app)
</div>
After generating your project with `npx react-native init`, the Flipper integration is setup out-of-the-box for debug builds:
* For Android, start the Flipper Desktop application, and start your project using `yarn android`. Your application should appear in Flipper.
* For iOS, run `pod install` once in the `ios` directory of your project. After that, run `yarn ios` and start Flipper. Your application should show up in Flipper.
* For Android, start the Flipper Desktop application, and start your project using `yarn android`. Your application will appear in Flipper.
* For iOS, run `pod install` once in the `ios` directory of your project. After that, run `yarn ios` and start Flipper. Your application will show up in Flipper.
By default, the following plugins will be available:
@@ -30,8 +20,16 @@ By default, the following plugins will be available:
* React DevTools
* Metro Logs
Additional plugins might be installed through NPM, please follow the instructions as provided by the plugin authors.
Additional plugins can be installed through the plugin manager.
To create your own plugins and integrate with Flipper using JavaScript, check out our [writing plugins for React Native](tutorial/react-native) tutorial!
To create your own plugins and integrate with Flipper using JavaScript, check out our [writing plugins for React Native](/docs/tutorial/react-native) tutorial!
If you ever need to update the Flipper SDKs used in your project, the versions can be bumped in the `ios/Podfile` and `android/gradle.properties` files of your project.
To update the Flipper SDK in your project, you bump the version in the `ios/Podfile` and `android/gradle.properties` files of your project.
## Manual Setup
If you are not using a default React Native template or cannot use the upgrade tool,
you can find instructions for how to integate Flipper into your projects in these guides:
- [React Native for Android](/docs/getting-started/react-native-android)
- [React Native for iOS](/docs/getting-started/react-native-ios)