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

Vue Bootstrap modal, toast don’t show Why ??????

Encircling the Execution Context 🚩

Integrate Github Repositories Into Your Personal Site With VueJS

React Hooks: useMemo

Handling forms with React Native using Formik and Yup

Elements of Redux

unique fashionabe man customer care number/8584892730//8584892730/unique fashionabe man customer…

Content Projection in Angular using ng-content

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

3 good practices when creating components for web/mobile apps.

How to add a React app to a GitHub repository

Polling API in React Native using Redux Sagas

Use of Higher Order Component (Hoc) in React