fix(ios-template): escaped-quote form to bundle RN when spaces present in path

[frankcalise]

Summary:

By default, if you init an iOS project in a directory that contains spaces, it will fail in the Build Phase of Bundle React Native code and images. Removing the space from the directory, the project can successfully build. This is due to an improperly escaped string in the script found in the iOS project file.

• Closes Spaces in folder name breaks iOS build #54167
• Closes PhaseScriptExecution [CP-User]\ Generate\ Specs #34269

Changelog:

[IOS] [FIXED] - iOS project will build successfully if spaces are present in the project path

Test Plan:

1. mkdir -p ~/code/test dir
2. npx @react-native-community/cli@latest init TestingSpaces
3. npm run ios

Observe the build fails due to the Build Phase of Bundle React Native code and images

Modify the shell script in the build phase to:

set -e

export CONFIG_JSON=$(sed -e "s|HELLOWORLD_PATH|$(realpath "${SRCROOT}/../")|g" "${SRCROOT}/../.react-native.config")

WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"

/bin/sh -c "\"$WITH_ENVIRONMENT\" \"$REACT_NATIVE_XCODE\""

Run the iOS application again and see that it builds successfully

[cortinico]

Removing the space from the directory, the project can successfully build. This is due to an improperly escaped string in the script found in the iOS project file.

The change you're sending is only for the helloworld app. The template actually lives here: https://github.com/react-native-community/template

[frankcalise]

thanks @cortinico I'll make it over there. Do you want this one to remain or it's not really important on this side?

[cortinico]

Yeah we'd need both

[frankcalise]

Ok. I will fix the diff, it should only be a single line

[cipolleschi]

yeah, the actual project file has been moved to the private folder. You have to sync your fork with react-native again.

[cipolleschi]

Great job, but you need to sync your fork of React Native and apply the changes to the project located in the private folder.