Error - `rnsvg` and `react/renderer` components

When dealing with build errors related to missing input files in a React Native iOS project, particularly involving generated files (like those in the rnsvg and react/renderer components), the issue usually stems from either missing codegen steps, misconfigured build phases, or an issue with React Native or third-party libraries. Here’s a detailed solution to resolve these types of errors:

1. Identify the Missing Files and Their Sources

The errors indicate missing files like:

– /ios/build/generated/ios/rnsvgJSI-generated.cpp

– /ios/build/generated/ios/react/renderer/components/rnsvg/States.cpp

– /ios/build/generated/ios/rnsvg/rnsvg-generated.mm

– /ios/build/generated/ios/react/renderer/components/rnsvg/ShadowNodes.cpp

These files are likely generated during the build process or code generation steps. Missing such files usually suggests that:

Codegen scripts weren’t run, or

Build phases responsible for generating these files are misconfigured.

2. Verify Codegen Configuration

Many React Native libraries, especially after React Native 0.70, rely on code generation for JSI bindings, props, states, and other components. Libraries like react-native-svg might have codegen requirements.

#Steps to Fix Codegen Issues:

1. Ensure react-native-codegen is installed:

Make sure you have the react-native-codegen package as part of your devDependencies. If it’s missing, install it:

2. Run Codegen Commands:

To generate the required files, try manually running the codegen commands:

This command generates the necessary files (like JSI-generated.cpp, States.cpp, etc.) under the build/generated/ directory.

3. Check Podfile and Dependencies:

Some dependencies need specific configurations for codegen. Ensure that your Podfile includes any necessary post-install scripts for codegen. For example, for react-native-svg, ensure that the latest version is installed and correctly configured:

3. Check Build Phases in Xcode

There might be a missing or misconfigured build phase responsible for generating these files. Follow these steps to check and fix this:

1. Open your project in Xcode.

2. Select your project in the project navigator, then go to the Build Phases tab.

3. Look for a Run Script phase that runs codegen. If there is none, you may need to add it manually:

– Click the + button and choose “New Run Script Phase.”

Add a script like the following to generate the missing files:

4. Make sure the script runs before the Compile Sources phase.

4. Clean Derived Data and Rebuild

Sometimes Xcode caches old or incorrect build data, which can lead to build errors.

1. Clean Xcode Derived Data:

Or in Xcode, go to Xcode → Preferences → Locations and click Delete under the Derived Data section.

2. Clean the Build Folder:

In Xcode, go to Product → Clean Build Folder (Shift + Command + K).

3. Rebuild the Project:

Once you’ve cleaned everything, try rebuilding the project:

5. Ensure Compatibility with React Native Version

Some third-party libraries might not be fully compatible with the latest React Native version, which could cause issues in generating certain files. If you’re using libraries like react-native-svg, make sure:

1. You are using the latest version of the library.

2. The library is compatible with your version of React Native.

If you are using a version of React Native that has recently changed (e.g., 0.70 or later), double-check the library’s GitHub issues or changelog to ensure there are no breaking changes.

6. Verify Third-Party Library Configurations

For libraries like react-native-svg or any other that is generating JSI or ShadowNodes.cpp files, verify the correct installation and configuration:

Check the library’s documentation for any specific iOS build steps.

– Ensure the right versions of these libraries are installed and that they are compatible with your React Native version.

Summary of Steps:

1. Ensure react-native-codegen is installed and run it.

2. Run pod install after codegen.

3. Check Xcode build phases for missing or incorrect script phases related to codegen.

4. Clean Derived Data and the build folder to avoid stale caches.

5. Update third-party libraries to ensure compatibility with your version of React Native.

By following these steps, you should be able to resolve errors related to missing generated files in your React Native iOS build.