Exclude react-native-flipper when NO_FLIPPER=1 to prevent iOS build fail

[retyui]

Summary

• Flipper issue: Docs: "Opting out from Flipper" and "Disable Flipper on CI builds" in React Native should be updated since the Podfile changed in react-native 0.69.2 flipper#3995 (comment)

iOS build fail with an error:

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

#import <FlipperKit/FlipperConnection.h>

Changelog

[IOS] [FIXED] - Exclude react-native-flipper when NO_FLIPPER=1 to prevent iOS build fail

Test Plan

npx react-native init RN0710RC5 --version 0.71.0-rc.5
cd RN0710RC5
yarn add react-native-flipper
NO_FLIPPER=1 pod install --project-directory=ios
yarn ios # will fail

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,494,152	+0
android	hermes	armeabi-v7a	7,814,754	+0
android	hermes	x86	8,970,070	+0
android	hermes	x86_64	8,828,201	+0
android	jsc	arm64-v8a	9,679,701	+0
android	jsc	armeabi-v7a	8,413,938	+0
android	jsc	x86	9,744,206	+0
android	jsc	x86_64	10,221,566	+0

Base commit: e625616
Branch: main

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: e625616
Branch: main

[pull-bot]

PR build artifact for 4ebba36 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[cipolleschi]

Hi @retyui, thank you for the PR.

Can I ask you to expand on the use case, please?
In the repro, you are adding a library that depends on Flipper (react-native-flipper) and then you are NOT installing Flipper, by passing NO_FLIPPER=1. I think it is correct that the app doesn't build with that setup.

If you need to use react-native-flipper, you have to also install Flipper in your app (the default setup, or, in other words NO_FLIPPER=0).

On a side note, the react-native.config.js is a configuration file specific for each project. It should not be responsibility of React Native to preconfigure it. Every app should be able to add it and customise it as they prefer. We don't want to prefill it with some default values: users may get confused why they need them and/or they may need to change it and React Native should not depend on some specific settings there.

[retyui]

@cipolleschi that's a popular optimization for developers to turn off Flipper on CI to speed up iOS builds,

Previously it was a developer responsibility to add an if CI condition to turn off it

But starting from 0.71.x React Native team added it as core functionality in Podfile, and I think it will be confusion when builds will fail if you define aNO_FLIPPER=1

So, to be more developer friendly we can add a comment about react-native-flipper (that it should be also excluded)
if your thinking that adding a react-native.config.js it is a bad idea

[cipolleschi]

Previously it was a developer responsibility to add an if CI condition to turn off it

But starting from 0.71.x React Native team added it as core functionality in Podfile, and I think it will be confusion when builds will fail if you define a NO_FLIPPER=1

And that's fine, but I if we add a reference to react-native-flipper, we are implicitly "adding a dependency" to that library for everyone. I think that the best solution is to document the NO_FLIPPER flag and suggest people how to handle libraries that depends on Flipper, but not to adding some specific configuration in the framework.

What do you think?

[artyorsh]

I partially agree with proposed solution. But yeah, it should not be in template config as long as there is no react-native-flipper dependency listed in package.json. To follow-up on @cipolleschi, I think it is better to document the proposed solution leaving a comment on where/why would we need it.

The "why" that led me here was a use of flipper react-navigation plugin, which is dependent on react-native-flipper package.

[pull-bot]

PR build artifact for d2bd5e9 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[cipolleschi]

Thanks for updating the PR. I'll proceed importing it and trying to land it.

Meanwhile, I also created this PR on the website: facebook/react-native-website#3503
I think that the Podfile is not a very visible place where we can document this. The website could be more discoverable.

What do you think?

[facebook-github-bot]

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[dmytrorykun]

I agree that having a proposed solution in form of a comment inside Podfile is not very visible, nor helpful. Maybe make it a console message?

[retyui]

We can show warn on pod install when NO_FLIPPER=1 but a react-native-flipper pod was added

  # @react-native-community/cli-platform-ios/native_modules.rb
  packages = config["dependencies"]
  found_pods = []

  if (packages['react-native-flipper'] && ENV["NO_FLIPPER"] == "1") # <- simple check 
    Pod::UI.warn " warning text "
  end

[dmytrorykun]

@retyui Yes, warning is better than a hard error 👍

[retyui]

Ok, then I close this PR and will open PR in @react-native-community/cli, won't it?

[dmytrorykun]

@retyui We can probably also do it here https://github.com/facebook/react-native/blob/main/scripts/react_native_pods.rb#L211

if ReactNativePodsUtils.has_pod(installer, 'react-native-flipper') && ENV["NO_FLIPPER"] == "1"
  Pod::UI.warn " warning text "
end

@cipolleschi What do you think?

[cipolleschi]

I personally don't think that the solution. react-native-flipper is one instance of the problem of a Library that depends on some Flipper pod. If we implement this warning, we can catch react-native-flipper, but devs may use other dependencies that depends on the Flipper pods and still encounter the issue.

I don't think that it is React Native responsibility to handle this problem in code. React Native exposes some dependencies, but we can't control what happens outside them. What we can do is to point users to the proper documentation (e.g.: facebook/react-native-website#3503).

[retyui]

Since react-native-flipper is currently the foundation for community plugins, why not display a caution notice with a link to the documentation page so we can recognize this scenario?

[cipolleschi]

why not display a caution notice with a link to the documentation page

We can do that, but where would you put the caution note? In the website PR there is the explicit example.

What we should actually do is to update the README.md of the react-native-flipper plug-in, explaining how to properly configure it.

[retyui]

What we should actually do is to update the README.md of the react-native-flipper plug-in, explaining how to properly configure it.

I don't believe updating the README.md of react-native-flipper would be helpful.

As usually developers install this modules as dev-tools required ( as that dccs. don't referring to the original Installation sections of react-native-flipper, they just suggest npm i react-native-flipper)

As is typical, developers install this module when certain dev-tools are needed

(because that docs. don't refer to the original "Installation" sections of react-native-flipper; it only recommends npm I react-native-flipper).

See:

---

[cipolleschi]

Thanks for the context. I have to think more about a proper solution, then.

[facebook-github-bot]

@cipolleschi merged this pull request in f47b5b8.