Navigate back to the homepage

React Native Environment Setup using expo

Infinitbility
Environment Setup
January 3rd, 2021 · 2 min read
React Native Environment Setup using expo

This Article Part of React Native Tutorial Series want to start from scrach follow below link

https://infinitbility.com/react-native/table-of-contents

when you want to quick setup follow expo cli but for large project, I recommend use react native cli.

https://infinitbility.com/react-native/category/environment-setup

Today, we setup expo for run react native app.

Setup Expo

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

Install Node JS

for setup expo cli you have to download and instal node.js.

https://nodejs.org/en/download/

Expo cli

After install node.js open your CMD and install expo cli.

1npm install expo-cli --global

Create React Native Project

using expo below cammand you can create new project.

1expo init my-new-project

You will be asked to choose a template. Press Enter to choose Blank.

Run Expo Project

below command, change your current dir.

1cd my-new-project

Run your project, using expo start command

1expo start

You should see something like with a QR code generated in the terminal

Running your react native on your Android or iOS devices

For Android

Click on below link to download the Expo client app to your Android device.

https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en

Open Expo then click the “Scan QR Code” and Scan the QR code in our terminal.

As soon as the QR code got scanned, it’ll automatically load and bundle/compile your project to run it in your device.

For iOS

Click on below link to download the latest Expo client app to your iOS device.

https://apps.apple.com/us/app/expo-client/id982107779

With iOS 11, there is now a scan feature added to the camera. We can use this to scan the QR code and open the Expo client app.

Open up your camera app, then scan the QR code in our terminal until a notification badge pops on top telling us that we can open it in Expo client.

The QR Scan has been removed in Expo for iOS

However, if you’re not in iOS 11, there’s still an alternative way but not with scanning: — Open your Expo client app and sign up/login. — Open another new tab in your terminal and navigate to your react-native project directory and run.

1expo send -s [email protected]

use the email that is logged in your expo app.

This will send an email to you with the link, clicking this link will open the app in expo. Then it’ll have your project up and running on your iPhone.

More From React Native Tutorial

Basics

  1. Introduction To React Native
  2. React Native Environment Setup using expo
  3. React Native Environment Setup for windows
  4. React Native Environment setup on Mac OS
  5. React Native Environment setup on linux
  6. React Native Project Structure
  7. React Native State
  8. React Native Props
  9. React Native Styling
  10. React Native Flexbox
  11. React Native Text
  12. React Native Textinput
  13. React Native Commands
  14. React Native ScrollView

Advances

  1. React Native Dark Mode
  2. React Native Fonts
  3. React Native SQLite
  4. React Native DatepickerAndroid
  5. React native ScrollView scroll to position
  6. How to align icon with text in react native
  7. React Native Image
  8. React Native Firebase Crashlytics
  9. React Native Async Storage
  10. React Native Share

Error & Issue Solution

  1. Task :app:transformDexArchiveWithDexMergerForDebug FAILED In React Native
  2. Expiring Daemon because JVM heap space is exhausted In React Native
  3. Task :app:transformNativeLibsWithMergeJniLibsForDebug FAILED In React Native
  4. Unable to determine the current character, it is not a string, number, array, or object in react native
  5. App crashed immediately after install react native video or track player
  6. how to delete SQLite database in android react native
  7. React native material dropdown twice click issue
  8. How to get the current route in react-navigation?
  9. how to disable drawer on the drawer navigation screen?
  10. Image not showing in ios 14 react native

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

More articles from Infinitbility

Introduction To React Native

Introduction To React Native

React Native Tutorial - Introduction

January 2nd, 2021 · 2 min read
Table Of Contents

Table Of Contents

React Native Tutorial - Table Of Contents

January 1st, 2021 · 1 min read
© 2021 Infinitbility
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]