Apple M1: Folly errors “can’t modify frozen String (FrozenError)” in Facebook React Native
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
- 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.
- 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>
);
}
- 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.
It’s Really not that Complicated.
You can actually understand what’s going on inside your live applications.