- Get the Flutter SDK
- iOS setup
- Android setup
System requirements
Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. While debugging, it can help to have Fast Refresh enabled. Fast Refresh is enabled by default, and you can toggle 'Enable Fast Refresh' in the React Native developer menu. Click the Atom menu Nuclide Debugger Show Click “Attach debugger” button. In the popup dialog, select “React Native” tab. In “Workspace path (should contain package.json):” text field, input your project’s full path.
The most convenient option is React Native Debugger, which has Chrome Developer Tools combined with React and Redux debuggers. This tool is a desktop app available for Mac OS, Linux, and Windows. This tool is a desktop app available for Mac OS, Linux, and Windows.
To install and run Flutter,your development environment must meet these minimum requirements:
- Operating Systems: macOS (64-bit)
- Disk Space: 2.8 GB (does not include disk space for IDE/tools).
- Tools: Flutter depends on these command-line tools being availablein your environment.
bash
curl
git
2.xmkdir
rm
unzip
which
Get the Flutter SDK
- Download the following installation bundle to get the lateststable release of the Flutter SDK:For other release channels, and older builds,see the SDK releases page.
- Extract the file in the desired location, for example:If you don’t want to install a fixed version of the installation bundle, you can skip steps 1 and 2. Instead, get the source code from the Flutter repoon GitHub with the following command:You can also change branches or tags as needed.For example, to get just the stable version:
- Add the
flutter
tool to your path:This command sets yourPATH
variable for thecurrent terminal window only.To permanently add Flutter to your path, seeUpdate your path. - Optionally, pre-download development binaries:The
flutter
tool downloads platform-specific development binaries asneeded. For scenarios where pre-downloading these artifacts is preferable(for example, in hermetic build environments,or with intermittent network availability), iOSand Android binaries can be downloaded ahead of time by running:For additional download options, seeflutter help precache
.
You are now ready to run Flutter commands!
Note: To update an existing version of Flutter, see Upgrading Flutter.
Run flutter doctor
Run the following command to see if there are any dependencies you need toinstall to complete the setup (for verbose output, add the
-v
flag):This command checks your environment and displays a report to the terminalwindow. The Dart SDK is bundled with Flutter; it is not necessary to installDart separately. Check the output carefully for other software you mightneed to install or further tasks to perform (shown in bold text).
For example:
The following sections describe how to perform these tasks and finish the setupprocess.
Once you have installed any missing dependencies, run the
flutter doctor
command again to verify that you’ve set everything up correctly.Warning: The
flutter
tool uses Google Analytics to anonymously report feature usage statistics and basic crash reports. This data is used to help improve Flutter tools over time.Flutter tool analytics are not sent on the very first run. To disable reporting, type
flutter config --no-analytics
. To display the current setting, type flutter config
. If you opt out of analytics, an opt-out event is sent, and then no further information is sent by the Flutter tool.By downloading the Flutter SDK, you agree to the Google Terms of Service. Note: The Google Privacy Policy describes how data is handled in this service.
Moreover, Flutter includes the Dart SDK, which may send usage metrics and crash reports to Google.
Update your path
You can update your PATH variable for the current session atthe command line, as shown in Get the Flutter SDK.You’ll probably want to update this variable permanently,so you can run
flutter
commands in any terminal session.The steps for modifying this variable permanently forall terminal sessions are machine-specific.Typically you add a line to a file that is executedwhenever you open a new window. For example:
- Determine the directory where you placed the Flutter SDK.You need this in Step 3.
- Open (or create) the
rc
file for your shell.Typingecho $SHELL
in your Terminal tells youwhich shell you’re using.If you’re using Bash,edit$HOME/.bash_profile
or$HOME/.bashrc
.If you’re using Z shell, edit$HOME/.zshrc
.If you’re using a different shell, the file pathand filename will be different on your machine. - Add the following line and change
[PATH_TO_FLUTTER_GIT_DIRECTORY]
to bethe path where you cloned Flutter’s git repo: - Run
source $HOME/.<rc file>
to refresh the current window,or open a new terminal window toautomatically source the file. - Verify that the
flutter/bin
directoryis now in your PATH by running:Verify that theflutter
command is available by running:
Note: As of Flutter’s 1.19.0 dev release, the Flutter SDK contains the
dart
command alongside the flutter
command so that you can more easily run Dart command-line programs. Downloading the Flutter SDK also downloads the compatible version of Dart, but if you’ve downloaded the Dart SDK separately, make sure that the Flutter version of dart
is first in your path, as the two versions might not be compatible. The following command (on macOS, linux, and chrome OS), tells you whether the flutter
and dart
commands originate from the same bin
directory and are therefore compatible. (Some versions of Windows support a similar where
command.)React Native Debugger Open
As shown above, the two commands don’t come from the same
bin
directory. Update your path to use commands from /path-to-flutter-sdk/bin
before commands from /usr/local/bin
(in this case). After updating your shell for the change to take effect, running the which
or where
command again should show that the flutter
and dart
commands now come from the same directory.To learn more about the
dart
command, run dart -h
from the command line, or see the dart tool page.Platform setup
macOS supports developing Flutter apps in iOS, Android,and the web (technical preview release).Complete at least one of the platform setup steps now,to be able to build and run your first Flutter app.
iOS setup
Install Xcode
To develop Flutter apps for iOS, you need a Mac with Xcode installed.
- Install the latest stable version of Xcode(using web download or the Mac App Store).
- Configure the Xcode command-line tools to use thenewly-installed version of Xcode byrunning the following from the command line:This is the correct path for most cases,when you want to use the latest version of Xcode.If you need to use a different version,specify that path instead.
- Make sure the Xcode license agreement is signed byeither opening Xcode once and confirming or running
sudo xcodebuild -license
from the command line.
Versions older than the latest stable version may still work,but are not recommended for Flutter development.Using old versions of Xcode to target bitcode is notsupported, and is likely not to work.
With Xcode, you’ll be able to run Flutter apps onan iOS device or on the simulator.
Set up the iOS simulator
To prepare to run and test your Flutter app on the iOS simulator,follow these steps:
- On your Mac, find the Simulator via Spotlight orby using the following command:
- Make sure your simulator is using a 64-bit device(iPhone 5s or later) by checking the settings inthe simulator’s Hardware > Device menu.
- Depending on your development machine’s screen size,simulated high-screen-density iOS devicesmight overflow your screen. Grab the corner of thesimulator and drag it to change the scale. You can alsouse the Window > Physical Size or Window > Pixel Accurateoptions if your computer’s resolution is high enough.
- If you are using a version of Xcode olderthan 9.1, you should instead set the device scalein the Window > Scale menu.
Create and run a simple Flutter app
To create your first Flutter app and test your setup,follow these steps:
- Create a new Flutter app by running the following from thecommand line:
- A
my_app
directory is created, containing Flutter’s starter app.Enter this directory: - To launch the app in the Simulator,ensure that the Simulator is running and enter:
![React native debugger ui React native debugger ui](/uploads/1/1/4/0/114030771/379091346.png)
Deploy to iOS devices
To deploy your Flutter app to a physical iOS deviceyou’ll need to set up physical device deployment in Xcodeand an Apple Developer account. If your app is using Flutter plugins,you will also need the third-party CocoaPods dependency manager.
- You can skip this step if your apps do not depend onFlutter plugins with native iOS code.Install and set up CocoaPods by running the following commands:Note: The default version of Ruby requires
sudo
to install the CocoaPods gem. If you are using a Ruby Version manager, you may need to run withoutsudo
. - Follow the Xcode signing flow to provision your project:
- Open the default Xcode workspace in your project byrunning
open ios/Runner.xcworkspace
in a terminalwindow from your Flutter project directory. - Select the device you intend to deploy to in the devicedrop-down menu next to the run button.
- Select the
Runner
project in the left navigation panel. - In the
Runner
target settings page,make sure your Development Team is selected.The UI varies depending on your version of Xcode.- For Xcode 10, look under General > Signing > Team.
- For Xcode 11 and newer, look underSigning & Capabilities > Team.
When you select a team,Xcode creates and downloads a Development Certificate,registers your device with your account,and creates and downloads a provisioning profile (if needed).- To start your first iOS development project,you might need to sign intoXcode with your Apple ID. Development and testing is supported for any Apple ID.Enrolling in the Apple Developer Program is required todistribute your app to the App Store.For details about membership types,see Choosing a Membership.
- The first time you use an attached physical device for iOSdevelopment, you need to trust both your Mac and theDevelopment Certificate on that device.Select
Trust
in the dialog prompt whenfirst connecting the iOS device to your Mac.Then, go to the Settings app on the iOS device,select General > Device Managementand trust your Certificate.For first time users, you may need to selectGeneral > Profiles > Device Management instead. - If automatic signing fails in Xcode, verify that the project’sGeneral > Identity > Bundle Identifier value is unique.
- Open the default Xcode workspace in your project byrunning
- Start your app by running
flutter run
or clicking the Run button in Xcode.
Android setup
Note: Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you can write your Flutter apps in a number of editors; a later step discusses that.
Install Android Studio
- Download and install Android Studio.
- Start Android Studio, and go through the ‘Android Studio Setup Wizard’.This installs the latest Android SDK, Android SDK Command-line Tools,and Android SDK Build-Tools, which are required by Flutterwhen developing for Android.
![Debugger Debugger](/uploads/1/1/4/0/114030771/663555097.jpg)
Set up your Android device
To prepare to run and test your Flutter app on an Android device,you need an Android device running Android 4.1 (API level 16) or higher.
- Enable Developer options and USB debugging on your device.Detailed instructions are available in theAndroid documentation.
- Windows-only: Install the Google USBDriver.
- Using a USB cable, plug your phone into your computer. If prompted on yourdevice, authorize your computer to access your device.
- In the terminal, run the
flutter devices
command to verify thatFlutter recognizes your connected Android device. By default,Flutter uses the version of the Android SDK where youradb
tool is based. If you want Flutter to use a different installationof the Android SDK, you must set theANDROID_SDK_ROOT
environmentvariable to that installation directory.
Set up the Android emulator
To prepare to run and test your Flutter app on the Android emulator,follow these steps:
- EnableVM accelerationon your machine.
- Launch Android Studio, click the AVD Managericon, and select Create Virtual Device…
- In older versions of Android Studio, you should insteadlaunch Android Studio > Tools > Android > AVD Manager and selectCreate Virtual Device…. (The Android submenu is only presentwhen inside an Android project.)
- If you do not have a project open, you can choose Configure > AVD Manager and select Create Virtual Device…
- Choose a device definition and select Next.
- Select one or more system images for the Android versions you wantto emulate, and select Next.An x86 or x86_64 image is recommended.
- Under Emulated Performance, select Hardware - GLES 2.0 to enablehardwareacceleration.
- Verify the AVD configuration is correct, and select Finish.For details on the above steps, see ManagingAVDs.
- In Android Virtual Device Manager, click Run in the toolbar.The emulator starts up and displays the default canvas for yourselected OS version and device.
Web setup
Flutter has early support for building web applications using the
beta
channel of Flutter. To add support for web development, followthese instructions when you’ve completed the setup above.Next step
Set up your preferred editor.
Contents
- Xcode
- Android Studio
- Create & Check react-native Project
Outline
let’s see how to install and configure react-native development environment on Mac. If you want to know how to install react-native on Windows, see the blog post below.
you can use
Expo CLI
and React Native CLI
to develop react-native app on Mac.Expo CLI is the package includes many native features(geolocation, camera, etc) when you develop the app with react-native. At the first time, when you develop the react native with Expo CLI, you can feel easy and comfortable. However, this pacakge includes many native features those you don’t use, and that makes the app build size bigger. Also, if you want to integrate the native feature which Expo CLI doesn’t include, it’s hard to make it. Therefore, this blog post doesn’t recommend to use Expo CLI.
This blog post is about how to install and configure React Native CLI environment. Also, we’ll create react-native project by React Native CLI and check it works well.
We need to install Nodejs, Watchman, Xcode, etc to develop the app by react-native. let’s see how to install them one by one.
Homebrew
Homebrew is a package manager on Mac to install and manage packages. We can install packages simply on Mac via Homebrew.
- Homebrew: https://brew.sh/
First, execute the command below to check Homebrew is installed on Mac.
If Homebrew is installed, you can see Homebrew version like below.
If Homebrew version is not shown, you can install Homebrew via the command below.
After installing, execute the command below to check Homebrew is installed well.
If Homebrew is installed well, you can see Homebrew version like below.
Nodejs
react-native is Javascript, so we need to install Nodejs that is Javascript runtime.
- Nodejs: https://nodejs.org/
execute Homebrew command below to install Nodejs.
After installing, execute the command below to check Nodejs is installed well.
If Nodejs is installed well, you can see Nodejs version on the screen.
When Nodejs is installed, basically, npm (Node Package Manager) is also installed. Execute the command below to check npm is installed well.
If npm is installed well, you can see npm version like below.
Watchman
Watchman is to watch specific folders or files, and if they is changed, Watchman can trigger some actions. In react-native, Watchman watches the source codes and if they are added or changed, Watchman rebuilds them.
- Watchman: https://facebook.github.io/watchman/
Execute Homebrew command below to install Watchman.
After installing, execute the command below to check Watchman is installed well.
If Watchman is installed well, Watchman version would be shown up.
React Native CLI
Let’s install React Native CLI to develop the app by react-native. Execute npm command below to install React Native CLI globally.
After installing, execute the command below to check React Native CLI is installed well.
If React Native CLI is installed well, you can see React Native CLI version like below.
Xcode
We need Xcode to develop iOS app by react-native. Click the link below to install Xcode via App store.
- Xcode download link: https://apps.apple.com/us/app/xcode/id497799835?mt=12
After Xcode is installed, we need to configure Command Line Tools. Execute Xcode and click
Xcode > Preferences... > Locations
on the top menu. When you click it, you can see Command Line Tools setting like below.If the setting is not like above, click the dropdown menu and select last version of Command Line Tool.
Install Cocoapods
Cocoapods is the dependency manager on iOS development.
- Cocoapods: https://cocoapods.org/
Cocoapods is necessary to develop an app by react-native. Execute the command below to install Cocoapods.
After installing, execute the command below to check Cocoapods is installed well.
If Cocoapods is installed well, you can see Cocoapods version like below.
JDK
We need to install JDK(Java Development Kit) to develop Android app with react-native. Execute the command below to install JDK.
After installing, Execute the command below to check Java is installed well.
If Java is installed well via installing JDK, you can see Java version like below.
When JDK is installed, Java compiler is alo installed. Execute the command below to check Java compiler is also installed well.
If Java compiler is installed well via installing JDK, Java compiler version is shown up like below.
Android Studio
We need to install Android Studio to develop Android app with react-native. Click the link below to go to Android Studio site and download the installation file.
- Android Studio: https://developer.android.com/studio
After downloading, execute the installation file to execute Android Studio.
Android Studio Configuration
you can see the screen like below after executing Android Studio.
Click Next button to go to next screen. When you go to the next screen, you can see Install Type configuration screen. Select Custom option and click next button to go to next screen.
When you go to the next screen, you can see Select UI Theme screen like below. Select the theme which you like, and click Next button to go to the next screen.
When you go to the next screen, you can see SDK Components Setup screen like below. Select
Performance (Intel ® HAXM)
option and Android Virtual Device
option, and clic Next button.on the next screen, you can see Emulator Settings screen like below. Click Next button without any changing especially.
the next process is just normal program installation, so I don’t explain the detail. Just click Finish button to continue Android studio installation to complete it.
After Android studio installation, you can see Android studio is executed like below.
Android Studio SDK Configuration
Click
Configure > SDK Manger
menu on the right botton to go to Android SDK configuration.When the screen is shown up like below, select
Show Pacakge Details
option on the right bottom. find and select the options below on the list.- Android SDK Platform 28
- Intel x86 Atom System Image
- Google APIs Intel x86 Atom System Image
- Google APIs Intel x86 Atom_64 System Image
If you select all options above, click OK button on the right bottom to install them.
Configure Android Studio Environment Variable
Android studio installation and configuration are done. Now, we need to set the environment variables. open
~/.bash_profile
file or ~/.zshrc
file and add the code below to them to add the environment variables.If you use
.bash_profile
, execute the command below.on the code above, you should modify Android SDK directory location to your location. If you don’t know where your Android SDK location, go to the Android Studio SDK configuration.
you can find your Android SDK directory location at Android SDK Location section on the top of the Android studio SDK configuration screen.
After configuration, re-start the terminal and execute the command below.
If the environment variables are configured well, you can see the result like below.
Create & Check react-native Project
Sometimes, the react-native app is not working or can’t be built after updating the version. Therefore, it’s recommended to execute the npm command below to lock the version when you develop the app with react-native.
execute React Native CLI command below to create react-native project.
React Native Debugger Ui
Check on iOS
After creating, execute the command below to execute the react-native app on iOS.
If you can’t execute well, execute
ios/SampleApp.xcworkspace
file and select the simulator on the top of Xcode screen, and click the arrow button to execute the simulator.If the react-native app is executed well, you can see the screen like below.
Check on Android
In Android, execute the command below after connecting the device that the developer mode is activated via USB or executing Android studio emulator.
If you don’t have any problen, you can see the screen like below.
Completed
We’ve seen how to install and configure react-native to develop the app on Mac. Also, We’ve created the app by React Native CLI and executed it to check the environment is configured well.
Now, we are ready to develop the app with react-native. Let’s dive to the react-native development world!
Github Sponsor
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!