react-native.mdx (SetUp - React Automatic Setup)

Summary: Restyle of the page, including changes to spelling, grammar, links, and structure (where relevant).

Reviewed By: lblasa

Differential Revision: D36248900

fbshipit-source-id: dfa0d3413741be8223719630675f36adc0acd7b5
This commit is contained in:
Kevin Strider
2022-05-10 01:45:39 -07:00
committed by Facebook GitHub Bot
parent 0ee8f09fe5
commit d9dba25c5e

View File

@@ -1,6 +1,6 @@
--- ---
id: react-native id: react-native
title: Set up your React Native App title: React Native App - Automatic Setup
sidebar_label: Automatic Setup sidebar_label: Automatic Setup
--- ---
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
@@ -8,8 +8,8 @@ import Link from '@docusaurus/Link';
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: 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:
* For Android, start the Flipper Desktop application, and start your project using `yarn android`. Your application will appear in Flipper. * **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. * **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: By default, the following plugins will be available:
@@ -22,13 +22,13 @@ By default, the following plugins will be available:
* React DevTools * React DevTools
* Metro Logs * Metro Logs
Additional plugins can be installed through the plugin manager. Additional plugins can be installed through the Plugin Manager.
To create your own plugins and integrate with Flipper using JavaScript, check out our <Link to={useBaseUrl("/docs/tutorial/react-native")}>writing plugins for React Native</Link> tutorial! To create your own plugins and integrate with Flipper using JavaScript, see the <Link to={useBaseUrl("/docs/tutorial/react-native")}>Building a React Native Plugin</Link> tutorial.
### Using the latest Flipper SDK ### Using the latest Flipper SDK
By default React Native might ship with an outdated Flipper SDK. To make sure you are using the latest version, determine the latest released version of Flipper by running `npm info flipper`. By default, React Native might ship with an outdated Flipper SDK. To make sure you are using the latest version, determine the latest released version of Flipper by running `npm info flipper`.
Android: Android:
@@ -39,11 +39,16 @@ iOS:
1. Call `use_flipper` with a specific version in `ios/Podfile`, for example: `use_flipper!({ 'Flipper' => '0.145.0' })`. 1. Call `use_flipper` with a specific version in `ios/Podfile`, for example: `use_flipper!({ 'Flipper' => '0.145.0' })`.
2. Run `pod install --repo-update` in the `ios` directory. 2. Run `pod install --repo-update` in the `ios` directory.
* Android
1. Bump the `FLIPPER_VERSION` variable in `android/gradle.properties`, for example: `FLIPPER_VERSION=0.144.0`.
2. Run `./gradlew clean` in the `android` directory.
* iOS
1. Call `use_flipper` with a specific version in `ios/Podfile`, for example: `use_flipper!({ 'Flipper' => '0.144.0' })`.
2. Run `pod install --repo-update` in the `ios` directory.
## Manual Setup ## Manual Setup
If you are not using a default React Native template or cannot use the upgrade tool, If you are not using a default React Native template or cannot use the upgrade tool, you can find instructions for how to integrate Flipper into your projects in the following guides:
you can find instructions for how to integrate Flipper into your projects in these guides:
- <a href={useBaseUrl("/docs/getting-started/react-native-android")}>React Native for Android</a> * <a href={useBaseUrl("/docs/getting-started/react-native-android")}>React Native for Android</a>
- <a href={useBaseUrl("/docs/getting-started/react-native-ios")}>React Native for iOS</a> * <a href={useBaseUrl("/docs/getting-started/react-native-ios")}>React Native for iOS</a>