How to create React Native App
React Native is a framework that shares similarities with ReactJS and is incredibly useful for building mobile applications. Understanding how to create a project and using boilerplate code to start with any application is crucial.
Additionally, specific requirements and simulators are available for running the application on both mobile and device platforms. These tools allow you to evaluate the app's aesthetics and functionality visually.
Getting started
If you're new to mobile development, the most straightforward approach to begin is by using Expo Go. Expo is a collection of tools and services designed specifically for React Native. The most relevant feature is its ability to initiate React Native app development quickly in minutes.
Firstly, install the dependencies required to start the project.
npm install -g expo-cli
Next, to create a React Native project, run the following command to generate a new project named "newProject" which may take a few minutes to build:
npx create-expo-app newProjectcd newProject
By this time, you have built the project, and now you are ready to start the project.
Launching the project
You can download the
Before you can run the application on the web, you first need to install a few dependencies:
npx expo install react-native-web@~0.18.10 react-dom@18.2.0 @expo/webpack-config@^18.0.1
Once the packages have been installed, you will run the application:
npx expo start
Once the project is initiated, you can use the Expo Go application to scan the QR code provided in the terminal. This allows you to view the project on your mobile device conveniently. Alternatively, press the 'w' key to open the project in your local browser.
Complete project
You can access and modify the App.js file to observe how the changes affect the application output. You can experiment and explore the functionality of React Native. The package.json file contains crucial dependencies, while the folder structure organizes the project's files and resources.
When you see the QR code for Expo Go, press the 'w' key to preview the output directly in your browser.
{
"expo": {
"name": "newProject",
"slug": "newProject",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#ffffff"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
Free Resources
