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.

Copy 
1npm install expo-cli --global

Create React Native Project

using expo below cammand you can create new project.

Copy 
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.

Copy 
1cd my-new-project

Run your project, using expo start command

Copy 
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.

Copy 
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