2 Ways to Get Started With The Current Technology – React Native

2 Ways to Getting Started With The Current Technology – React Native is all about the way we can start making React Native app. Like any other JavaScript framework here we also need nodejs to start working with React Native.

Before dive right into React Native if you want to minimize confusion, then you should spend a bit of time understanding the basics of a React application.

There’s some terminology you need to know. React Native is an extension of React. It’s just a different client target that’s using React and its principles to create the application.

Learning a little bit of React is a good use of time. Looking through the homepage alone will help you quite a bit. I also suggest you look through the official tutorial to have a better understanding. But if you don’t want to do that or you did it already then let’s get started.

Here we will suggest the primary steps required to start working with React Native.

Install nodejs and npm

First of all, you need to install the nodejs and npm which is a node package manager. To install the node and npm on your machine. You can follow this Guide to install npm and nodejs.

Building a React Native app with two way

There are two ways to start with react native and we will tell you the difference between them.

1. Expo Go

2. React Native CLI

1. Expo Go

If you are new to the mobile development and want to understand how things go on and how React Native development can be done then Expo Go is the best way to start. It is a set of tools and services which is build around React Native and has so many features, you can start writing React Native app within minutes. You will only need latest version of node.js and a phone. If you want to try React Native directly on your web browser then you can try Snack – Online emulator for React Native Development.

1.1. Creating the First Project with Expo CLI

To get started with Expo Go open the terminal and run following command(Expecting node installed in your machine)

npx create-expo-app YourAppName
cd YourAppName
npm start # Or you can use: npx expo start

This will start the React Native packager and print a QR code.

1.2. Run your React Native application

To run this app, install the Expo Go app on your phone and connect to the same wireless network as your computer. Use Expo Go App to scan the QR code from the terminal to open your project in phone.

Expo Go allowed you to run your React Native app on a physical device without installing iOS and Android native SDK. If you want to run your app on the iOS simulator or Android virtual device then you need to install Xcode for iOS or Android development environment for Android and once you are done with that you can launch you app on Android virtual device using npm run android or for iOS simulator run npm run ios.

1.3. Modifying your app

Now that you have successfully run the app, let’s modify it. Open App.js in your text editor of choice and edit some lines. The application should reload automatically once you save your changes. Congratulation, you’ve successfully run and modified your first React Native app using Expo Go, now you can make the changes and play.

1.4. Limitations with Expo Go

The Expo Go app is a great to get started and get projects off the ground quickly, to experiment with ideas (such as on Snack) and share their work with minimal friction. Expo Go makes this possible by including a feature-rich native runtime made up of every module in the Expo SDK, so all you need to do to use a module is install the package with npx expo install and reload your app.

The main limitation is that Expo Go app does not allow you to add custom native code, you can only use native modules built into the Expo SDK. There are many great libraries available outside of the Expo SDK, and you may even want to build your own native library. You can leverage these libraries with development builds, or by using “prebuild” to generate the native projects, or both. Learn more about adding native code to projects created with create-expo-app.

2. React Native CLI

If you are familiar with mobile development, you may want ti use React native CLI. It requires Android Studio, Xcode and all the other dependencies that you need while making your native app. You can use following links to setup Android development environment and Xcode for React Native development

• Setting up Android Development Environment & Android Studio in windows and Ubuntu
• Setting up Android Development Environment & Android Studio in Mac OS
• Create and Launch the Android Virtual Device
• Installation of Xcode for React Native IOS Development

2.1. Creating First Project With React Native CLI

React Native has a built-in command line interface. Instead of installing and managing a specific version of the CLI globally, we will use the latest version of CLI every time using npx.

If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:

npm uninstall -g react-native-cli @react-native-community/cli

To create new React Native project using React Native CLI you can run following command, assuming you have already setup the Android and iOS development environment

npx react-native init YourProjectName

If you want to create any project targeting any specific version of React Native then you can use following command

npx react-native init YourProjectname --version X.XX.X

2.2 Running your React Native App

Open the terminal again and jump into your project using.

cd YourProjectName

1. Start Metro Bundler

First, you will need to start Metro, the JavaScript bundler that ships with React Native. To start Metro bundler run following command

npx react-native start

Once you start Metro Bundler it will run forever on your terminal until you close it. Let Metro Bundler run in its own terminal. Open a new terminal and run the application.

2. Start React Native Application

To run the project on an Android Virtual Device or on real debugging device

npx react-native run-android

or on the iOS Simulator by running (macOS only)

npx react-native run-ios

2.3. Modifying Your App

Now that you have successfully run the app, let’s modify it. Open App.js in your text editor of choice and edit some lines. The application should reload automatically once you save your changes else press the R key twice or select Reload from the Developer Menu (Ctrl + M) to see your changes!. Congratulation, you’ve successfully run and modified your first React Native app using React Native CLI, now you can make the changes and play.

That was the 2 ways to getting started with the current technology – React Native, If you have any doubts about the topic you can comment below or contact us here. You can explore more tutorial from different sections to learn further.

Hope you liked it 🙂