ReactNative App build failing with Flipper error

Question

I have inherited a ReactNative app, that i need to get up and running in dev. I am completely a noob.

I think i am close.

When I run

npm run ios

I get the error

CompileC /Users/me/Library/Developer/Xcode/DerivedData/tpp-cdzrkyfpwzsixefrnjryzmdnucct/Build/Intermediates.noindex/Pods.build/Debug-iphoneos/FlipperKit.build/Objects-normal/arm64/FlipperPlatformWebSocket.o /Users/me/Projects/tpp/ios/Pods/FlipperKit/iOS/FlipperKit/FlipperPlatformWebSocket.mm normal arm64 objective-c++ com.apple.compilers.llvm.clang.1_0.compiler (in target 'FlipperKit' from project 'Pods')

After some googling i have added in the project root the file react-native.config.js with the contents

module.exports = {
  dependencies: {
    ...(process.env.CI // or `process.env.NO_FLIPPER` for [email protected] and above
    ? { 'react-native-flipper': { platforms: { ios: null } } }
    : {}),
},
  project: {
    ios: {},
    android: {},
  },
};

The last thing the article said i needed to do was

You can specify NO_FLIPPER=1 when installing your iOS pods, to instruct React Native not to install Flipper. Typically, the command would look like this:

from the root folder of the react native project

bundle exec pod install --project-directory=ios

This is where i am getting in the weeds.

Where does this command "bundle exec pod install --project-directory=ios" go, since i am running "npm run ios" ??

Answer 1

bundle exec pod install --project-directory=ios

It is similar to cd ios && pod install. It means, you have to run this before npm run ios. You can use this instead. But for above command, you have to run this command from root directory of your project. As you can see in your folder structure there will be ios folder. Here the full explanation of this command:-

bundle exec: This part of the command ensures that the pod command is executed within the context of a Ruby bundle. It's a way to ensure that the correct version of CocoaPods (if specified in the project's Gemfile) is used.

pod install: This is the CocoaPods command that installs the dependencies specified in the Podfile of the project. It resolves dependencies and downloads the necessary libraries.

--project-directory=ios: This flag specifies the directory where the Podfile is located. In this case, it's telling CocoaPods to look for the Podfile in the ios directory. This is useful in projects where the iOS code is organized into a subdirectory, commonly named ios.

Also the error, you are trying to solve. You have to follow these steps:-

Method 1:

Step 1: cd ios
Step 2: pod repo update
Step 3: pod install

move to method 2, if it won't work.

Method 2:

Step 1: If you are using a react-native-flipper your iOS build will fail when NO_FLIPPER=1 is set. because react-native-flipper depends on (FlipperKit,...) that will be excluded

To fix this you can also exclude react-native-flipper using a react-native.config.js

module.exports = {
  ..., // other configs
  dependencies: {
    ...(process.env.NO_FLIPPER
    ? { 'react-native-flipper': { platforms: { ios: null } } }
    : {}),
  }
};

Step 2: You have to run one of these commands from root directory of the project:

NO_FLIPPER=1 bundle exec pod install --project-directory=ios

or

cd ios && NO_FLIPPER=1 pod install