React Native App Creation Step By Step Using Expo CLI Or React Native CLI
React Native is an open-source platform that businesses have been using since 2015 to design & develop mobile applications. According to the Stack Overflow Developer Survey 2020, nearly 58% of respondents are inclined towards React Native for cross-channel app creation. By now, we talked about the benefits of React native as a distinctive framework for native application development. Now, we will guide you about React native app creation step by step, right from environment setup to installation of required software & supporting libraries.
Learning something new is always enticing; however, some of you might not be interested in diving into the details when it comes to gaining technical knowledge.
You need not worry; it won’t be sluggish learning; rather, you will be amazed to know about different stages that will lead to your planned React Native App. Even if you are not developing your React Native app on your own, this article will add a lot to your knowledge & strengthen your technical understanding of mobile app development for all of your users across the web.
Step 1: Getting started with React Native
To start with React Native, you can count on any OSs, namely Windows, Linux, or Mac OS. macOS has both Android and iOS environments, whereas Windows & Linux support Android environments only. Two ways of getting started with React Native are:
Installation of Expo CLI:
For novel learners & developers, Expo CLI is best to get started with. It has all the relevant tools with the latest version of Node.js to start with app development. Moreover, a phone or emulator is enough to get you going. Get Node 12 LTS or later on your device to deploy this method. To install Expo CLI command-line utility:
| Npm install ‑g expo-cli |
Installation of React Native CLI:
When you are planning to design some complex architectured mobile app, it’s better to count on React Native CLI. You can install React Native CLI on any of the operating systems of your choice.
- For macOS: You need to install Node, the React Native CLI, a JDK, Android Studio/XCode. Initially, you can install Node and Watchman from Homebrew in the terminal. Make sure that the version of Node is 8.r or above. Here, the utility of Watchman is to keep an eye on the changes in the filesystem.
- For Windows: Follow the sequence of installing Node, React’s CLI, Python, a JDK, and Android Studio. There ain’t any specification for the editor; you can choose IDE as per your convenience. To avoid unexpected issues, check for the current & stable version of CLI by putting the command npx react-native <command>.
Also Read: Structure of a React Native App : Everything You Need To Know
Step 2: Installation of Xcode
Those of you using MacOS for the React Native App Creation will be installing XCode via App Store. Make sure that you download the latest version of XCode, or keep it up-to-date, to avoid any compatibility issues. Install command-line tools from preferences under the location panel & iOS emulator. You need to install CocoaPods, which can be done by:
| sudo gem install cocoapods |
Also Read: Comprehensive Guide on React Native Getting Started
Step 3: Installation of Android Studio
Moving further, download Android Studio to install. Select custom mode of installation & count on all necessary checkboxes, including Android SDK, Android SDK platform, Android virtual platform. If those boxes are greyed out, you have the choice to select & install those components later. Don’t forget to set up an emulator for your Android app development. You can explore supporting libraries and software on the official website of React Native & download the ones required as per the technological upgrades.
Step 4: Installation of IDEs
You can select the IDEs/code editors of your choice like Atom, Nuclide, IntelliJ, Visual Code Studio, Sublime Text Editor, etc. You can use any of these to edit the source code for the development of your mobile app. If you have any confusion, it’s better to compare them and go with the option that seems handier to you.
Also Read: React Native Tutorials — Learn to Build Native Mobile Apps with React
Step 5: Creation of React native app
Using Expo CLI
Start a new project using Expo CLI, let’s say you name it ‘Test Project’.
| Expo init TestProject cd TestProject npm start |
Once you initiate the development server, run Expo client app by connecting both of them via the same wireless network. You can use QR code to do the same & launch your app on the virtual device using USB. To launch your app on a real/virtual device on Android use the command, npm run android & for doing the same on an iOS simulator run the command npm run ios.
Using React Native CLI
Start a new project using React Native CLI, let’s say you name it ‘Test Project’.
| Npx react-native init TestProject cd TestProject npm react-native start |
Above command will initiate Metro Bundler development server. After the setup of Android Studio/Xcode, you can launch your React Native app on a real/virtual Android device using npm react-native run-android & for MacOS users npm react-native run-ios. This will bring your mobile app on the device & make it easier for you to develop & test.
Also Read: React Native Upgrade Helper: App Upgrades with Ease
Step 6: React Native Project Structure
Now that you have your TestProject ready, it’s important to understand the project architecture of your React Native app.
Above mentioned ones are all the directory files of your mobile app. These smaller modules have all the information grouped distinctly as per their utility & application. Like package.json has all updates & versions of your app grouped, node_modules directory is initialized & have dependencies installed required to set up your app on the device.
The more you learn in detail, the more familiar you will get with React Native platform & frameworks working environment.
Also Read: Best React Native Font Family for Mobile App Development
We hope that this article has helped you understand React Native app creation step by step & understand the different stages of development of your mobile app. The demand for cross-platform solutions wants every business to be everywhere. Now, if you have decided about getting one for your business, discuss with us at sales@wedowebapps.com. Must know about Top React Tools and Libraries.
Frequently Asked Questions
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.
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.
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.
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.
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.
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.
