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

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

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' })
)

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

---

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>

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 } } }
      : {}),
  },
  // ...
};

Comments

[Stefan Wrobel]

Any ideas about Android?

[Davyd NRB]

flipper is disabled by default on Android

[Mavericx]

nope this is not correct.

[Davyd NRB]

• before React 0.73 the Flipper will be include only in debug builds

  • github.com/facebook/react-native/b...

• staring from 0.74

  • Flipper was removed completely

[Mavericx]

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.

[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.

[Davyd NRB]

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

[Christian glacet]

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 } } }
    },
};

And

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

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.

[Davyd NRB]

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

[Christian glacet]

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

[RamR]

this post helped me. thanks