Setting up React Native with Expo, TypeScript, Jest and Visual Studio Code

Clint M
Clint M
Aug 28, 2017 · 3 min read

Introduction

In this post I’ll show how to use TypeScript in Visual Studio Code to develop an Expo based React Native application and test it with Jest.

TL;DR

“ya ya… just show me the code”

  • Clone the git repo git clone https://github.com/clintmod/react-native-expo-typescript.git
  • Run yarn && yarn start to install the dependencies and start the react native packager.
  • Scan the QR code to launch the app in the expo client app on your phone.

Initial Setup

  • Use a mac (the first two steps are different on windows the rest should work though)
  • Install Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • Install Node.js brew install node
  • Install Yarn npm install -g yarn
  • Install create-react-native-app yarn global add create-react-native-app
  • Install Visual Studio Code
  • Add code to your PATH. In vs code press CMD + Shift + P then in the open dialog type Shell Command: Install 'code' command in PATH

Project Setup

This should have the app running on your phone.

Visual Studio Code Setup

  • Open up vs code
  • Chose File -> Open or use CMD + O
  • Select the folder with the cloned git repo from earlier.
  • Once the project opens you can press CMD + Shift + B to run the build-watch task from package.json which will recompile all changes on each file save and automatically reload and display the changes on your phone.

Optional Setup

Install vs code extensions

  • In VS Code type CMD + Shift + P then type Install Extension then press Enter . Here’s a gist of my current vs code config and extension list.

Notes

  1. It’s important to leave the App.js file at the root of the project. Expo expects it and using "expo" {"entryPoint":"somethingElse.js"} in the app.config doesn’t work.
  2. If you see an error like this when running the tests…

console.error node_modules/react-native/Libraries/Core/ ExceptionsManager.js:73 Warning: PropTypes has been moved to a separate package. Accessing React.PropTypes is no longer supported and will be removed completely in React 16. Use the prop-types package on npm instead. (https://fb.me/migrating-from-react-proptypes)

… it’s because of this and you can ignore it until react 16.0.0 is released.

Troubleshooting

To be added with any problems people post in the comments.

Applied Software Research

Applied Software Research

)

Clint M

Written by

Clint M

Applied Software Research

Applied Software Research

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade