React Native App - Automatic Setup
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 theios
directory of your project. After that, runyarn 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 Building a React Native Plugin 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:
- Bump the
FLIPPER_VERSION
variable inandroid/gradle.properties
, for example:FLIPPER_VERSION=0.146.0
. - Run
./gradlew clean
in theandroid
directory.
iOS:
- Call
use_flipper
with a specific version inios/Podfile
, for example:use_flipper!({ 'Flipper' => '0.146.0' })
. - Run
pod install --repo-update
in theios
directory.
- Android
- Bump the
FLIPPER_VERSION
variable inandroid/gradle.properties
, for example:FLIPPER_VERSION=0.146.0
. - Run
./gradlew clean
in theandroid
directory.
- Bump the
- iOS
- Call
use_flipper
with a specific version inios/Podfile
, for example:use_flipper!({ 'Flipper' => '0.146.0' })
. - Run
pod install --repo-update
in theios
directory.
- Call
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: