Setup environment React Native for MacOS M1

charismaaji

charismaaji

Posted on February 10, 2022

Setup environment React Native for MacOS M1

MacOs with chip M1 has different setup for environment React Native, some people got error and didn’t got any solution. In this article I will share to you how to setup React Native on MacOs M1

1. Install Brew

Open your terminal and copy this

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Enter fullscreen mode Exit fullscreen mode

If install finish, copy on the red line first and press enter then copy on the blue line and press enter

Image description
Check brew version by

brew --version
Enter fullscreen mode Exit fullscreen mode

If you can see brew version, it's mean brew already installed on your mac

2. Install Node

Back to terminal, and type this

brew install node
Enter fullscreen mode Exit fullscreen mode

Check your node version by

node --version
Enter fullscreen mode Exit fullscreen mode

3. Install Watchman

Now we need to install watchman

brew install watchman
Enter fullscreen mode Exit fullscreen mode

4. Install Xcode

Go to AppStore and install Xcode. It’s take a bit long time for installation because Xcode have a huge size. Wait until finish like this
Image description

After you open Xcode it will show alert ask to install Rosetta. I’m not sure we actually need it. Let’s press NOT NOW and we install as soon as we need.

Now we open the Xcode and we go to preferences. You can see on this picture
Image description

Go to locations path and click command line tools let’s select Xcode version

5. Set iOS simulator

Now we need to install emulator or simulator by click Components and choose emulator what we want to. It also take a bit long time because size a quite big. If installation was finish, it will look like this. Let's pick for iPhone 12 or 13

Image description

6. Install Ruby

Install ruby by Open Terminal and copy this

brew install ruby
Enter fullscreen mode Exit fullscreen mode

7. Install cocoapods

install cocoapods by specify folders where we need to install, this is very important. So I would like to be

sudo gem install -n /usr/local/bin ffi cocoapods
Enter fullscreen mode Exit fullscreen mode

now we can see our pod version by type this on terminal

pod --version
Enter fullscreen mode Exit fullscreen mode

Installation was finish. Now we can create new React Native project by type
npx react-native init ExampleYourProject

(Add On) 8. If you still got error, follow this section. If not, you don’t need to follow this

if you still got error, trying use this

sudo arch -arch x86_64 gem install cocoapods
Enter fullscreen mode Exit fullscreen mode

then copy this

sudo arch -arch x86_64 gem install ffi
Enter fullscreen mode Exit fullscreen mode

then it’s possible to run it to your ios folder by going to your project and cd/ios and type this

arch -arch x86_64 pod install
Enter fullscreen mode Exit fullscreen mode

Yey congratulations now you are already finish all React Native setup environment.
If you have any question, feel free to ask me on
email : charismakurniawan@gmail.com
instagram : charismaaji

💖 💪 🙅 🚩
charismaaji
charismaaji

Posted on February 10, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related