'FlipperKit/FlipperClient.h' file not found

Question

Im trying to migrate RN Version from 0.61.5 to 0.62.0 to get use of Flipper tool for Debugging and profiling purpose.

As part of this migration i have followed upgrade helper tool from RN documentation.

After integration , when i was trying to build IOS app , It is throwing below error.

Please find my podfile

platform :ios, '12.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

def add_flipper_pods!
  version = '~> 0.33.1'
  pod 'FlipperKit', version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitLayoutPlugin', version, :configuration => 'Debug'
  pod 'FlipperKit/SKIOSNetworkPlugin', version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitUserDefaultsPlugin', version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitReactPlugin', version, :configuration => 'Debug'
end
# Post Install processing for Flipper
def flipper_post_install(installer)
  installer.pods_project.targets.each do |target|
    if target.name == 'YogaKit'
      target.build_configurations.each do |config|
        config.build_settings['SWIFT_VERSION'] = '4.1'
      end
    end
  end
end


def pod_imports
  # Pods for landmarkgroupReactapps
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/', :modular_headers => true
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga', :modular_headers => true

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec', :modular_headers => false
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec', :modular_headers => false

  pod 'boost-for-react-native', :podspec =>
      'https://raw.githubusercontent.com/react-native-community/boost-for-react-native/update-ios-platform-version/boost-for-react-native.podspec'

  # React Native Maps dependencies
  rn_maps_path = '../node_modules/react-native-maps'
  pod 'react-native-google-maps', :path => rn_maps_path
  pod 'GoogleMaps'
  pod 'Google-Maps-iOS-Utils'
  pod 'FBSDKCoreKit', :modular_headers => true
  pod 'OneSignal', '2.13.0'
  pod 'Branch'
  pod 'LiveChat', '~> 2.0.11'

  # Google Tag Manager
#  pod 'GoogleTagManager', '~> 7.1.2'

  # Permission
  permissions_path = '../node_modules/react-native-permissions/ios'
  pod 'Permission-LocationAlways', :path => "#{permissions_path}/LocationAlways.podspec"
  pod 'Permission-LocationWhenInUse', :path => "#{permissions_path}/LocationWhenInUse.podspec"

  use_native_modules!
  # Enables Flipper.
    #
    # Note that if you have use_frameworks! enabled, Flipper will not work and
    # you should disable these next few lines.
#    add_flipper_pods!
#    post_install do |installer|
#      flipper_post_install(installer)
#    end
end


# AppName
target 'appName' do
  inherit! :complete
    pod_imports
end

post_install do |installer|
#   flipper_post_install(installer)
add_flipper_pods!
flipper_post_install(installer)
  find_and_replace("../node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m",
  "_currentFrame.CGImage;","_currentFrame.CGImage ;} else { [super displayLayer:layer];")

    ## Fix for XCode >= 12.5
    xcode_version = %x[xcodebuild -version | head -1 | awk '{print $2}']
    puts "Xcode version used is: #{xcode_version}"
    if xcode_version >= '12.5'
      puts "Updating React dependencies for Xcode Version - #{xcode_version}"
      find_and_replace("../node_modules/react-native/React/CxxBridge/RCTCxxBridge.mm","_initializeModules:(NSArray<id<RCTBridgeModule>> *)modules", "_initializeModules:(NSArray<Class> *)modules")
      find_and_replace("../node_modules/react-native/ReactCommon/turbomodule/core/platform/ios/RCTTurboModuleManager.mm","RCTBridgeModuleNameForClass(module))", "RCTBridgeModuleNameForClass(Class(module)))")
    end

  installer.pods_project.targets.each do |target|
    if target.name == "ReactNativeMoEngage"
      puts "Updating #{target.name} HEADER_SEARCH_PATHS"
      append_header_search_path(target, "\"${PODS_ROOT}/../landmarkgroupReactapps\"")
    end

  end
end

# Method to append header search path to a target
def append_header_search_path(target, path)
    target.build_configurations.each do |config|
        xcconfig_path = config.base_configuration_reference.real_path

        # to keep the delimiter at the end of each string:
        file_data = File.read(xcconfig_path).split(/(?<=[\S])\n/)

        # Copy current headers
        header_search_paths = ""
        header_search_paths_index = nil
        file_data.select.with_index do |val, index|
          if /HEADER_SEARCH_PATHS/ =~ val
            header_search_paths = val
            header_search_paths_index = index
          end
        end

        # Append the new header
        new_header_search_paths = header_search_paths << " #{path}"
        file_data[header_search_paths_index] = new_header_search_paths

        # Write it back to the file
        file_data = file_data.join("\n")
        File.write(xcconfig_path, file_data)
    end
end


def find_and_replace(dir, findstr, replacestr)
  Dir[dir].each do |name|
      text = File.read(name)
      replace = text.gsub(findstr,replacestr)
      if text != replace
          puts "Fix: " + name
          File.open(name, "w") { |file| file.puts replace }
          STDOUT.flush
      end
  end
  Dir[dir + '*/'].each(&method(:find_and_replace))
end

my AppDelegate.m file

@import Firebase;

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


static void InitializeFlipper(UIApplication *application) {
  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


- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  
#if DEBUG
  InitializeFlipper(application);
#endif

please let me know how i can fix this issue and make use of flipper tool.

Saintsimonianism

Answer 1

If you using RNFirebase and the version of react-native is >= 0.69.0, you should read this recommand: https://rnfirebase.io/#altering-cocoapods-to-use-frameworks

First, add this line to the top of ./ios/Podfile:

$RNFirebaseAsStaticFramework = true

Then insert this line inside your target in ./ios/Podfile:

use_frameworks!

And disable this line:

# :flipper_configuration => FlipperConfiguration.enabled,

cd ios && pod install  --repo-update

Surpass

Answer 2

If your ./ios/Podfile include

• use_frameworks! :linkage => :static or
• use_frameworks!

Flipper will not work You should close this line

• :flipper_configuration => FlipperConfiguration.enabled

after run "pod install --repo-update" in ./ios directory

Ligetti

and now what to use instead of flipper to debug the react native ios app? – Humanitarian

Answer 3

1. Go to your Podfile
2. Comment the use_frameworks! if you've added

Flipperkit will only work if you've not used use_frameworks

Macaco

Answer 4

$RNFirebaseAsStaticFramework = true # --> add this line platform :ios, '12.4' install! 'cocoapods', :deterministic_uuids => false

use_frameworks! # --> add this line before target target 'Easyfarm' do config = use_native_modules!

#:flipper_configuration => FlipperConfiguration.enabled --> comment this line

pod install

Coed

Answer 5

Answer of @Nak was perfect but I want to add more explanation for the answer with the help of code.

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

platform :ios, '12.4'
install! 'cocoapods', :deterministic_uuids => false
production = ENV["PRODUCTION"] == "1"
pod 'Google-Mobile-Ads-SDK',"9.10.0"
pod 'GoogleMobileAdsMediationFacebook','6.11.0.0'

target 'CallerApp' do
  config = use_native_modules!
  $RNFirebaseAsStaticFramework = true
  $RNGoogleMobileAdsAsStaticFramework = true
  $RNAdMobAsStaticFramework = true
  use_frameworks! :linkage => :static
  pre_install do |installer|
  Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}

  installer.pod_targets.each do |pod|
    if pod.name.eql?('RNPermissions') || pod.name.start_with?('Permission-')
      def pod.build_type;
        # Uncomment the line corresponding to your CocoaPods version
        Pod::BuildType.static_library # >= 1.9
        # Pod::Target::BuildType.static_library # < 1.9
      end
    end
  end
end


  # Flags change depending on the env values.
  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    # Hermes is now enabled by default. Disable by setting this flag to false.
    # Upcoming versions of React Native may rely on get_default_flags(), but
    # we make it explicit here to aid in the React Native upgrade process.
    :hermes_enabled => true,
    :fabric_enabled => flags[:fabric_enabled],
    # Enables Flipper.
    #
    # Note that if you have use_frameworks! enabled, Flipper will not work and
    # you should disable the next line.
    # :flipper_configuration => FlipperConfiguration.enabled,
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )
  permissions_path = '../node_modules/react-native-permissions/ios'
  
  pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
  pod 'Permission-Contacts', :path => "#{permissions_path}/Contacts"
  pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"
  pod 'Permission-PhotoLibraryAddOnly', :path => "#{permissions_path}/PhotoLibraryAddOnly"  
  
  target 'CallerAppTests' do
    inherit! :complete
    # Pods for testing
  end
  post_install do |installer|
    react_native_post_install(installer)
    #############

      installer.pods_project.targets.each do |target|
        if target.respond_to?(:product_type) and target.product_type == "com.apple.product-type.bundle"
          target.build_configurations.each do |config|
              config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
          end
        end
      end

    ############
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

this is how you pod file should look like this

Stratfordonavon

Answer 6

1. Open your pod file
2. Comment out any line that contains "flipper"
3. Run pod install
4. Start your app

Microscopy

i think this removes flipper from the project all together – Myrtamyrtaceous