Get up and running with React Native and Expo in 3 basic steps

Go-to resources

1. Quick Setup

  • installed Node.js 8+. Use npm and nvm if you need help in this step. Check this post if you need help checking your node version or changing it.
  • installed the Expo command line tool.
  • downloaded and installed Expo Client.
  • created a new React Native project using expo init my-new-project
  • accessed your project directory cd my-new-project and previewed the app expo start
  • scanned the QR code printed on the previous step (you can find it in the terminal and a new browser tab opened in the development tools port) with your phone camera and opened the Expo Client application linked to the QR code.

2. Debugging with Expo

  • Open the my-new-project directory with VSCode.
  • Go to the Debug tab on VSCode. Click on the gear icon and select React Native. This will create a launch.json file on your app (.vscode/) with the debugging functionality.
  • Check the packager-info.json file on your app (.expo/) and get the packagerPort number.
  • Create a new settings.json file on your app (.vscode/) with the following code:
{
"react-native": {
"packager": {
"port": 19001 //packagerPort from packager-info.json
}
}
}
  • On the Debug tab on VSCode, select Attach to Packager from the dropdown list and click the green play icon.
  • Shake to the right your phone so the Expo Client app displays the menu options. Select and activate Debug Remote JS.

3. Redux with Expo

import { KeepAwake, registerRootComponent } from ‘expo’;
import App from ‘../../App’;
if (__DEV__) {
KeepAwake.activate();
}
registerRootComponent(App);

--

--

--

albertcarreras.github.io

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Dialogflow v2 REST API Communication

check out our other social properties : https://t.co/SiiEDU0F2J https://t.co/aSPPYn3DxU

Something about React Application

CI/CD Angular app with cloud front + code build + code pipeline + S3

How To Convert JSON to CSV — NodeJs

Animated Trigonometry Quiz

GIF demonstrating the trigonometry quiz, where students are shown a trigonometric value, e.g. sin(30), and have to select the correct exact value.

When to Use Bind(), Call(), and Apply() in JavaScript

JavaScript call(), apply(), bind()

Introducing Side Effects with the useEffect hook

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alberto Carreras

Alberto Carreras

albertcarreras.github.io

More from Medium

My First Week with React Native

The Future of Cross Platform Apps: React Native

What is React Native? A beginner’s guide to React & React Native.

How to configure ESLint and Prettier for Expo projects