In practice, Expo consists of several elements. The main one is Expo CLI – a command line tool that you use to create and manage an Expo project. Another important element is Expo Go – a mobile application available on Google Play and the App Store that allows you to run and test the application you are creating without the need to build a native APK\/IPA file. All you have to do is scan the QR code generated by Expo CLI to see your application on your phone in seconds. Expo also offers services such as EAS (Expo Application Services), including EAS Build for building applications in the cloud and EAS Update for deploying updates over-the-air.<\/p>\n\n\n\n
Advantages of Expo:<\/strong><\/h2>\n\n\n\n\n- Low entry threshold<\/strong> \u2013 Expo is beginner-friendly and allows you to start working with React Native quickly.<\/li>\n\n\n\n
- Simple configuration<\/strong> \u2013 you don’t need to install Android Studio or Xcode to create an application. All you need is Node.js and Expo CLI.<\/li>\n\n\n\n
- A wide range of ready-made modules (Expo SDK)<\/strong> \u2013 you have immediate access to APIs such as camera, push notifications, location, accelerometer and others.<\/li>\n\n\n\n
- Rapid prototyping<\/strong> \u2013 you can focus on writing JavaScript\/React code instead of complicated native configuration.<\/li>\n\n\n\n
- Easy testing on devices<\/strong> \u2013 you can launch the application in no time thanks to Expo Go, without the need to build APK\/IPA files.<\/li>\n\n\n\n
- Automatic refresh (Fast Refresh)<\/strong> \u2013 changes in the code are immediately visible on the phone\/emulator, which speeds up development.<\/li>\n\n\n\n
- Support for OTA updates<\/strong> \u2013 thanks to Expo, you can update the application over-the-air without having to republish it in the stores.<\/li>\n<\/ul>\n\n\n\n
Disadvantages of Expo<\/h2>\n\n\n\n\n- Limited access to native modules<\/strong> \u2013 you do not have full control over native code in a managed workflow. Some libraries are not available in the standard Expo SDK.<\/li>\n\n\n\n
- No support for all native libraries<\/strong> \u2013 if your application requires specific native libraries that are not integrated with Expo, you may encounter difficulties.<\/li>\n\n\n\n
- Less flexibility<\/strong> \u2013 Expo has introduced config plugins<\/em> and development builds<\/em>, but using them involves additional configuration steps, and in some cases it may be necessary to switch to a bare workflow.<\/li>\n\n\n\n
- Larger app size<\/strong> \u2013 apps built in Expo tend to be larger than the same apps built in pure React Native because they contain code for unused Expo modules.<\/li>\n\n\n\n
- Potential impact on performance<\/strong> \u2013 a heavier app can result in slightly worse performance on older devices.<\/li>\n\n\n\n
- Different process of building a production app<\/strong> \u2013 you cannot use standard commands such as
gradlew assembleRelease<\/code> or Xcode Archive<\/code>. Expo requires the use of the EAS Build<\/strong> service.<\/li>\n\n\n\n- Costs of EAS Build<\/strong> \u2013 the free version allows a limited number of builds per month. The paid version can generate additional costs (from ~$1 to $4 per single build).<\/li>\n\n\n\n
- Local building requires additional steps<\/strong> \u2013 you can build the application locally (
eas build --local<\/code>), but then you lose some of the simplifications offered by Expo and the configuration becomes more similar to React Native CLI.<\/li>\n<\/ul>\n\n\n \n \n ![\"Looking](\"https:\/\/uniquedevs.com\/wp-content\/themes\/uniquedevs\/assets\/images\/boxes.webp\")
\n <\/div>\n \n ![\"Looking](\"https:\/\/uniquedevs.com\/wp-content\/themes\/uniquedevs\/assets\/images\/boxes-mobile.webp\")
\n <\/div>\n \n \n Looking for a mobile app contractor? <\/div>\n \n Contact us! <\/a>\n <\/div>\n <\/div>\n \n\n\nReact Native CLI \u2013 definition and use<\/h2>\n\n\n\n
React Native CLI is a traditional approach to React Native app development, using the React Native command line (react-native<\/code>) and manual configuration of the native environment. It is often referred to as a bare workflow to distinguish it from the Expo-managed workflow. When you initialize a project with the React Native CLI, you get a complete native Xcode project for iOS and an Android project (Gradle) for Android. This gives you full control over the native code of your app \u2013 you can modify the configuration of the native project, add your own Objective-C\/Swift or Java\/Kotlin files, and install any native libraries. In other words, the React Native CLI does not abstract<\/em> the native layer from you, which on the one hand ensures maximum flexibility, and on the other hand requires more knowledge and work during configuration.<\/p>\n\n\n\nAdvantages of React Native CLI:<\/h3>\n\n\n\n\n- Full control over native<\/strong> code \u2013 you can modify Android and iOS files without the limitations imposed by Expo.<\/li>\n\n\n\n
- No restrictions on the use of native<\/strong> libraries \u2013 you can use any native modules<\/em> libraries, even those that are not supported by Expo SDK.<\/li>\n\n\n\n
- Ability to create your own native modules<\/strong> \u2013 if standard solutions are not enough, you can write code in Java\/Kotlin (Android) or Objective-C\/Swift (iOS).<\/li>\n\n\n\n
- Better performance optimization<\/strong> \u2013 you have access to advanced build settings, e.g. Gradle and Xcode, which allows for better application optimization.<\/li>\n\n\n\n
- Smaller app size<\/strong> \u2013 only the code and libraries that are actually used end up in the project, resulting in smaller installation files and better performance.<\/li>\n\n\n\n
- Flexibility in app building<\/strong> \u2013 you can manually control the compilation processes (
gradlew assembleRelease<\/code>, Xcode Archive<\/code>) without having to use cloud services.<\/li>\n\n\n\n- Easier integration with existing native<\/strong> apps \u2013 if you want to add React Native to an existing iOS\/Android app, the CLI gives you complete freedom in integration.<\/li>\n\n\n\n
- Popularity in the business environment<\/strong> \u2013 large production applications are more likely to choose React Native CLI because it allows the project to be customized to meet non-standard customer requirements.<\/li>\n<\/ul>\n\n\n\n
Disadvantages of React Native CLI:<\/h3>\n\n\n\n\n- Complex initial setup<\/strong> \u2013 requires manual installation and configuration of the environment, including: Node.js, JDK (Java Development Kit) for Android, Android Studio (including Android SDK and emulators), Xcode (on macOS) and CocoaPods to handle iOS dependencies.<\/li>\n\n\n\n
- Long setup time<\/strong> \u2013 compared to Expo, the first project launch can take much longer, especially if the environment has not been configured before.<\/li>\n\n\n\n
- High learning curve<\/strong> \u2013 requires knowledge of Android\/iOS basics, which can be challenging for novice developers.<\/li>\n\n\n\n
- Hardware requirements<\/strong> \u2013 a Mac is required to develop iOS apps, and Android emulators may require powerful hardware.<\/li>\n\n\n\n
- Debugging issues<\/strong> \u2013 in case of errors, Gradle (Android) or Xcode (iOS) logs often need to be analyzed, which requires additional technical knowledge.<\/li>\n\n\n\n
- Manual configuration of native libraries<\/strong> \u2013 some libraries require you to manually add API keys, link dependencies or edit configuration files.<\/li>\n\n\n\n
- Longer startup time for a new application<\/strong> \u2013 you have to go through several additional configuration steps before you can see the first results of your work.<\/li>\n\n\n\n
- No ready-made solution for OTA updates<\/strong> \u2013 unlike Expo, which allows for easy implementation of over-the-air<\/em>updates, here you have to take care of this process yourself.<\/li>\n\n\n\n
- Dependence on native compilation processes<\/strong> \u2013 compiling a project can be time-consuming and prone to problems resulting from Android Studio or Xcode updates.<\/li>\n<\/ul>\n\n\n\n
Despite these difficulties, React Native CLI is irreplaceable when you need full control and scalability. Most large production applications are created in this mode \u2013 it ensures that you will not encounter limitations as the project grows and allows integration with native projects (e.g. joining React Native to an existing native application).<\/p>\n\n\n\n
See also: React Native vs Flutter<\/a>.<\/p>\n\n\n\nComparison of Expo and React Native CLI<\/h2>\n\n\n\n
Below, we present a comparison of the most important aspects of both approaches:<\/p>\n\n\n\nAspect<\/strong><\/th>Expo <\/strong><\/th>React Native CLI<\/strong><\/th><\/tr><\/thead><\/table><\/figure>\n\n\n\nEasy installation<\/strong><\/strong><\/td>Very high \u2013 only requires Node.js and the installation of Expo CLI. Get started quickly in a few minutes. Android Studio\/Xcode are not<\/em> required to get started.<\/td>Lower – requires installation and configuration of Android Studio (Android SDK, emulator) and on macOS also Xcode (iOS SDK). If you have no experience, the configuration can take ~1h.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nAccess to native modules<\/strong><\/strong><\/td>Limited to modules supported by Expo SDK. It is not possible to add your own native code without leaving the managed workflow (you must use the development build or eject). This can be a barrier to more complex projects.<\/td> Full access \u2013 you can use\u00a0any of<\/em>\u00a0the libraries and write your own native code. React Native CLI allows you to integrate any modules and platform-specific functions (camera, Bluetooth, payments, etc.) without imposed limitations.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nApp size (APK\/IPA)<\/strong><\/strong><\/td>Usually larger \u2013 the default Expo build contains many modules, even if not all of them are used, which increases the weight of the application. This can result in slower startup on weaker devices.\u00a0(Note: new Expo versions improve this aspect by excluding unused code during build)<\/em>.<\/td>Usually smaller \u2013 only what you consciously add ends up in the application. No overhead from unused Expo libraries. You can remove unnecessary dependencies and thus optimize the size and performance of the application.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nSupport for production applications<\/strong><\/strong><\/td>Yes,<\/strong>\u00a0but with some reservations. Expo is great for prototypes and less complex applications. For larger production applications, it is often necessary to use EAS Build to create the final files for iOS\/Android. Large companies use Expo less frequently, unless it fits their requirements \u2013 if necessary, you can still \u201ceject\u201d from Expo to bare workflow.<\/td>Yes,<\/strong>\u00a0React Native CLI is the standard approach for production applications. It is used by companies that want to have full control and optimization. Projects created with CLI are easier to integrate with existing native applications and continuous integrations (CI\/CD). In the long term, CLI is suitable for complex, commercial projects.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nPractical Expo installation<\/h2>\n\n\n\n
Let’s get down to business \u2013 below you will find instructions on how to install Expo and create and run a new React Native project with Expo.<\/p>\n\n\n\n
Steps to install and run an Expo project:<\/strong><\/p>\n\n\n\n1. Install Node.js<\/strong> \u2013 if you don’t have it yet, download the latest LTS version of Node.js from nodejs.org and install it. Expo requires Node.js to run its CLI.<\/p>\n\n\n\n2. Install Expo CLI<\/strong> \u2013 the best way is to use npx to run the create-expo-app<\/code>tool, which will create an Expo project. In the terminal, run the command:<\/p>\n\n\n\nnpx create-expo-app@latest AwesomeProject\n<\/code><\/pre>\n\n\n\nThe above command will create a new Expo project called \u201cAwesomeProject\u201d with default settings. Alternatively, you can install Expo CLI globally with the command npm install -g expo-cli<\/code> and then use expo init AwesomeProject<\/code> \u2013 the result will be similar. During initialization, Expo will ask you a few questions, including choosing a project template.<\/p>\n\n\n\n3. Select a template<\/strong> \u2013 Expo provides various starter templates. The most common choices are: blank (a clean project with one screen) and tabs (a project with a ready-made tab-bar navigation and several example screens). If you are just starting out, choose blank template<\/code> \u2013 you will get a minimal React Native application. The \u201cTabs\u201d<\/code> template already includes the React Navigation library and sample screens with a tab menu. You can also see the workflow option: managed<\/em> (default) or bare<\/em>. Make sure that the Managed workflow mode (i.e. standard Expo) is selected to be able to use all Expo facilities.<\/p>\n\n\n\n4. Install dependencies and start the project<\/strong> \u2013 once the project has been successfully created, go to the project folder and start the development server:<\/p>\n\n\n\ncd AwesomeProject\nnpm start # lub: expo start\n<\/code><\/pre>\n\n\n\nYou should see the Metro Bundler package running in the console and a message saying that the application is ready to connect. A QR code will also appear.<\/p>\n\n\n\n
5. Run the application on your device or emulator<\/strong> \u2013 now you can preview how the application works:<\/p>\n\n\n\n\n- On a physical device:<\/strong> Install the Expo Go<\/strong> application from the store (Google Play or App Store) on your phone. Make sure that your phone and computer are connected to the same Wi-Fi network. Scan the QR code displayed on the Expo terminal\/window with your phone camera \u2013 the Expo Go app will connect to your developer server and launch the app. Any saved changes to the code will automatically refresh the preview on your phone.<\/li>\n\n\n\n
- On an emulator\/simulator:<\/strong> If you have an Android emulator (AVD) or an iOS simulator installed, make sure it is running. In the terminal window with Metro Bundler, press the
a<\/code><\/strong> key to open the app on Android Emulator, or i<\/code><\/strong> to open on iOS Simulator (on macOS)<\/li>\n<\/ul>\n\n\n\nExpo CLI will automatically build a debug version and send it to the emulator. After a while, you should see the React Native splash screen (by default, this is the screen that says \u201cWelcome to React Native…\u201d).<\/p>\n\n\n\n
6. Modification and hot-reload:<\/strong> Now you can open the App.js<\/code> file in the editor, make changes (e.g. change the welcome text) and save. Expo will immediately reload the app on the device\/emulator, showing the changes you made thanks to the Fast Refresh<\/em> mechanism that is enabled by default.
Congratulations! Your Expo project is up and running. The whole process \u2013 from installation to seeing the app \u2013 is very fast and beginner-friendly. For more details, check out the official Expo documentation.<\/p>\n\n\n\nReact Native CLI installation<\/h2>\n\n\n\n
The React Native CLI approach is a little more time-consuming to set up. It requires you to install several tools and native dependencies, but it will allow you to build your app from scratch on your own computer. Instructions are below:<\/p>\n\n\n\n
Steps to set up and run a React Native CLI project:<\/h3>\n\n\n\n
1. Prepare the environment:<\/strong><\/p>\n\n\n\n\n- Node.js:<\/strong> Install Node.js (if you don’t have it already) – as with Expo, Node is required to manage JavaScript packages and run Metro Bundler.<\/li>\n\n\n\n
- JDK (Java Development Kit):<\/strong> Download and install JDK version 11 or higher (React Native currently recommends JDK 11 LTS). On Windows\/Mac, make sure that the
JAVA_HOME<\/code> environment variable points to the JDK installation directory.<\/li>\n\n\n\n- Android Studio (Android SDK):<\/strong> Install Android Studio \u2013 during installation, select the option to install the latest Android SDK and the AVD (Android Virtual Device) configurator, as you will need them to emulate the application on Android. After installing Android Studio, launch it once and go through the \u201cSDK Manager\u201d configurator to install Android platforms (e.g. Android 13\/API 33) and the \u201cAVD Manager\u201d to create a virtual device (e.g. Pixel 5 with Android). Additionally, add the path to the Android SDK tools (
platform-tools<\/code>) to the PATH<\/code> variableto be able to use the adb commands in the terminal.<\/li>\n\n\n\n- Xcode (macOS only, for iOS):<\/strong> If you are using a Mac and plan to develop iOS apps, install the latest Xcode from the Mac App Store. After installation, open Xcode and install additional tools (you may be prompted to install command line tools). Also install the CocoaPods<\/strong> tool (
sudo gem install cocoapods<\/code> in Terminal), which you will need to manage iOS libraries. Note: on Windows\/Linux, it is not possible to<\/strong> build or run a native iOS application \u2013 macOS is required for this.<\/li>\n\n\n\n- React Native CLI:<\/strong> You don’t need to install anything separately \u2013 React Native has a built-in CLI tool. We will use it through
npx<\/code>, which will always launch the latest version of the CLI.<\/li>\n<\/ul>\n\n\n\n2. Create a new React Native project:<\/strong> Once you have configured the above, you can create a project. Use the following command in Terminal\/Powershell:<\/p>\n\n\n\nnpx react-native init MyProject\n<\/code><\/pre>\n\n\n\nwhere \u201cMyProject\u201d is the name of your app. This command will generate a directory structure with a sample app (containing the App.js<\/code> component with a simple splash screen). With npx<\/code> you always use the current version of the React Native CLI \u2013 there is no need to install the global react-native-cli<\/code>package. After a few minutes (depending on the speed of your internet connection and computer), the project will be created.<\/p>\n\n\n\n3. Run Metro Bundler:<\/strong> Go to the project folder: cd MyProject<\/code>. Then (preferably in a separate terminal window) run the Metro server:<\/p>\n\n\n\nnpx react-native start\n<\/code><\/pre>\n\n\n\nMetro Bundler is a server that will be responsible for delivering the JavaScript package to your application. It should start on the default port 8081 and listen for code changes.
(Note: Many commands, such as run-android\/run-ios, automatically start Metro, so you can skip this step – however, it is recommended to have a separate window with Metro to follow any JavaScript error logs).<\/p>\n\n\n\n
4. Run the Android app:<\/strong> Make sure you have the Android emulator (AVD) running or<\/strong> a physical phone connected with USB debugging enabled. Then, in the project’s main directory, execute the command:<\/p>\n\n\n\nnpx react-native run-android\n<\/code><\/pre>\n\n\n\nThis will build the Android application and install it on the emulator\/device. The first time it is run, Gradle will download all the necessary dependencies, which may take a few minutes. If everything is configured correctly, after compilation you will see the MyProject<\/strong> application screen on the emulator (as in Expo, by default it is the React Native welcome screen)<\/p>\n\n\n\nIf there are any errors, check the console messages \u2013 the most common problems are that the emulator is not running or that the SDK licenses have not been accepted (if necessary, run Android Studio, which will tell you how to accept the licenses). After a successful launch, Metro Bundler will start transferring the JavaScript code to the app.<\/p>\n\n\n\n
5. Run the app on iOS (macOS):<\/strong> If you are working on a Mac, you can run the app on the iOS Simulator. Make sure you have the simulator open (e.g. iPhone 14). In the project directory, do the following:<\/p>\n\n\n\nnpx react-native run-ios\n<\/code><\/pre>\n\n\n\nThis command will open the iOS project in Xcode, build it and run it in the simulator. The first run will also automatically install dependencies via CocoaPods (this may take a while). After a while, you should see the app on the virtual iPhone. If something goes wrong, make sure that Xcode has been installed and updated and that the simulator is configured correctly. (Alternatively, you can run the iOS application manually by opening the .xcworkspace<\/code> project in Xcode and clicking \u201cRun\u201d, which sometimes gives a better insight into errors).<\/p>\n\n\n\n6. Edit the code and use Fast Refresh:<\/strong> Open the App.js<\/code> file in your CLI project and change the header text, for example. Then save the file – on the emulator\/phone you will see that the application will automatically reload, presenting the changes you made (thanks to the Fast Refresh mechanism, which works here similarly to Expo). In case of more significant native changes (e.g. adding a new native library), it may be necessary to rebuild the application.<\/p>\n\n\n\nNow you have a React Native project running that was created using the CLI. From this point on, you can build your app, add libraries via npm\/yarn<\/code> and fully develop your project. Please note that you can find more detailed information (e.g. about generating APK\/IPA release files, configuring app signatures, etc.) in the React Native<\/a> documentation.<\/p>\n\n\n\nWhich solution should I choose?<\/h2>\n\n\n\n
The choice between Expo and React Native CLI depends on your level of experience and the specifics of the project you want to work on. Below you will find recommendations tailored to different user groups:<\/p>\n\n\n\n
For beginners<\/h3>\n\n\n\n
If you are just starting out with React Native or mobile development in general, Expo might be a better choice to start with. It allows you to avoid the hassle of setting up a native environment and focus on writing code in JavaScript\/React right away. Expo offers a smoother introduction \u2013 quick prototyping and previewing how the application works without the frustration of Gradle or Xcode configuration. In practice, many tutorials for beginners recommend Expo as a first step. Expo will also work if you want to quickly prepare a simple project or prototype \u2013 e.g. for the purpose of demonstrating an idea or a project for your studies. The managed workflow means you don’t have to worry about the details – for example, adding camera support or localization comes down to installing an Expo package (expo-camera<\/code>, expo-location<\/code>) and using it right away, without fiddling with native configuration files. In addition, the Expo community and excellent documentation will help you at the beginning of your journey – if you encounter a problem, you are probably not the first person to have it, and the Expo forums are full of tips.<\/p>\n\n\n\nFor intermediate users<\/h3>\n\n\n\n
If you have already taken your first steps and are starting to feel more confident with React Native, the answer to the question \u201cExpo or CLI?\u201d is: it depends on the needs of the project. You can continue to use Expo, especially if the project does not require unusual native functionalities. Expo has evolved a lot in recent years and even some quite complex applications can be developed in it without limitations. However, it is worth assessing whether you are approaching the limits of Expo’s capabilities. If you know that you will need, for example, integration with a native SDK from a manufacturer (which is not in Expo) in your project, or you want to optimize size and performance as much as possible, it may be a signal to consider switching to React Native CLI. A good strategy is to start development in Expo (for speed) and possibly \u201ceject\u201d to bare workflow when Expo starts to limit you.<\/p>\n\n\n\n
Disadvantages of Expo<\/h2>\n\n\n\n\n- Limited access to native modules<\/strong> \u2013 you do not have full control over native code in a managed workflow. Some libraries are not available in the standard Expo SDK.<\/li>\n\n\n\n
- No support for all native libraries<\/strong> \u2013 if your application requires specific native libraries that are not integrated with Expo, you may encounter difficulties.<\/li>\n\n\n\n
- Less flexibility<\/strong> \u2013 Expo has introduced config plugins<\/em> and development builds<\/em>, but using them involves additional configuration steps, and in some cases it may be necessary to switch to a bare workflow.<\/li>\n\n\n\n
- Larger app size<\/strong> \u2013 apps built in Expo tend to be larger than the same apps built in pure React Native because they contain code for unused Expo modules.<\/li>\n\n\n\n
- Potential impact on performance<\/strong> \u2013 a heavier app can result in slightly worse performance on older devices.<\/li>\n\n\n\n
- Different process of building a production app<\/strong> \u2013 you cannot use standard commands such as
gradlew assembleRelease<\/code> or Xcode Archive<\/code>. Expo requires the use of the EAS Build<\/strong> service.<\/li>\n\n\n\n- Costs of EAS Build<\/strong> \u2013 the free version allows a limited number of builds per month. The paid version can generate additional costs (from ~$1 to $4 per single build).<\/li>\n\n\n\n
- Local building requires additional steps<\/strong> \u2013 you can build the application locally (
eas build --local<\/code>), but then you lose some of the simplifications offered by Expo and the configuration becomes more similar to React Native CLI.<\/li>\n<\/ul>\n\n\n \n \n \n <\/div>\n \n \n <\/div>\n \n \n Looking for a mobile app contractor? <\/div>\n \n Contact us! <\/a>\n <\/div>\n <\/div>\n \n\n\nReact Native CLI \u2013 definition and use<\/h2>\n\n\n\n
React Native CLI is a traditional approach to React Native app development, using the React Native command line (react-native<\/code>) and manual configuration of the native environment. It is often referred to as a bare workflow to distinguish it from the Expo-managed workflow. When you initialize a project with the React Native CLI, you get a complete native Xcode project for iOS and an Android project (Gradle) for Android. This gives you full control over the native code of your app \u2013 you can modify the configuration of the native project, add your own Objective-C\/Swift or Java\/Kotlin files, and install any native libraries. In other words, the React Native CLI does not abstract<\/em> the native layer from you, which on the one hand ensures maximum flexibility, and on the other hand requires more knowledge and work during configuration.<\/p>\n\n\n\nAdvantages of React Native CLI:<\/h3>\n\n\n\n\n- Full control over native<\/strong> code \u2013 you can modify Android and iOS files without the limitations imposed by Expo.<\/li>\n\n\n\n
- No restrictions on the use of native<\/strong> libraries \u2013 you can use any native modules<\/em> libraries, even those that are not supported by Expo SDK.<\/li>\n\n\n\n
- Ability to create your own native modules<\/strong> \u2013 if standard solutions are not enough, you can write code in Java\/Kotlin (Android) or Objective-C\/Swift (iOS).<\/li>\n\n\n\n
- Better performance optimization<\/strong> \u2013 you have access to advanced build settings, e.g. Gradle and Xcode, which allows for better application optimization.<\/li>\n\n\n\n
- Smaller app size<\/strong> \u2013 only the code and libraries that are actually used end up in the project, resulting in smaller installation files and better performance.<\/li>\n\n\n\n
- Flexibility in app building<\/strong> \u2013 you can manually control the compilation processes (
gradlew assembleRelease<\/code>, Xcode Archive<\/code>) without having to use cloud services.<\/li>\n\n\n\n- Easier integration with existing native<\/strong> apps \u2013 if you want to add React Native to an existing iOS\/Android app, the CLI gives you complete freedom in integration.<\/li>\n\n\n\n
- Popularity in the business environment<\/strong> \u2013 large production applications are more likely to choose React Native CLI because it allows the project to be customized to meet non-standard customer requirements.<\/li>\n<\/ul>\n\n\n\n
Disadvantages of React Native CLI:<\/h3>\n\n\n\n\n- Complex initial setup<\/strong> \u2013 requires manual installation and configuration of the environment, including: Node.js, JDK (Java Development Kit) for Android, Android Studio (including Android SDK and emulators), Xcode (on macOS) and CocoaPods to handle iOS dependencies.<\/li>\n\n\n\n
- Long setup time<\/strong> \u2013 compared to Expo, the first project launch can take much longer, especially if the environment has not been configured before.<\/li>\n\n\n\n
- High learning curve<\/strong> \u2013 requires knowledge of Android\/iOS basics, which can be challenging for novice developers.<\/li>\n\n\n\n
- Hardware requirements<\/strong> \u2013 a Mac is required to develop iOS apps, and Android emulators may require powerful hardware.<\/li>\n\n\n\n
- Debugging issues<\/strong> \u2013 in case of errors, Gradle (Android) or Xcode (iOS) logs often need to be analyzed, which requires additional technical knowledge.<\/li>\n\n\n\n
- Manual configuration of native libraries<\/strong> \u2013 some libraries require you to manually add API keys, link dependencies or edit configuration files.<\/li>\n\n\n\n
- Longer startup time for a new application<\/strong> \u2013 you have to go through several additional configuration steps before you can see the first results of your work.<\/li>\n\n\n\n
- No ready-made solution for OTA updates<\/strong> \u2013 unlike Expo, which allows for easy implementation of over-the-air<\/em>updates, here you have to take care of this process yourself.<\/li>\n\n\n\n
- Dependence on native compilation processes<\/strong> \u2013 compiling a project can be time-consuming and prone to problems resulting from Android Studio or Xcode updates.<\/li>\n<\/ul>\n\n\n\n
Despite these difficulties, React Native CLI is irreplaceable when you need full control and scalability. Most large production applications are created in this mode \u2013 it ensures that you will not encounter limitations as the project grows and allows integration with native projects (e.g. joining React Native to an existing native application).<\/p>\n\n\n\n
See also: React Native vs Flutter<\/a>.<\/p>\n\n\n\nComparison of Expo and React Native CLI<\/h2>\n\n\n\n
Below, we present a comparison of the most important aspects of both approaches:<\/p>\n\n\n\nAspect<\/strong><\/th>Expo <\/strong><\/th>React Native CLI<\/strong><\/th><\/tr><\/thead><\/table><\/figure>\n\n\n\nEasy installation<\/strong><\/strong><\/td>Very high \u2013 only requires Node.js and the installation of Expo CLI. Get started quickly in a few minutes. Android Studio\/Xcode are not<\/em> required to get started.<\/td>Lower – requires installation and configuration of Android Studio (Android SDK, emulator) and on macOS also Xcode (iOS SDK). If you have no experience, the configuration can take ~1h.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nAccess to native modules<\/strong><\/strong><\/td>Limited to modules supported by Expo SDK. It is not possible to add your own native code without leaving the managed workflow (you must use the development build or eject). This can be a barrier to more complex projects.<\/td> Full access \u2013 you can use\u00a0any of<\/em>\u00a0the libraries and write your own native code. React Native CLI allows you to integrate any modules and platform-specific functions (camera, Bluetooth, payments, etc.) without imposed limitations.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nApp size (APK\/IPA)<\/strong><\/strong><\/td>Usually larger \u2013 the default Expo build contains many modules, even if not all of them are used, which increases the weight of the application. This can result in slower startup on weaker devices.\u00a0(Note: new Expo versions improve this aspect by excluding unused code during build)<\/em>.<\/td>Usually smaller \u2013 only what you consciously add ends up in the application. No overhead from unused Expo libraries. You can remove unnecessary dependencies and thus optimize the size and performance of the application.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nSupport for production applications<\/strong><\/strong><\/td>Yes,<\/strong>\u00a0but with some reservations. Expo is great for prototypes and less complex applications. For larger production applications, it is often necessary to use EAS Build to create the final files for iOS\/Android. Large companies use Expo less frequently, unless it fits their requirements \u2013 if necessary, you can still \u201ceject\u201d from Expo to bare workflow.<\/td>Yes,<\/strong>\u00a0React Native CLI is the standard approach for production applications. It is used by companies that want to have full control and optimization. Projects created with CLI are easier to integrate with existing native applications and continuous integrations (CI\/CD). In the long term, CLI is suitable for complex, commercial projects.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nPractical Expo installation<\/h2>\n\n\n\n
Let’s get down to business \u2013 below you will find instructions on how to install Expo and create and run a new React Native project with Expo.<\/p>\n\n\n\n
Steps to install and run an Expo project:<\/strong><\/p>\n\n\n\n1. Install Node.js<\/strong> \u2013 if you don’t have it yet, download the latest LTS version of Node.js from nodejs.org and install it. Expo requires Node.js to run its CLI.<\/p>\n\n\n\n2. Install Expo CLI<\/strong> \u2013 the best way is to use npx to run the create-expo-app<\/code>tool, which will create an Expo project. In the terminal, run the command:<\/p>\n\n\n\nnpx create-expo-app@latest AwesomeProject\n<\/code><\/pre>\n\n\n\nThe above command will create a new Expo project called \u201cAwesomeProject\u201d with default settings. Alternatively, you can install Expo CLI globally with the command npm install -g expo-cli<\/code> and then use expo init AwesomeProject<\/code> \u2013 the result will be similar. During initialization, Expo will ask you a few questions, including choosing a project template.<\/p>\n\n\n\n3. Select a template<\/strong> \u2013 Expo provides various starter templates. The most common choices are: blank (a clean project with one screen) and tabs (a project with a ready-made tab-bar navigation and several example screens). If you are just starting out, choose blank template<\/code> \u2013 you will get a minimal React Native application. The \u201cTabs\u201d<\/code> template already includes the React Navigation library and sample screens with a tab menu. You can also see the workflow option: managed<\/em> (default) or bare<\/em>. Make sure that the Managed workflow mode (i.e. standard Expo) is selected to be able to use all Expo facilities.<\/p>\n\n\n\n4. Install dependencies and start the project<\/strong> \u2013 once the project has been successfully created, go to the project folder and start the development server:<\/p>\n\n\n\ncd AwesomeProject\nnpm start # lub: expo start\n<\/code><\/pre>\n\n\n\nYou should see the Metro Bundler package running in the console and a message saying that the application is ready to connect. A QR code will also appear.<\/p>\n\n\n\n
5. Run the application on your device or emulator<\/strong> \u2013 now you can preview how the application works:<\/p>\n\n\n\n\n- On a physical device:<\/strong> Install the Expo Go<\/strong> application from the store (Google Play or App Store) on your phone. Make sure that your phone and computer are connected to the same Wi-Fi network. Scan the QR code displayed on the Expo terminal\/window with your phone camera \u2013 the Expo Go app will connect to your developer server and launch the app. Any saved changes to the code will automatically refresh the preview on your phone.<\/li>\n\n\n\n
- On an emulator\/simulator:<\/strong> If you have an Android emulator (AVD) or an iOS simulator installed, make sure it is running. In the terminal window with Metro Bundler, press the
a<\/code><\/strong> key to open the app on Android Emulator, or i<\/code><\/strong> to open on iOS Simulator (on macOS)<\/li>\n<\/ul>\n\n\n\nExpo CLI will automatically build a debug version and send it to the emulator. After a while, you should see the React Native splash screen (by default, this is the screen that says \u201cWelcome to React Native…\u201d).<\/p>\n\n\n\n
6. Modification and hot-reload:<\/strong> Now you can open the App.js<\/code> file in the editor, make changes (e.g. change the welcome text) and save. Expo will immediately reload the app on the device\/emulator, showing the changes you made thanks to the Fast Refresh<\/em> mechanism that is enabled by default.
Congratulations! Your Expo project is up and running. The whole process \u2013 from installation to seeing the app \u2013 is very fast and beginner-friendly. For more details, check out the official Expo documentation.<\/p>\n\n\n\nReact Native CLI installation<\/h2>\n\n\n\n
The React Native CLI approach is a little more time-consuming to set up. It requires you to install several tools and native dependencies, but it will allow you to build your app from scratch on your own computer. Instructions are below:<\/p>\n\n\n\n
Steps to set up and run a React Native CLI project:<\/h3>\n\n\n\n
1. Prepare the environment:<\/strong><\/p>\n\n\n\n\n- Node.js:<\/strong> Install Node.js (if you don’t have it already) – as with Expo, Node is required to manage JavaScript packages and run Metro Bundler.<\/li>\n\n\n\n
- JDK (Java Development Kit):<\/strong> Download and install JDK version 11 or higher (React Native currently recommends JDK 11 LTS). On Windows\/Mac, make sure that the
JAVA_HOME<\/code> environment variable points to the JDK installation directory.<\/li>\n\n\n\n- Android Studio (Android SDK):<\/strong> Install Android Studio \u2013 during installation, select the option to install the latest Android SDK and the AVD (Android Virtual Device) configurator, as you will need them to emulate the application on Android. After installing Android Studio, launch it once and go through the \u201cSDK Manager\u201d configurator to install Android platforms (e.g. Android 13\/API 33) and the \u201cAVD Manager\u201d to create a virtual device (e.g. Pixel 5 with Android). Additionally, add the path to the Android SDK tools (
platform-tools<\/code>) to the PATH<\/code> variableto be able to use the adb commands in the terminal.<\/li>\n\n\n\n- Xcode (macOS only, for iOS):<\/strong> If you are using a Mac and plan to develop iOS apps, install the latest Xcode from the Mac App Store. After installation, open Xcode and install additional tools (you may be prompted to install command line tools). Also install the CocoaPods<\/strong> tool (
sudo gem install cocoapods<\/code> in Terminal), which you will need to manage iOS libraries. Note: on Windows\/Linux, it is not possible to<\/strong> build or run a native iOS application \u2013 macOS is required for this.<\/li>\n\n\n\n- React Native CLI:<\/strong> You don’t need to install anything separately \u2013 React Native has a built-in CLI tool. We will use it through
npx<\/code>, which will always launch the latest version of the CLI.<\/li>\n<\/ul>\n\n\n\n2. Create a new React Native project:<\/strong> Once you have configured the above, you can create a project. Use the following command in Terminal\/Powershell:<\/p>\n\n\n\nnpx react-native init MyProject\n<\/code><\/pre>\n\n\n\nwhere \u201cMyProject\u201d is the name of your app. This command will generate a directory structure with a sample app (containing the App.js<\/code> component with a simple splash screen). With npx<\/code> you always use the current version of the React Native CLI \u2013 there is no need to install the global react-native-cli<\/code>package. After a few minutes (depending on the speed of your internet connection and computer), the project will be created.<\/p>\n\n\n\n3. Run Metro Bundler:<\/strong> Go to the project folder: cd MyProject<\/code>. Then (preferably in a separate terminal window) run the Metro server:<\/p>\n\n\n\nnpx react-native start\n<\/code><\/pre>\n\n\n\nMetro Bundler is a server that will be responsible for delivering the JavaScript package to your application. It should start on the default port 8081 and listen for code changes.
(Note: Many commands, such as run-android\/run-ios, automatically start Metro, so you can skip this step – however, it is recommended to have a separate window with Metro to follow any JavaScript error logs).<\/p>\n\n\n\n
4. Run the Android app:<\/strong> Make sure you have the Android emulator (AVD) running or<\/strong> a physical phone connected with USB debugging enabled. Then, in the project’s main directory, execute the command:<\/p>\n\n\n\nnpx react-native run-android\n<\/code><\/pre>\n\n\n\nThis will build the Android application and install it on the emulator\/device. The first time it is run, Gradle will download all the necessary dependencies, which may take a few minutes. If everything is configured correctly, after compilation you will see the MyProject<\/strong> application screen on the emulator (as in Expo, by default it is the React Native welcome screen)<\/p>\n\n\n\nIf there are any errors, check the console messages \u2013 the most common problems are that the emulator is not running or that the SDK licenses have not been accepted (if necessary, run Android Studio, which will tell you how to accept the licenses). After a successful launch, Metro Bundler will start transferring the JavaScript code to the app.<\/p>\n\n\n\n
5. Run the app on iOS (macOS):<\/strong> If you are working on a Mac, you can run the app on the iOS Simulator. Make sure you have the simulator open (e.g. iPhone 14). In the project directory, do the following:<\/p>\n\n\n\nnpx react-native run-ios\n<\/code><\/pre>\n\n\n\nThis command will open the iOS project in Xcode, build it and run it in the simulator. The first run will also automatically install dependencies via CocoaPods (this may take a while). After a while, you should see the app on the virtual iPhone. If something goes wrong, make sure that Xcode has been installed and updated and that the simulator is configured correctly. (Alternatively, you can run the iOS application manually by opening the .xcworkspace<\/code> project in Xcode and clicking \u201cRun\u201d, which sometimes gives a better insight into errors).<\/p>\n\n\n\n6. Edit the code and use Fast Refresh:<\/strong> Open the App.js<\/code> file in your CLI project and change the header text, for example. Then save the file – on the emulator\/phone you will see that the application will automatically reload, presenting the changes you made (thanks to the Fast Refresh mechanism, which works here similarly to Expo). In case of more significant native changes (e.g. adding a new native library), it may be necessary to rebuild the application.<\/p>\n\n\n\nNow you have a React Native project running that was created using the CLI. From this point on, you can build your app, add libraries via npm\/yarn<\/code> and fully develop your project. Please note that you can find more detailed information (e.g. about generating APK\/IPA release files, configuring app signatures, etc.) in the React Native<\/a> documentation.<\/p>\n\n\n\nWhich solution should I choose?<\/h2>\n\n\n\n
The choice between Expo and React Native CLI depends on your level of experience and the specifics of the project you want to work on. Below you will find recommendations tailored to different user groups:<\/p>\n\n\n\n
For beginners<\/h3>\n\n\n\n
If you are just starting out with React Native or mobile development in general, Expo might be a better choice to start with. It allows you to avoid the hassle of setting up a native environment and focus on writing code in JavaScript\/React right away. Expo offers a smoother introduction \u2013 quick prototyping and previewing how the application works without the frustration of Gradle or Xcode configuration. In practice, many tutorials for beginners recommend Expo as a first step. Expo will also work if you want to quickly prepare a simple project or prototype \u2013 e.g. for the purpose of demonstrating an idea or a project for your studies. The managed workflow means you don’t have to worry about the details – for example, adding camera support or localization comes down to installing an Expo package (expo-camera<\/code>, expo-location<\/code>) and using it right away, without fiddling with native configuration files. In addition, the Expo community and excellent documentation will help you at the beginning of your journey – if you encounter a problem, you are probably not the first person to have it, and the Expo forums are full of tips.<\/p>\n\n\n\nFor intermediate users<\/h3>\n\n\n\n
If you have already taken your first steps and are starting to feel more confident with React Native, the answer to the question \u201cExpo or CLI?\u201d is: it depends on the needs of the project. You can continue to use Expo, especially if the project does not require unusual native functionalities. Expo has evolved a lot in recent years and even some quite complex applications can be developed in it without limitations. However, it is worth assessing whether you are approaching the limits of Expo’s capabilities. If you know that you will need, for example, integration with a native SDK from a manufacturer (which is not in Expo) in your project, or you want to optimize size and performance as much as possible, it may be a signal to consider switching to React Native CLI. A good strategy is to start development in Expo (for speed) and possibly \u201ceject\u201d to bare workflow when Expo starts to limit you.<\/p>\n\n\n\n
gradlew assembleRelease<\/code> or Xcode Archive<\/code>. Expo requires the use of the EAS Build<\/strong> service.<\/li>\n\n\n\n- Costs of EAS Build<\/strong> \u2013 the free version allows a limited number of builds per month. The paid version can generate additional costs (from ~$1 to $4 per single build).<\/li>\n\n\n\n
- Local building requires additional steps<\/strong> \u2013 you can build the application locally (
eas build --local<\/code>), but then you lose some of the simplifications offered by Expo and the configuration becomes more similar to React Native CLI.<\/li>\n<\/ul>\n\n\n \n \n \n <\/div>\n \n \n <\/div>\n \n \n Looking for a mobile app contractor? <\/div>\n \n Contact us! <\/a>\n <\/div>\n <\/div>\n \n\n\nReact Native CLI \u2013 definition and use<\/h2>\n\n\n\n
React Native CLI is a traditional approach to React Native app development, using the React Native command line (react-native<\/code>) and manual configuration of the native environment. It is often referred to as a bare workflow to distinguish it from the Expo-managed workflow. When you initialize a project with the React Native CLI, you get a complete native Xcode project for iOS and an Android project (Gradle) for Android. This gives you full control over the native code of your app \u2013 you can modify the configuration of the native project, add your own Objective-C\/Swift or Java\/Kotlin files, and install any native libraries. In other words, the React Native CLI does not abstract<\/em> the native layer from you, which on the one hand ensures maximum flexibility, and on the other hand requires more knowledge and work during configuration.<\/p>\n\n\n\nAdvantages of React Native CLI:<\/h3>\n\n\n\n\n- Full control over native<\/strong> code \u2013 you can modify Android and iOS files without the limitations imposed by Expo.<\/li>\n\n\n\n
- No restrictions on the use of native<\/strong> libraries \u2013 you can use any native modules<\/em> libraries, even those that are not supported by Expo SDK.<\/li>\n\n\n\n
- Ability to create your own native modules<\/strong> \u2013 if standard solutions are not enough, you can write code in Java\/Kotlin (Android) or Objective-C\/Swift (iOS).<\/li>\n\n\n\n
- Better performance optimization<\/strong> \u2013 you have access to advanced build settings, e.g. Gradle and Xcode, which allows for better application optimization.<\/li>\n\n\n\n
- Smaller app size<\/strong> \u2013 only the code and libraries that are actually used end up in the project, resulting in smaller installation files and better performance.<\/li>\n\n\n\n
- Flexibility in app building<\/strong> \u2013 you can manually control the compilation processes (
gradlew assembleRelease<\/code>, Xcode Archive<\/code>) without having to use cloud services.<\/li>\n\n\n\n- Easier integration with existing native<\/strong> apps \u2013 if you want to add React Native to an existing iOS\/Android app, the CLI gives you complete freedom in integration.<\/li>\n\n\n\n
- Popularity in the business environment<\/strong> \u2013 large production applications are more likely to choose React Native CLI because it allows the project to be customized to meet non-standard customer requirements.<\/li>\n<\/ul>\n\n\n\n
Disadvantages of React Native CLI:<\/h3>\n\n\n\n\n- Complex initial setup<\/strong> \u2013 requires manual installation and configuration of the environment, including: Node.js, JDK (Java Development Kit) for Android, Android Studio (including Android SDK and emulators), Xcode (on macOS) and CocoaPods to handle iOS dependencies.<\/li>\n\n\n\n
- Long setup time<\/strong> \u2013 compared to Expo, the first project launch can take much longer, especially if the environment has not been configured before.<\/li>\n\n\n\n
- High learning curve<\/strong> \u2013 requires knowledge of Android\/iOS basics, which can be challenging for novice developers.<\/li>\n\n\n\n
- Hardware requirements<\/strong> \u2013 a Mac is required to develop iOS apps, and Android emulators may require powerful hardware.<\/li>\n\n\n\n
- Debugging issues<\/strong> \u2013 in case of errors, Gradle (Android) or Xcode (iOS) logs often need to be analyzed, which requires additional technical knowledge.<\/li>\n\n\n\n
- Manual configuration of native libraries<\/strong> \u2013 some libraries require you to manually add API keys, link dependencies or edit configuration files.<\/li>\n\n\n\n
- Longer startup time for a new application<\/strong> \u2013 you have to go through several additional configuration steps before you can see the first results of your work.<\/li>\n\n\n\n
- No ready-made solution for OTA updates<\/strong> \u2013 unlike Expo, which allows for easy implementation of over-the-air<\/em>updates, here you have to take care of this process yourself.<\/li>\n\n\n\n
- Dependence on native compilation processes<\/strong> \u2013 compiling a project can be time-consuming and prone to problems resulting from Android Studio or Xcode updates.<\/li>\n<\/ul>\n\n\n\n
Despite these difficulties, React Native CLI is irreplaceable when you need full control and scalability. Most large production applications are created in this mode \u2013 it ensures that you will not encounter limitations as the project grows and allows integration with native projects (e.g. joining React Native to an existing native application).<\/p>\n\n\n\n
See also: React Native vs Flutter<\/a>.<\/p>\n\n\n\nComparison of Expo and React Native CLI<\/h2>\n\n\n\n
Below, we present a comparison of the most important aspects of both approaches:<\/p>\n\n\n\nAspect<\/strong><\/th>Expo <\/strong><\/th>React Native CLI<\/strong><\/th><\/tr><\/thead><\/table><\/figure>\n\n\n\nEasy installation<\/strong><\/strong><\/td>Very high \u2013 only requires Node.js and the installation of Expo CLI. Get started quickly in a few minutes. Android Studio\/Xcode are not<\/em> required to get started.<\/td>Lower – requires installation and configuration of Android Studio (Android SDK, emulator) and on macOS also Xcode (iOS SDK). If you have no experience, the configuration can take ~1h.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nAccess to native modules<\/strong><\/strong><\/td>Limited to modules supported by Expo SDK. It is not possible to add your own native code without leaving the managed workflow (you must use the development build or eject). This can be a barrier to more complex projects.<\/td> Full access \u2013 you can use\u00a0any of<\/em>\u00a0the libraries and write your own native code. React Native CLI allows you to integrate any modules and platform-specific functions (camera, Bluetooth, payments, etc.) without imposed limitations.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nApp size (APK\/IPA)<\/strong><\/strong><\/td>Usually larger \u2013 the default Expo build contains many modules, even if not all of them are used, which increases the weight of the application. This can result in slower startup on weaker devices.\u00a0(Note: new Expo versions improve this aspect by excluding unused code during build)<\/em>.<\/td>Usually smaller \u2013 only what you consciously add ends up in the application. No overhead from unused Expo libraries. You can remove unnecessary dependencies and thus optimize the size and performance of the application.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nSupport for production applications<\/strong><\/strong><\/td>Yes,<\/strong>\u00a0but with some reservations. Expo is great for prototypes and less complex applications. For larger production applications, it is often necessary to use EAS Build to create the final files for iOS\/Android. Large companies use Expo less frequently, unless it fits their requirements \u2013 if necessary, you can still \u201ceject\u201d from Expo to bare workflow.<\/td>Yes,<\/strong>\u00a0React Native CLI is the standard approach for production applications. It is used by companies that want to have full control and optimization. Projects created with CLI are easier to integrate with existing native applications and continuous integrations (CI\/CD). In the long term, CLI is suitable for complex, commercial projects.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nPractical Expo installation<\/h2>\n\n\n\n
Let’s get down to business \u2013 below you will find instructions on how to install Expo and create and run a new React Native project with Expo.<\/p>\n\n\n\n
Steps to install and run an Expo project:<\/strong><\/p>\n\n\n\n1. Install Node.js<\/strong> \u2013 if you don’t have it yet, download the latest LTS version of Node.js from nodejs.org and install it. Expo requires Node.js to run its CLI.<\/p>\n\n\n\n2. Install Expo CLI<\/strong> \u2013 the best way is to use npx to run the create-expo-app<\/code>tool, which will create an Expo project. In the terminal, run the command:<\/p>\n\n\n\nnpx create-expo-app@latest AwesomeProject\n<\/code><\/pre>\n\n\n\nThe above command will create a new Expo project called \u201cAwesomeProject\u201d with default settings. Alternatively, you can install Expo CLI globally with the command npm install -g expo-cli<\/code> and then use expo init AwesomeProject<\/code> \u2013 the result will be similar. During initialization, Expo will ask you a few questions, including choosing a project template.<\/p>\n\n\n\n3. Select a template<\/strong> \u2013 Expo provides various starter templates. The most common choices are: blank (a clean project with one screen) and tabs (a project with a ready-made tab-bar navigation and several example screens). If you are just starting out, choose blank template<\/code> \u2013 you will get a minimal React Native application. The \u201cTabs\u201d<\/code> template already includes the React Navigation library and sample screens with a tab menu. You can also see the workflow option: managed<\/em> (default) or bare<\/em>. Make sure that the Managed workflow mode (i.e. standard Expo) is selected to be able to use all Expo facilities.<\/p>\n\n\n\n4. Install dependencies and start the project<\/strong> \u2013 once the project has been successfully created, go to the project folder and start the development server:<\/p>\n\n\n\ncd AwesomeProject\nnpm start # lub: expo start\n<\/code><\/pre>\n\n\n\nYou should see the Metro Bundler package running in the console and a message saying that the application is ready to connect. A QR code will also appear.<\/p>\n\n\n\n
5. Run the application on your device or emulator<\/strong> \u2013 now you can preview how the application works:<\/p>\n\n\n\n\n- On a physical device:<\/strong> Install the Expo Go<\/strong> application from the store (Google Play or App Store) on your phone. Make sure that your phone and computer are connected to the same Wi-Fi network. Scan the QR code displayed on the Expo terminal\/window with your phone camera \u2013 the Expo Go app will connect to your developer server and launch the app. Any saved changes to the code will automatically refresh the preview on your phone.<\/li>\n\n\n\n
- On an emulator\/simulator:<\/strong> If you have an Android emulator (AVD) or an iOS simulator installed, make sure it is running. In the terminal window with Metro Bundler, press the
a<\/code><\/strong> key to open the app on Android Emulator, or i<\/code><\/strong> to open on iOS Simulator (on macOS)<\/li>\n<\/ul>\n\n\n\nExpo CLI will automatically build a debug version and send it to the emulator. After a while, you should see the React Native splash screen (by default, this is the screen that says \u201cWelcome to React Native…\u201d).<\/p>\n\n\n\n
6. Modification and hot-reload:<\/strong> Now you can open the App.js<\/code> file in the editor, make changes (e.g. change the welcome text) and save. Expo will immediately reload the app on the device\/emulator, showing the changes you made thanks to the Fast Refresh<\/em> mechanism that is enabled by default.
Congratulations! Your Expo project is up and running. The whole process \u2013 from installation to seeing the app \u2013 is very fast and beginner-friendly. For more details, check out the official Expo documentation.<\/p>\n\n\n\nReact Native CLI installation<\/h2>\n\n\n\n
The React Native CLI approach is a little more time-consuming to set up. It requires you to install several tools and native dependencies, but it will allow you to build your app from scratch on your own computer. Instructions are below:<\/p>\n\n\n\n
Steps to set up and run a React Native CLI project:<\/h3>\n\n\n\n
1. Prepare the environment:<\/strong><\/p>\n\n\n\n\n- Node.js:<\/strong> Install Node.js (if you don’t have it already) – as with Expo, Node is required to manage JavaScript packages and run Metro Bundler.<\/li>\n\n\n\n
- JDK (Java Development Kit):<\/strong> Download and install JDK version 11 or higher (React Native currently recommends JDK 11 LTS). On Windows\/Mac, make sure that the
JAVA_HOME<\/code> environment variable points to the JDK installation directory.<\/li>\n\n\n\n- Android Studio (Android SDK):<\/strong> Install Android Studio \u2013 during installation, select the option to install the latest Android SDK and the AVD (Android Virtual Device) configurator, as you will need them to emulate the application on Android. After installing Android Studio, launch it once and go through the \u201cSDK Manager\u201d configurator to install Android platforms (e.g. Android 13\/API 33) and the \u201cAVD Manager\u201d to create a virtual device (e.g. Pixel 5 with Android). Additionally, add the path to the Android SDK tools (
platform-tools<\/code>) to the PATH<\/code> variableto be able to use the adb commands in the terminal.<\/li>\n\n\n\n- Xcode (macOS only, for iOS):<\/strong> If you are using a Mac and plan to develop iOS apps, install the latest Xcode from the Mac App Store. After installation, open Xcode and install additional tools (you may be prompted to install command line tools). Also install the CocoaPods<\/strong> tool (
sudo gem install cocoapods<\/code> in Terminal), which you will need to manage iOS libraries. Note: on Windows\/Linux, it is not possible to<\/strong> build or run a native iOS application \u2013 macOS is required for this.<\/li>\n\n\n\n- React Native CLI:<\/strong> You don’t need to install anything separately \u2013 React Native has a built-in CLI tool. We will use it through
npx<\/code>, which will always launch the latest version of the CLI.<\/li>\n<\/ul>\n\n\n\n2. Create a new React Native project:<\/strong> Once you have configured the above, you can create a project. Use the following command in Terminal\/Powershell:<\/p>\n\n\n\nnpx react-native init MyProject\n<\/code><\/pre>\n\n\n\nwhere \u201cMyProject\u201d is the name of your app. This command will generate a directory structure with a sample app (containing the App.js<\/code> component with a simple splash screen). With npx<\/code> you always use the current version of the React Native CLI \u2013 there is no need to install the global react-native-cli<\/code>package. After a few minutes (depending on the speed of your internet connection and computer), the project will be created.<\/p>\n\n\n\n3. Run Metro Bundler:<\/strong> Go to the project folder: cd MyProject<\/code>. Then (preferably in a separate terminal window) run the Metro server:<\/p>\n\n\n\nnpx react-native start\n<\/code><\/pre>\n\n\n\nMetro Bundler is a server that will be responsible for delivering the JavaScript package to your application. It should start on the default port 8081 and listen for code changes.
(Note: Many commands, such as run-android\/run-ios, automatically start Metro, so you can skip this step – however, it is recommended to have a separate window with Metro to follow any JavaScript error logs).<\/p>\n\n\n\n
4. Run the Android app:<\/strong> Make sure you have the Android emulator (AVD) running or<\/strong> a physical phone connected with USB debugging enabled. Then, in the project’s main directory, execute the command:<\/p>\n\n\n\nnpx react-native run-android\n<\/code><\/pre>\n\n\n\nThis will build the Android application and install it on the emulator\/device. The first time it is run, Gradle will download all the necessary dependencies, which may take a few minutes. If everything is configured correctly, after compilation you will see the MyProject<\/strong> application screen on the emulator (as in Expo, by default it is the React Native welcome screen)<\/p>\n\n\n\nIf there are any errors, check the console messages \u2013 the most common problems are that the emulator is not running or that the SDK licenses have not been accepted (if necessary, run Android Studio, which will tell you how to accept the licenses). After a successful launch, Metro Bundler will start transferring the JavaScript code to the app.<\/p>\n\n\n\n
5. Run the app on iOS (macOS):<\/strong> If you are working on a Mac, you can run the app on the iOS Simulator. Make sure you have the simulator open (e.g. iPhone 14). In the project directory, do the following:<\/p>\n\n\n\nnpx react-native run-ios\n<\/code><\/pre>\n\n\n\nThis command will open the iOS project in Xcode, build it and run it in the simulator. The first run will also automatically install dependencies via CocoaPods (this may take a while). After a while, you should see the app on the virtual iPhone. If something goes wrong, make sure that Xcode has been installed and updated and that the simulator is configured correctly. (Alternatively, you can run the iOS application manually by opening the .xcworkspace<\/code> project in Xcode and clicking \u201cRun\u201d, which sometimes gives a better insight into errors).<\/p>\n\n\n\n6. Edit the code and use Fast Refresh:<\/strong> Open the App.js<\/code> file in your CLI project and change the header text, for example. Then save the file – on the emulator\/phone you will see that the application will automatically reload, presenting the changes you made (thanks to the Fast Refresh mechanism, which works here similarly to Expo). In case of more significant native changes (e.g. adding a new native library), it may be necessary to rebuild the application.<\/p>\n\n\n\nNow you have a React Native project running that was created using the CLI. From this point on, you can build your app, add libraries via npm\/yarn<\/code> and fully develop your project. Please note that you can find more detailed information (e.g. about generating APK\/IPA release files, configuring app signatures, etc.) in the React Native<\/a> documentation.<\/p>\n\n\n\nWhich solution should I choose?<\/h2>\n\n\n\n
The choice between Expo and React Native CLI depends on your level of experience and the specifics of the project you want to work on. Below you will find recommendations tailored to different user groups:<\/p>\n\n\n\n
For beginners<\/h3>\n\n\n\n
If you are just starting out with React Native or mobile development in general, Expo might be a better choice to start with. It allows you to avoid the hassle of setting up a native environment and focus on writing code in JavaScript\/React right away. Expo offers a smoother introduction \u2013 quick prototyping and previewing how the application works without the frustration of Gradle or Xcode configuration. In practice, many tutorials for beginners recommend Expo as a first step. Expo will also work if you want to quickly prepare a simple project or prototype \u2013 e.g. for the purpose of demonstrating an idea or a project for your studies. The managed workflow means you don’t have to worry about the details – for example, adding camera support or localization comes down to installing an Expo package (expo-camera<\/code>, expo-location<\/code>) and using it right away, without fiddling with native configuration files. In addition, the Expo community and excellent documentation will help you at the beginning of your journey – if you encounter a problem, you are probably not the first person to have it, and the Expo forums are full of tips.<\/p>\n\n\n\nFor intermediate users<\/h3>\n\n\n\n
If you have already taken your first steps and are starting to feel more confident with React Native, the answer to the question \u201cExpo or CLI?\u201d is: it depends on the needs of the project. You can continue to use Expo, especially if the project does not require unusual native functionalities. Expo has evolved a lot in recent years and even some quite complex applications can be developed in it without limitations. However, it is worth assessing whether you are approaching the limits of Expo’s capabilities. If you know that you will need, for example, integration with a native SDK from a manufacturer (which is not in Expo) in your project, or you want to optimize size and performance as much as possible, it may be a signal to consider switching to React Native CLI. A good strategy is to start development in Expo (for speed) and possibly \u201ceject\u201d to bare workflow when Expo starts to limit you.<\/p>\n\n\n\n