Skip to main content

React Native - Manual iOS Setup

note

These details within this page are for people manually adding Flipper to a React Native 0.62+ app. This should only be necessary if you have an existing app that cannot be upgraded with the React Native Upgrade tool.

Dependencies​

React Native 0.63+​

If using React Native 0.63 or later, your ios/Podfile should look like this:

platform :ios, '10.0'

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'your-app-name' do
config = use_native_modules!
use_react_native!(path: config['reactNativePath'])

# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable these next few lines.
use_flipper!({'Flipper' => '0.58.0'}) # should match the version of your Flipper client app
post_install do |installer|
flipper_post_install(installer)
end
end

Install the dependencies by running cd ios && pod install then continue to Initialization.

React Native 0.62​

In version 0.62, the setup includes a bit more code (which was moved to a helper in 0.63). Add all of the code below to your ios/Podfile:

platform :ios, '9.0'

def flipper_pods()
flipperkit_version = '0.269.0' # should match the version of your Flipper client app
pod 'FlipperKit', '~>' + flipperkit_version, :configuration => 'Debug'
pod 'FlipperKit/FlipperKitLayoutPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
pod 'FlipperKit/SKIOSNetworkPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
pod 'FlipperKit/FlipperKitUserDefaultsPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
pod 'FlipperKit/FlipperKitReactPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
end

# Post Install processing for Flipper
def flipper_post_install(installer)
file_name = Dir.glob("*.xcodeproj")[0]
app_project = Xcodeproj::Project.open(file_name)
app_project.native_targets.each do |target|
target.build_configurations.each do |config|
cflags = config.build_settings['OTHER_CFLAGS'] || '$(inherited) '
unless cflags.include? '-DFB_SONARKIT_ENABLED=1'
puts 'Adding -DFB_SONARKIT_ENABLED=1 in OTHER_CFLAGS...'
cflags << '-DFB_SONARKIT_ENABLED=1'
end
config.build_settings['OTHER_CFLAGS'] = cflags
end
app_project.save
end
installer.pods_project.save
end

target 'your-app-name' do
...
# Replace the existing yoga import with the following (adding modular_headers):
pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga', :modular_headers => true
...
use_native_modules!

# For enabling Flipper.
# Note that if you use_framework!, flipper will not work.
# Disable these lines if you are doing use_framework!
flipper_pods()
post_install do |installer|
flipper_post_install(installer)
end
end

Install the dependencies by running cd ios && pod install. You can now import and initialize Flipper in your AppDelegate.

Initialization​

The code below enables the following integrations:

  • Layout Inspector
  • Network
  • Shared Preferences
  • Crash Reporter

React Native 0.68+​

If using React Native 0.68 or later, your AppDelegate should include

...
#import <React/RCTAppSetupUtils.h>

RCTAppSetupUtils takes care of initializing Flipper and the integrations mentioned above.

React Native 0.67​

...
#if DEBUG
#ifdef FB_SONARKIT_ENABLED
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitLayoutPlugin/SKDescriptorMapper.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
#endif
#endif

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[self initializeFlipper:application];
...
}

- (void) initializeFlipper:(UIApplication *)application {
#if DEBUG
#ifdef FB_SONARKIT_ENABLED
FlipperClient *client = [FlipperClient sharedClient];
SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
[client addPlugin: [[FlipperKitLayoutPlugin alloc] initWithRootNode: application withDescriptorMapper: layoutDescriptorMapper]];
[client addPlugin: [[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
[client addPlugin: [FlipperKitReactPlugin new]];
[client addPlugin: [[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
[client start];
#endif
#endif
}

@end

Lastly, open the Flipper desktop app, and run yarn ios in your terminal.

Issues or questions​

If you encounter any issues or have any questions, refer to the Troubleshooting section.

Further Steps​

To create your own plugins and integrate with Flipper using JavaScript, check out our Building a React Native Plugin tutorial!