React Nat­ive App Cre­ation Step By Step Using Expo CLI Or React Nat­ive CLI

19 Apr 2021

React Nat­ive is an open-source plat­form that busi­nesses have been using since 2015 to design & devel­op mobile applic­a­tions. Accord­ing to the Stack Over­flow Developer Sur­vey 2020, nearly 58% of respond­ents are inclined towards React Nat­ive for cross-chan­nel app cre­ation. By now, we talked about the bene­fits of React nat­ive as a dis­tinct­ive frame­work for nat­ive applic­a­tion devel­op­ment. Now, we will guide you about React nat­ive app cre­ation step by step, right from envir­on­ment setup to install­a­tion of required soft­ware & sup­port­ing libraries.

Learn­ing some­thing new is always enti­cing; how­ever, some of you might not be inter­ested in diving into the details when it comes to gain­ing tech­nic­al knowledge. 

You need not worry; it won’t be slug­gish learn­ing; rather, you will be amazed to know about dif­fer­ent stages that will lead to your planned React Nat­ive App. Even if you are not devel­op­ing your React Nat­ive app on your own, this art­icle will add a lot to your know­ledge & strengthen your tech­nic­al under­stand­ing of mobile app devel­op­ment for all of your users across the web. 

Step 1: Get­ting star­ted with React Native 

To start with React Nat­ive, you can count on any OSs, namely Win­dows, Linux, or Mac OS. macOS has both Android and iOS envir­on­ments, where­as  Win­dows & Linux sup­port Android envir­on­ments only. Two ways of get­ting star­ted with React Nat­ive are:

Install­a­tion of Expo CLI:

For nov­el learners & developers, Expo CLI is best to get star­ted with. It has all the rel­ev­ant tools with the latest ver­sion of Node.js to start with app devel­op­ment. Moreover, a phone or emu­lat­or is enough to get you going. Get Node 12 LTS or later on your device to deploy this meth­od. To install Expo CLI com­mand-line utility:

Npm install ‑g expo-cli 

Install­a­tion of React Nat­ive CLI

When you are plan­ning to design some com­plex archi­tec­tured mobile app, it’s bet­ter to count on React Nat­ive CLI. You can install React Nat­ive CLI on any of the oper­at­ing sys­tems of your choice. 

  • For macOS: You need to install Node, the React Nat­ive CLI, a JDK, Android Studio/XCode. Ini­tially, you can install Node and Watch­man from Homebrew in the ter­min­al. Make sure that the ver­sion of Node is 8.r or above. Here, the util­ity of Watch­man is to keep an eye on the changes in the filesystem. 
  • For Win­dows: Fol­low the sequence of installing Node, React’s CLI, Python, a JDK, and Android Stu­dio. There ain’t any spe­cific­a­tion for the edit­or; you can choose IDE as per your con­veni­ence. To avoid unex­pec­ted issues, check for the cur­rent & stable ver­sion of CLI by put­ting the com­mand npx react-nat­ive <com­mand>

Also Read: Struc­ture of a React Nat­ive App : Everything You Need To Know

Step 2: Install­a­tion of Xcode 

Those of you using MacOS for the React Nat­ive App Cre­ation will be installing XCode via App Store. Make sure that you down­load the latest ver­sion of XCode, or keep it up-to-date, to avoid any com­pat­ib­il­ity issues. Install com­mand-line tools from pref­er­ences under the loc­a­tion pan­el & iOS emu­lat­or. You need to install Cocoa­Pods, which can be done by: 

sudo gem install cocoapods 

Also Read: Com­pre­hens­ive Guide on React Nat­ive Get­ting Started

Step 3: Install­a­tion of Android Studio 

Mov­ing fur­ther, down­load Android Stu­dio to install. Select cus­tom mode of install­a­tion & count on all neces­sary check­boxes, includ­ing Android SDK, Android SDK plat­form, Android vir­tu­al plat­form. If those boxes are greyed out, you have the choice to select & install those com­pon­ents later. Don’t for­get to set up an emu­lat­or for your Android app devel­op­ment. You can explore sup­port­ing lib­rar­ies and soft­ware on the offi­cial web­site of React Nat­ive & down­load the ones required as per the tech­no­lo­gic­al upgrades. 

Step 4: Install­a­tion of IDEs 

You can select the IDEs/code edit­ors of your choice like Atom, Nuc­lide, Intel­liJ, Visu­al Code Stu­dio, Sub­lime Text Edit­or, etc. You can use any of these to edit the source code for the devel­op­ment of your mobile app. If you have any con­fu­sion, it’s bet­ter to com­pare them and go with the option that seems han­di­er to you. 

Also Read: React Nat­ive Tutori­als — Learn to Build Nat­ive Mobile Apps with React

Step 5: Cre­ation of React nat­ive app 

Using Expo CLI 

Start a new pro­ject using Expo CLI, let’s say you name it Test Project’. 

Expo init TestProject
cd Test­Pro­ject
npm start 

Once you ini­ti­ate the devel­op­ment serv­er, run Expo cli­ent app by con­nect­ing both of them via the same wire­less net­work. You can use QR code to do the same & launch your app on the vir­tu­al device using USB. To launch your app on a real/virtual device on Android use the com­mand, npm run android & for doing the same on an iOS sim­u­lat­or run the com­mand npm run ios.

Using React Nat­ive CLI 

Start a new pro­ject using React Nat­ive CLI, let’s say you name it Test Project’. 

Npx react-nat­ive init TestProject
cd Test­Pro­ject
npm react-nat­ive start 

Above com­mand will ini­ti­ate Metro Bund­ler devel­op­ment serv­er. After the setup of Android Studio/Xcode, you can launch your React Nat­ive app on a real/virtual Android device using npm react-nat­ive run-android & for MacOS users npm react-nat­ive run-ios. This will bring your mobile app on the device & make it easi­er for you to devel­op & test.
Also Read: React Nat­ive Upgrade Help­er: App Upgrades with Ease

Step 6: React Nat­ive Pro­ject Structure 

Now that you have your Test­Pro­ject ready, it’s import­ant to under­stand the pro­ject archi­tec­ture of your React Nat­ive app. 

Above men­tioned ones are all the dir­ect­ory files of your mobile app. These smal­ler mod­ules have all the inform­a­tion grouped dis­tinctly as per their util­ity & applic­a­tion. Like package.json has all updates & ver­sions of your app grouped, node_modules dir­ect­ory is ini­tial­ized & have depend­en­cies installed required to set up your app on the device. 

The more you learn in detail, the more famil­i­ar you will get with React Nat­ive plat­form & frame­works work­ing environment.

Also Read: Best React Nat­ive Font Fam­ily for Mobile App Development

We hope that this art­icle has helped you under­stand React Nat­ive app cre­ation step by step & under­stand the dif­fer­ent stages of devel­op­ment of your mobile app. The demand for cross-plat­form solu­tions wants every busi­ness to be every­where. Now, if you have decided about get­ting one for your busi­ness, dis­cuss with us at [email protected]. Must know about Top React Tools and Lib­rar­ies

Frequently Asked Questions

1. What are the steps to create a React Native app using Expo CLI or React Native CLI?

To create a React Native app using Expo CLI or React Native CLI, follow these steps:
1. Install Node.js and npm on your computer.
2. Install Expo CLI or React Native CLI using npm.
3. Create a new React Native project using Expo CLI or React Native CLI.
4. Run the project using the development server.
5. Write your React Native code in the App.js file.
6. Test your app on different devices and platforms.
7. Build your app for deployment to the App Store or Google Play Store.
Note that the specific steps may differ slightly depending on whether you are using Expo CLI or React Native CLI. However, the general process involves creating a new project, writing code in the App.js file, and testing and deploying the app. Also, make sure to follow best practices for React Native development, such as using components, managing state, and testing your code.

2. What are the differences between using Expo CLI and React Native CLI for app creation?

Expo CLI is a tool that allows for easy development of React Native apps without needing to install and configure various libraries and dependencies manually. It provides an all-in-one solution for developing, building, and testing apps that can be shared through the Expo platform. However, it does come with some limitations in terms of access to native modules, which may not be suitable for some projects.
React Native CLI, on the other hand, provides full access to native modules and allows for customization and flexibility in project configurations. It requires more manual setup and configuration compared to Expo, but it can be a better option for larger and more complex apps that require higher performance and more control over the development process. Ultimately, the choice between Expo and React Native CLI depends on the specific needs and requirements of the project.

3. How do you initialize and run a new React Native app?

Initializing and running a new React Native app is easy! Here are the steps:
1. Make sure you have Node.js and Yarn installed on your computer.
2. Open a command prompt or terminal window and navigate to the location where you want to create the new app.
3. Run the command "npx react-native init MyApp" (replace "MyApp" with the name you want to give your app).
4. Once the initialize process is complete, navigate to your app's directory using the command prompt or terminal window.
5. Run the command "yarn start" to start the React Native development server.
6. Open another command prompt or terminal window and navigate to your app's directory.
7. Run the command "yarn android" (or "yarn ios" for iOS development) to run the app on an emulator or physical device.
That's it! You have now successfully initialized and run a new React Native app.

4. How do you add custom styling and layout to a React Native app?

To add custom styling and layout to a React Native app, you can use a combination of CSS and the styled-components package. Start by creating a new .js file for your custom styles and import it into your components. Then use styled-components to create styled versions of the components you want to customize. You can use familiar CSS properties like font-size, color, and padding, as well as more advanced properties like flexbox and grid. You can also create your own global styles that apply to all components, or create conditional styles based on props or state. With styled-components, you can create reusable styles that can easily be modified and applied to different components, making it a powerful tool for customizing your React Native app's appearance.

5. What are the advantages of using Expo CLI for React Native app development?

Expo CLI is a great choice for React Native app development for several reasons. First, it allows you to quickly get started with a new project by providing pre-configured templates and components that save time and effort. Additionally, Expo CLI provides a set of features and tools that make it easier to build, test, and deploy your app, such as easy device testing, live reloading, and immersive debugging. Another advantage of Expo CLI is its scalable architecture that allows you to easily add new features and functionality to your app as your business requirements change or grow. Finally, Expo CLI offers excellent documentation and community support, making it easy to get help and guidance when you need it.

6. What are the essential tools and libraries required for React Native app development?

React Native app development requires a few essential tools and libraries to get you started. First, you'll need to install Node.js, which includes NPM and allows you to manage your project's dependencies. You'll also need to install the React Native command-line interface (CLI), which helps you create and run your app. Other tools and libraries you'll need include Xcode for iOS development and Android Studio for Android development, along with the React Native Debugger for debugging and Expo for managing your application. Additionally, you may want to integrate other libraries like Redux for state management, React Navigation for app navigation, and Axios for making API requests.

Is this artical helpful?
Share this post :