Goglides Dev 🌱

Cover image for Flipper Issues in a React Native Project, remove it
Balkrishna Pandey
Balkrishna Pandey

Posted on

Flipper Issues in a React Native Project, remove it

This blog exists as a placeholder for future me.

Flipper is a powerful tool for debugging React Native applications, but integrating it can sometimes lead to issues. Recently, I faced several errors related to Flipper when trying to install pods for my React Native project. I simply removed this tool from my Podfile. Here is my latest podfile looks like.

Error Log

When I tried to run the project I saw the following error log,

Flipper Error

Solution

  • Ensure you are using the latest version of Flipper. Update your Podfile as follows:
# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

platform :ios, min_ios_version_supported
prepare_react_native_project!

# 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`
# js
# module.exports = {
#   dependencies: {
#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
# 
# flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'meetflow' do
  config = use_native_modules!

  # 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.
    :hermes_enabled => flags[:hermes_enabled],
    :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 => flipper_config,
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  # Add missing dependencies
  # pod 'RCTTypeSafety', :path => '../node_modules/react-native/Libraries/TypeSafety'
  # pod 'RNCClipboard', :path => '../node_modules/@react-native-clipboard/clipboard'
  # pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
  # pod 'RNImageCropPicker', :path => '../node_modules/react-native-image-crop-picker'
  # pod 'RNReanimated', :path => '../node_modules/react-native-reanimated'
  # pod 'RNSVG', :path => '../node_modules/react-native-svg'
  # pod 'RNScreens', :path => '../node_modules/react-native-screens'
  # pod 'RNShare', :path => '../node_modules/react-native-share'
  # pod 'RNSnackbar', :path => '../node_modules/react-native-snackbar'
  # pod 'RNSound', :path => '../node_modules/react-native-sound'
  # pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
  # pod 'React-Codegen', :path => '../node_modules/react-native/React/React-Codegen'
  # pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  # pod 'React-Fabric', :path => '../node_modules/react-native/React/Fabric'
  # pod 'React-FabricImage', :path => '../node_modules/react-native/React/FabricImage'
  # pod 'React-ImageManager', :path => '../node_modules/react-native/React/ImageManager'
  # pod 'React-Mapbuffer', :path => '../node_modules/react-native/React/Mapbuffer'
  # pod 'React-NativeModulesApple', :path => '../node_modules/react-native/React/NativeModulesApple'
  # pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  # pod 'React-RCTAppDelegate', :path => '../node_modules/react-native/React/RCTAppDelegate'
  # pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  # pod 'React-RCTFabric', :path => '../node_modules/react-native/React/RCTFabric'
  # 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-RuntimeApple', :path => '../node_modules/react-native/React/Runtime/Apple'
  # pod 'React-RuntimeCore', :path => '../node_modules/react-native/React/Runtime/Core'
  # pod 'React-RuntimeHermes', :path => '../node_modules/react-native/React/Runtime/Hermes'
  # pod 'React-graphics', :path => '../node_modules/react-native/React/graphics'
  # pod 'React-jserrorhandler', :path => '../node_modules/react-native/React/jserrorhandler'
  # pod 'React-nativeconfig', :path => '../node_modules/react-native-config'
  # pod 'ReactCommon', :path => '../node_modules/react-native/ReactCommon'
  # pod 'TOCropViewController', :path => '../node_modules/react-native-image-crop-picker/ios/TOCropViewController'
  # pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'
  # pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'
  # pod 'react-native-video', :path => '../node_modules/react-native-video'

  pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'

  target 'meetflowTests' do
    inherit! :complete
    # Pods for testing
  end

  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false
    )
    # __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end


Enter fullscreen mode Exit fullscreen mode
  • Make sure your React Native version and all dependencies are up-to-date:
npm install
npx react-native upgrade
Enter fullscreen mode Exit fullscreen mode

Top comments (0)