e797be6bd2
Summary: Since react-native 0.69 the use_flipper method has been refactored to a different way to enable flipper within a react-native project. After upgrading to react-native 0.69.0 my Flipper SDK version downgraded to version 0.125.0. I had to find a new way to be able to pass the version as parameter so i can use the latest flipper SDK. As i could not find any documentation about this, I read the source code and had to figure it out myself. Hope to save some time for some people in the future. ## Changelog Updated docs to use latest Flipper SDK Pull Request resolved: https://github.com/facebook/flipper/pull/3970 Test Plan: No tests as it is a documentation change. **Static Docs Preview: flipper** |[Full Site](https://our.intern.facebook.com/intern/staticdocs/eph/D38784983/V2/flipper/)| |**Modified Pages**| |[docs/getting-started/react-native](https://our.intern.facebook.com/intern/staticdocs/eph/D38784983/V2/flipper/docs/getting-started/react-native/)| Reviewed By: passy Differential Revision: D38784983 Pulled By: mweststrate fbshipit-source-id: 98ef423c6812f1fa009d79171fcbd8a9a779ef1c
54 lines
2.3 KiB
Plaintext
54 lines
2.3 KiB
Plaintext
---
|
|
id: react-native
|
|
title: React Native App - Automatic Setup
|
|
sidebar_label: Automatic Setup
|
|
---
|
|
import useBaseUrl from '@docusaurus/useBaseUrl';
|
|
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:
|
|
|
|
* **Android** - start the Flipper Desktop application and start your project using `yarn android`. Your application will appear 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:
|
|
|
|
* Layout Inspector
|
|
* Network
|
|
* Databases
|
|
* Images
|
|
* Shared Preferences
|
|
* Crash Reporter
|
|
* React DevTools
|
|
* Metro Logs
|
|
|
|
Additional plugins can be installed through the Plugin Manager.
|
|
|
|
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
|
|
|
|
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:
|
|
|
|
1. Bump the `FLIPPER_VERSION` variable in `android/gradle.properties`, for example: `FLIPPER_VERSION=0.159.0`.
|
|
2. Run `./gradlew clean` in the `android` directory.
|
|
|
|
iOS:
|
|
|
|
react-native version => 0.69.0
|
|
1. Call `FlipperConfiguration.enabled` with a specific version in `ios/Podfile`, for example: `:flipper_configuration => FlipperConfiguration.enabled(["Debug"], { 'Flipper' => '0.159.0' }),`.
|
|
2. Run `pod install --repo-update` in the `ios` directory.
|
|
|
|
react-native version < 0.69.0
|
|
1. Call `use_flipper` with a specific version in `ios/Podfile`, for example: `use_flipper!({ 'Flipper' => '0.159.0' })`.
|
|
2. Run `pod install --repo-update` in the `ios` directory.
|
|
|
|
## 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 integrate Flipper into your projects in the following guides:
|
|
|
|
* <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>
|