DEV Community

Cover image for Speed up iOS builds by turning off Flipper on CI (complete React Native guide)
Davyd NRB
Davyd NRB

Posted on • Updated on

Speed up iOS builds by turning off Flipper on CI (complete React Native guide)

#reactnative #ios #ci #flipper

The simple way to speed up pod install it's turn off Flipper for CI builds.

1) For old React Native versions 0.68.x and lower edit your ios/Podfile:

# ./ios/Podfile
if !ENV['CI']
  use_flipper!()
end
Enter fullscreen mode Exit fullscreen mode

2) For React Native 0.69.x...0.70.x:

# ./ios/Podfile
use_react_native!(
  :flipper_configuration => ENV['CI'] ?
    FlipperConfiguration.disabled : 
    FlipperConfiguration.enabled,
  # ...
  # Note: you also can pass extra params
  # FlipperConfiguration.enabled(['Debug', 'Staging.Debug'], { 'Flipper': '0.174.0' })
)
Enter fullscreen mode Exit fullscreen mode

3) If you are using modern React Native 0.71.x and higher you can just add one env variable NO_FLIPPER=1 that prevent installing

NO_FLIPPER=1 npx pod-install
# or 
export NO_FLIPPER=1 # you can define globally 
pod install --project-directory=ios
# or short
NO_FLIPPER=1 pod install --project-directory=ios
Enter fullscreen mode Exit fullscreen mode

Troubleshooting

If your iOS build will fail with next error

node_modules/react-native-flipper/ios/FlipperReactNativeJavaScriptPlugin.h:9:9: 'FlipperKit/FlipperConnection.h' file not found

#import <FlipperKit/FlipperConnection.h>
Enter fullscreen mode Exit fullscreen mode

It happens because react-native-flipper package require installed FlipperKit pod but we turn off it on CI.

Solution will be easy, just exclude that module on CI too, you need to edit/add react-native.config.js in the root folder of your project:

// react-native.config.js
module.exports = {
  dependencies: {
    ...(process.env.CI // or `process.env.NO_FLIPPER` for RN@0.71.x and above
      ? { 'react-native-flipper': { platforms: { ios: null } } }
      : {}),
  },
  // ...
};
Enter fullscreen mode Exit fullscreen mode

Top comments (11)

Collapse
 
swrobel profile image
Stefan Wrobel •

Any ideas about Android?

Collapse
 
retyui profile image
Davyd NRB •

flipper is disabled by default on Android

Collapse
 
mavericx profile image
Mavericx •

nope this is not correct.

Thread Thread
 
retyui profile image
Davyd NRB • • Edited
Thread Thread
 
mavericx profile image
Mavericx • • Edited

the reference you gave is of v0.72.

v0.73 check
https://react-native-community.github.io/upgrade-helper/?from=0.72.10&to=0.73.2#:~:text=facebook.react%3Aflipper%2D-,integration,-%22)

v0.74 not released yet but agree without it's going to be removed.

Collapse
 
cglacet profile image
Christian glacet •

How do you pass the NO_FLIPPER to xcode? And will it be propagated correctly (how)? I'm asking because I still get the FlipperKit/FlipperClient.h not found error after adding these lines in react-native.config.js.

Collapse
 
retyui profile image
Davyd NRB •

NO_FLIPPER=1 usually used on CI, locally it's ok to have installed Flipper

Collapse
 
cglacet profile image
Christian glacet • • Edited

It really depends, for example we use react native Firebase which prevents using flipper, even locally. I think its worth describing how to edit .xscheme files to set (or not) the env variable to 1.

In our case we simply disabled flipper without using any configuration because we have no solution yet to make it work in any case. So we simply have:

// react-native.config.js
module.exports = {
    dependencies: {
        { 'react-native-flipper': { platforms: { ios: null } } }
    },
};
Enter fullscreen mode Exit fullscreen mode

And

# ios/Podfile
target 'AppName' do
  use_react_native!(
    :flipper_configuration => flipper_config,
  )
end
Enter fullscreen mode Exit fullscreen mode

Also I think many people don't use CI to build iOS apps because its hard (expensive) to get hands on a machine that can run xcodebuild.

Thread Thread
 
retyui profile image
Davyd NRB •

got it, maybe it will help stackoverflow.com/a/74254208/7456314?

Thread Thread
 
cglacet profile image
Christian glacet •

Maybe, I never tried myself because I ended up removing the option to enable flipper, but I guess it should work.

Collapse
 
raguram90 profile image
RamR •

this post helped me. thanks

View full discussion (11 comments)

Read next

wiseinvoker profile image

A Comprehensive Guide to Converting Your React.js App to React Native

Nick L. -

digitallysavvy profile image

Supercharge Your App with Agora's Chat SDK

Hermes -

harshalranjhani profile image

Expo vs. React Native: Pros, Cons, and Key Differences

Harshal Ranjhani -

junihoj profile image

Enhancing Performance in React: Why You Should Consider useDeferredValue Over Throttling and Debouncing

Eze Onyekachukwu -