Upgrade React Native to 0.57 to fix issues with Xcode 10

At this point, many of you have already experienced those awful issues with the latest version of Xcode 10 and React Native 0.56.x and  this is because Xcode launched a new build system among other features that affect the build process with React Native.

This framework has gained popularity among the mobile and web developers because it’s simplicity to build mobile applications but since the recent problems and slow resolutions from the Facebook team to solve them, people started to get angry about that because their iOS builds couldn’t be in the store.

I read and test a lot with different instructions until I find the solution at 4:00AM and I want to share that with you because since there is no an official guide to do that, then we need to help each other in this community of developers.

Versions of React, React Native and Xcode that cause the problems

The initial problem when I was trying to build my iOS app was this:

config.h file not found

and the versions were the following ones:

"dependencies": {
    "react": "16.4.0",
    "react-native": "0.55.4"
},
"devDependencies": {
    "babel-eslint": "^7.1.1",
    "babel-jest": "18.0.0",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-preset-react-native": "1.9.1",
    "eslint": "^3.12.0",
    "eslint-plugin-react": "^6.8.0",
    "jest": "18.1.0",
    "react-test-renderer": "~15.4.0-rc.4"
},

With this configuration, I was able to build the Android app without any issue but If I try to fix the config.h file not found using one of those online guides, then my Android build failed.

Upgrading from 0.56.x to 0.57.x

We all know that upgrading a single package (React Native in this case) will not always be the best option without read first the CHANGELOG or check whether someone upgraded it and no problems appeared, so after so many hours of re-installations of packages, the following versions are the ones that work perfectly to build a Android and iOS app.

"dependencies": {
    "react": "^16.6.3",
    "react-native": "^0.57.7"
},
"devDependencies": {
    "metro-react-native-babel-preset": "^0.48.5",
    "@babel/plugin-external-helpers": "^7.2.0",
    "@babel/runtime": "7.0.0",
    "babel-eslint": "^7.1.1",
    "babel-jest": "18.0.0",
    "babel-plugin-module-resolver": "^3.1.1",
    "eslint": "^3.12.0",
    "eslint-plugin-react": "^6.8.0",
    "jest": "18.1.0",
    "react-test-renderer": "~15.4.0-rc.4",
    "schedule": "0.4.0"
},

As you can see, babel-preset-react-native has been replaced with metro-react-native-babel-preset because we need to use now Babel 7 with React Native 0.57 and we added the new @babel/runtime and schedule.

Using those versions, it wasn’t necessary to run the ios-install-third-party.sh. I realised of it because every time you remove the node_modules you started clean so when I upgraded my package.json it simply worked!

Multiple commands produce error with libReact.a & libyoga.a

I don’t know the accurate statistic about how many people will have this error but in case you have it, the solution is to add to your Podfile the following lines of code.

platform :ios, '9.0'

target 'MyProject' do

    post_install do |installer|
        installer.pods_project.targets.each do |target|

            # The following is needed to ensure the "archive" step works in XCode.
            # It removes React & Yoga from the Pods project, as it is already included in the main project.
            # Without this, you'd see errors when you archive like:
            # "Multiple commands produce ... libReact.a"
            # "Multiple commands produce ... libyoga.a"

            targets_to_ignore = %w(React yoga)

            if targets_to_ignore.include? target.name
                target.remove_from_project
            end

        end
    end
end

And that’s all!