📚 Add instruction for M1 users to work with Cocoapods (#2974)

cipolleschi · web-flow · commit 36d1d728f3c4 · 2022-02-23T19:45:20.000Z
diff --git a/docs/_getting-started-macos-ios.md b/docs/_getting-started-macos-ios.md
@@ -1,3 +1,5 @@
+import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
+
 ## Installing dependencies
 
 You will need Node, Watchman, the React Native command line interface, Xcode and CocoaPods.
@@ -45,6 +47,8 @@ sudo gem install cocoapods
 
 For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
 
+<M1Cocoapods />
+
 ### React Native Command Line Interface
 
 React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-native <command>`, the current stable version of the CLI will be downloaded and executed at the time the command is run.
diff --git a/docs/_integration-with-exisiting-apps-objc.md b/docs/_integration-with-exisiting-apps-objc.md
@@ -1,4 +1,4 @@
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
 
 ## Key Concepts
 
@@ -186,6 +186,8 @@ Pod installation complete! There are 3 dependencies from the Podfile and 1 total
 
 > If this fails with errors mentioning `xcrun`, make sure that in Xcode in **Preferences > Locations** the Command Line Tools are assigned.
 
+<M1Cocoapods />
+
 ### Code integration
 
 Now we will actually modify the native iOS application to integrate React Native. For our 2048 sample app, we will add a "High Score" screen in React Native.
diff --git a/docs/_integration-with-exisiting-apps-swift.md b/docs/_integration-with-exisiting-apps-swift.md
@@ -1,3 +1,5 @@
+import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
+
 ## Key Concepts
 
 The keys to integrating React Native components into your iOS application are to:
@@ -152,6 +154,8 @@ Pod installation complete! There are 3 dependencies from the Podfile and 1 total
 
 > If you get a warning such as "_The `swift-2048 [Debug]` target overrides the `FRAMEWORK_SEARCH_PATHS` build setting defined in `Pods/Target Support Files/Pods-swift-2048/Pods-swift-2048.debug.xcconfig`. This can lead to problems with the CocoaPods installation_", then make sure the `Framework Search Paths` in `Build Settings` for both `Debug` and `Release` only contain `$(inherited)`.
 
+<M1Cocoapods />
+
 ### Code integration
 
 Now we will actually modify the native iOS application to integrate React Native. For our 2048 sample app, we will add a "High Score" screen in React Native.
diff --git a/docs/_markdown-m1-cocoapods.mdx b/docs/_markdown-m1-cocoapods.mdx
@@ -0,0 +1,11 @@
+<details>
+    <summary>Note for Mac M1 users</summary>
+
+Mac M1 architecture is not directly compatible with Cocoapods. If you encounter issues when installing pods, you can solve it by running:
+
+- `sudo arch -x86_64 gem install ffi`
+- `arch -x86_64 pod install`
+
+These commands install the `ffi` package, to load dynamically-linked libraries and let you run the `pod install` properly, and runs `pod install` with the proper architecture.
+
+</details>
diff --git a/docs/hermes.md b/docs/hermes.md
@@ -3,6 +3,8 @@ id: hermes
 title: Using Hermes
 ---
 
+import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
+
 <a href="https://hermesengine.dev">
 <img width={300} height={300} style={{float: 'right', margin: '-30px 4px 0'}} src="/docs/assets/HermesLogo.svg" />
 </a>
@@ -77,6 +79,8 @@ Next, install the Hermes pods:
 $ cd ios && pod install
 ```
 
+<M1Cocoapods />
+
 That's it! You should now be able to develop and deploy your app as usual:
 
 ```shell
diff --git a/docs/libraries.md b/docs/libraries.md
@@ -6,7 +6,7 @@ authorURL: 'https://twitter.com/notbrent'
 description: This guide introduces React Native developers to finding, installing, and using third-party libraries in their apps.
 ---
 
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
 
 React Native provides a set of built-in [Core Components and APIs](./components-and-apis) ready to use in your app. You're not limited to the components and APIs bundled with React Native. React Native has a community of thousands of developers. If the Core Components and APIs don't have what you are looking for, you may be able to find and install a library from the community to add the functionality to your app.
 
@@ -51,6 +51,8 @@ Run `pod install` in our `ios` directory in order to link it to our native iOS p
 npx pod-install
 ```
 
+<M1Cocoapods />
+
 Once this is complete, re-build the app binary to start using your new library:
 
 ```bash
diff --git a/docs/navigation.md b/docs/navigation.md
@@ -3,6 +3,8 @@ id: navigation
 title: Navigating Between Screens
 ---
 
+import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
+
 Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
 
 This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use [React Navigation](navigation.md#react-navigation). React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS.
@@ -45,6 +47,8 @@ Next, install the required peer dependencies. You need to run different commands
 
 > Note: You might get warnings related to peer dependencies after installation. They are usually caused by incorrect version ranges specified in some packages. You can safely ignore most warnings as long as your app builds.
 
+<M1Cocoapods />
+
 Now, you need to wrap the whole app in `NavigationContainer`. Usually you'd do this in your entry file, such as `index.js` or `App.js`:
 
 ```jsx
diff --git a/docs/new-architecture-app-renderer-ios.md b/docs/new-architecture-app-renderer-ios.md
@@ -3,6 +3,8 @@ id: new-architecture-app-renderer-ios
 title: Enabling Fabric on iOS
 ---
 
+import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
+
 :::caution
 
 This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page.
@@ -22,18 +24,14 @@ Add changes to your Podfile. You can see some examples in [RNTester](https://git
 # Codegen produces files/classes that share names, and it will show the warning.
 # deterministic_uuids option surpresses the warning.
 install! 'cocoapods', :deterministic_uuids => false
-
 target 'Some App' do
   pods()
 end
-
 def pods()
   # Get config
   config = use_native_modules!
-
   # Use env variables to turn it on/off.
   fabric_enabled = ENV['USE_FABRIC']
-
   use_react_native!(
     ...
     # Modify here if your app root path isn't the same as this one.
@@ -110,3 +108,5 @@ module.exports = {
 // Run pod install with the flags
 USE_FABRIC=1 RCT_NEW_ARCH_ENABLED=1 pod install
 ```
+
+<M1Cocoapods />
diff --git a/docs/new-architecture-library-intro.md b/docs/new-architecture-library-intro.md
@@ -94,7 +94,7 @@ On iOS, this generally requires your library to provide a Podspec (see [`react-n
 
 :::info
 
-To determine if your library is set up for autolinking, check the CocoaPods output after running `pod install` on an iOS project. If you see "auto linking library name", you are all set to go.
+To determine if your library is set up for autolinking, check the CocoaPods output after running `pod install` (or `arch -x86_64 pod install` in case of a Mac M1) on an iOS project. If you see "auto linking library name", you are all set to go.
 
 :::
 
diff --git a/docs/new-architecture-library-ios.md b/docs/new-architecture-library-ios.md
@@ -3,6 +3,8 @@ id: new-architecture-library-ios
 title: Enabling in iOS Library
 ---
 
+import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
+
 :::caution
 
 This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page.
@@ -52,6 +54,8 @@ end
 
 Currently, the Folly version used here must match the Folly version used by React Native. A version mismatch here may lead to errors when running `pod install`. If CocoaPods flags an issue with your Folly version, then you may have a version mismatch. Check which version is used by the core modules Podspecs (e.g. FBReactNativeSpec.podspec), and try running `pod install` again after editing your podspec with the correct Folly version.
 
+<M1Cocoapods />
+
 :::
 
 ### Enable codegen in your `package.json`
diff --git a/docs/new-architecture-troubleshooting.md b/docs/new-architecture-troubleshooting.md
@@ -27,10 +27,10 @@ Open `~/Library/Developer/Xcode/DerivedData`. and look for a folder named after
 
 The CocoaPods integration will see frequent updates as we rollout the New Architecture, and it is possible to end up with your workspace in a broken state after one of these changes. You may clean up any changes related to the codegen by performing some of these steps:
 
-1. Run `pod deintegrate` in your ios directory (or wherever your Podfile is located) and re-run `pod install`.
-2. Delete `Podfile.lock` and re-run `pod install`.
+1. Run `pod deintegrate` in your ios directory (or wherever your Podfile is located) and re-run `pod install` (or `arch -x86_64 pod install`, in case of a Mac M1).
+2. Delete `Podfile.lock` and re-run `pod install` (or `arch -x86_64 pod install`, in case of a Mac M1).
 3. Delete `node_modules` and re-run `yarn install`.
-4. Delete your codegen artifacts and re-run `pod install`, then clean and build your Xcode project.
+4. Delete your codegen artifacts and re-run `pod install` (or `arch -x86_64 pod install`, in case of a Mac M1), then clean and build your Xcode project.
 
 ## Folly Version
 
diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
@@ -3,6 +3,8 @@ id: troubleshooting
 title: Troubleshooting
 ---
 
+import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
+
 These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try [searching for the issue in GitHub](https://github.com/facebook/react-native/issues/).
 
 ### Port already in use
@@ -61,6 +63,8 @@ pod 'React', :path => '../node_modules/react-native', :subspecs => [
 
 Next, make sure you have run `pod install` and that a `Pods/` directory has been created in your project with React installed. CocoaPods will instruct you to use the generated `.xcworkspace` file henceforth to be able to use these installed dependencies.
 
+<M1Cocoapods />
+
 #### React Native does not compile when being used as a CocoaPod
 
 There is a CocoaPods plugin called [cocoapods-fix-react-native](https://github.com/orta/cocoapods-fix-react-native) which handles any potential post-fixing of the source code due to differences when using a dependency manager.
