This article is about fixing Apple M1 Folly errors can't modify frozen String (FrozenError) in Facebook React Native
  • 08-Feb-2023
Lightrun Team
Author Lightrun Team
Share
This article is about fixing Apple M1 Folly errors can't modify frozen String (FrozenError) in Facebook React Native

Apple M1: Folly errors “can’t modify frozen String (FrozenError)” in Facebook React Native

Lightrun Team
Lightrun Team
08-Feb-2023

Explanation of the problem

System Configuration:

  • Model Name: MacBook Pro
  • Model Identifier: MacBookPro18,1
  • Chip: Apple M1 Pro

Steps performed:

  • Executed pod install command from the /ios folder of the React Native project

Expected Result:

  • Fetching of podspec for Folly from the path ../node_modules/react-native/third-party-podspecs/Folly.podspec
  • Installation of Folly version 2018.10.22.00

Actual Result:

  • Fetching of podspec for Folly from the path ../node_modules/react-native/third-party-podspecs/Folly.podspec
  • Error encountered: can't modify frozen String (FrozenError) in /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.11.2/lib/cocoapods/user_interface/error_report.rb:34

CocoaPods Environment:

  • Version: 1.11.2
  • Ruby: ruby 2.6.8p205 (2021-07-07 revision 67951) [universal.x86_64-darwin21]
  • RubyGems: 3.0.3.1
  • Host: macOS 12.0.1 (21A559)
  • Xcode: 13.2.1 (13C100)
  • Git: git version 2.32.0 (Apple Git-132)
  • Ruby lib dir: /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib
  • Repositories: trunk – CDN – https://cdn.cocoapods.org/
  • Installation Source: Executable Path: /usr/local/bin/pod
  • Plugins: cocoapods-deintegrate, cocoapods-plugins, cocoapods-search, cocoapods-trunk, cocoapods-try

Podfile Configuration:

  • Platform: iOS, version 11.0
  • Required relative path: ../node_modules/@react-native-community/cli-platform-ios/native_modules
  • Pods for the target App: FBLazyVector, FBReactNativeSpec, RCTRequired, RCTTypeSafety, React, React-Core, React-CoreModules, React-Core/DevSupport, React-RCTActionSheet, React-RCTAnimation, React-RCTBlob, React-RCTImage, React-RCTLinking, React-RCTNetwork, React-RCTSettings, React-RCTText, React-RCTVibration, React-Core/RCTWebSocket, React-cxxreact, React-jsi, React-jsiexecutor

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Apple M1: Folly errors “can’t modify frozen String (FrozenError)” in Facebook React Native

The issue at hand is related to the React Native CocoaPods setup in a non-M1 Mac. When integrating React Native into an existing iOS project, the Podfile needs to be updated to match the version of React Native being used. Failing to do so can result in an error when installing the dependencies using pod install.

pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

This is the code that is causing the error. It specifies the use of the Folly podspec, which is not compatible with the latest version of React Native. To resolve the issue, the code needs to be changed to the following:

pod 'RCT-Folly', :podspec => "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"

This updated code specifies the use of the RCT-Folly podspec, which is compatible with the latest version of React Native. To determine the correct code for your setup, you can create a new React Native project that is built for the version of React Native you are using, then examine its Podfile for the necessary updates.

It is important to note that the Podfile version changes depending on the version of React Native being used. Therefore, it is recommended to always check the React Native documentation, specifically the section on “Configuring CocoaPods dependencies” for the most up-to-date information. By following the recommended steps, you can ensure a smooth integration of React Native into your iOS project and avoid any issues with the CocoaPods setup.

Other popular problems with React Native

Problem: Package Version Conflicts

One of the most common problems faced by React Native developers is version conflicts between different packages. React Native uses a large number of packages, and sometimes, updates to these packages can cause compatibility issues with other packages.

Solution:

To resolve these conflicts, developers need to identify which packages are causing the issue and update them to compatible versions.

Example: 
If you are encountering a version conflict with react-native-vector-icons, you can update the version in your package.json file as follows:

"dependencies": {
  "react-native-vector-icons": "^6.6.0"
}

Then run the following command to install the updated package:

npm install react-native-vector-icons@latest

Problem: Issues with Xcode and iOS Builds

Another common problem faced by React Native developers is related to building the iOS app using Xcode. The build process can sometimes fail due to issues with the Xcode project configuration or with the React Native dependencies.

Solution:

To resolve these issues, developers need to troubleshoot the Xcode project and make sure all dependencies are correctly installed and configured.

Example: 
If you are encountering build errors related to CocoaPods, you can try the following steps to resolve the issue:

1. Update CocoaPods to the latest version
2. Run the following command in your iOS project directory:

pod install

3. Clean your Xcode build folder by holding down the option key and clicking on the "Product" menu, then "Clean Build Folder".

4. Restart Xcode and build the project again.

Problem: Debugging Issues with the JavaScript Debugger

React Native comes with a built-in JavaScript debugger, but sometimes, it can be difficult to get it working correctly. Debugging issues can arise due to incorrect setup, incorrect configuration, or compatibility issues with other tools.

Solution:

To resolve these issues, developers need to make sure the JavaScript debugger is correctly set up and configured, and also try using alternative debugging tools if necessary.

Example: 
If you are encountering issues with the React Native JavaScript debugger, you can try the following steps to resolve the issue:

1. Make sure the debugger is correctly set up in your React Native app by following the instructions in the official React Native documentation.

2. Try using a different JavaScript debugger, such as React Native Debugger or Chrome DevTools.

3. If all else fails, try adding console.log statements to your code to isolate the issue.

A brief introduction to React Native

Facebook React Native is a popular open-source platform for developing cross-platform mobile applications. It enables developers to build high-quality, native-feeling apps for both iOS and Android using a single codebase written in JavaScript. React Native uses native components rather than WebViews to create a more performant and seamless user experience.

React Native leverages the power of React, Facebook’s JavaScript library for building user interfaces, to create mobile applications. This allows developers to reuse their knowledge and skills from web development to build robust and scalable mobile applications. React Native also provides a wide range of ready-to-use components and APIs, reducing the amount of custom code that developers have to write. In addition, React Native provides a hot reloading feature that allows developers to see changes in the app in real-time without having to rebuild the entire project. This speeds up the development process and enables developers to focus on delivering great user experiences.

Most popular use cases for React Native

  1. Cross-Platform Mobile App Development: Facebook React Native can be used for developing cross-platform mobile applications for both iOS and Android operating systems, with a single codebase. This reduces development time and increases productivity, as developers don’t need to maintain separate codebases for each platform.
  2. Complex User Interfaces: Facebook React Native allows developers to create complex and interactive user interfaces with high performance and smooth animations, which are crucial for modern mobile applications. For example, you can use code like the following to create a custom UI component with state updates and animations:
import React, { useState } from 'react';
import { Animated, Text, View } from 'react-native';

const FadeInView = (props) => {
  const [fadeAnim] = useState(new Animated.Value(0))  // Initial value for opacity: 0

  React.useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 10000,
      }
    ).start();
  }, [])

  return (
    <Animated.View                 // Special animatable View
      style={{
        ...props.style,
        opacity: fadeAnim,         // Bind opacity to animated value
      }}
    >
      {props.children}
    </Animated.View>
  );
}

export default function App() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
      </FadeInView>
    </View>
  );
}
  1. Building Mobile Applications with Complex UI: React Native enables developers to create mobile applications with complex user interfaces. The framework provides a wide range of UI components and APIs that help to design and render interactive and visually appealing applications. These components can be easily styled and customized, making it possible to create a unique and immersive user experience. The following code block demonstrates how to use React Native’s built-in components to build a custom UI:
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

class MyApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Welcome to my app!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold'
  }
});

export default MyApp;

In this code example, the View component is used as a container to hold and display the text, while the Text component is used to render the text itself. The styles object is used to define the appearance of the components. This code demonstrates the simplicity and flexibility of React Native’s approach to building custom UI, which makes it a great choice for applications with complex user interfaces.

Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications.

Try Lightrun’s Playground

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.