Notes on fixing react native 0.61.5 on a M1 mac

Here's a few references based on things that broke while trying to make an old project on react native to work with my Macbook M1

Undefined / Unknown symbol : , expected )

This happens when babel is unable to parse flow grammar, so you can remove it from your source code but there's good chances it won't be able to compile it for imported stuff as well, you can lock the babel to resolve to a particular version by following the below

https://github.com/babel/babel/issues/14139#issuecomment-1011836916

Cannot build simulator for arm64

Well, XCode 12.5 adds a few defaults with regards to supported architectures and this breaks due to incompatibility. In short you'll have to do the following steps

1. Remove VALID_ARCHS from build settings if it's been added
2. Add Excluded Arch's for ios simulator sdk's and specify the arch to be arm64
3. Modify Podfile to add the same configuration to any packages that might get installed using the snippet below

post_install do |installer|
  installer.pods_project.build_configurations.each do |config|
    config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
  end
end

For a more detailed explanation, read the below blog https://khushwanttanwar.medium.com/xcode-12-compilation-errors-while-running-with-ios-14-simulators-5731c91326e9

No Images or assets on iOS 14 +

The rendering changed over the versions and this specific react native version doesn't handle the change so you'll have to manually patch this using patch-package by creating a patch file for the below addition in the file react-native/Libraries/Image/RCTUIImageViewAnimated.m

else {
    [super displayLayer:layer];
}

and this should handle the rendering for you after running patch-package again and re-installing the Pods.

More details about this on this issue thread: https://github.com/facebook/react-native/issues/29268

cannot initialize a parameter of type 'NSArray....'

There's a good chance you start with this issue where XCode fails to handle basic types due to the difference in the SDK version and paths

You can fix this by manually replacing these with older definitions by adding the below lines in your post_install script in the Podfile as well

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)))")

The find_and_replace isn't a defined function so you'll have to define that as well, which you can do at the end of the Podfile with the following code

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

You can read more about this on this issue thread https://github.com/facebook/react-native/issues/28405

In case you are greeted with both issues regarding XCode >=12.5 then this is how your Podfile's post_install task will look like.

Note: I like to move my post_install out of the targets block. If you keep it inside the block then know that the find_and_replace function is to be on the very outside

targets "project" do
#  pod Stripe
# ... etc
end


def find_and_replace()
    # ...
end

So the final output would look a little something like this

post_install do |installer|

  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)))")


  installer.pods_project.build_configurations.each do |config|
    config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
  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