shift.infinite.red Open in urlscan Pro
52.0.16.118  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Open in app

Sign In

Get started


Home
Notifications
Lists
Stories

--------------------------------------------------------------------------------

Write


Published in

Red Shift

Kevin VanGelder
Follow

May 10, 2016

·
4 min read
·

Listen



Save







GETTING STARTED WITH REACT NATIVE DEVELOPMENT ON WINDOWS



Update: Our free Installing React Native on Windows 10 course is now available
with more up-to-date instructions. You can still follow the original guide
below, but some things have gone out of date since I originally wrote it in
2016.


INFINITE RED ACADEMY


INSTALLING REACT NATIVE ON WINDOWS 10 CAN BE TRICKY -- WE HELP MAKE IT EASIER IN
THIS HELPFUL TUTORIAL!

academy.infinite.red




As a software engineer at Infinite Red, I have been privileged to work on
several React Native projects over the last month. Under the tutelage of

Steve Kellock,
Gant Laborde,
and
Mark Rickert,
I was shocked at how quickly I was able to ramp up on this new technology.
Normally a new technology takes me several months to get to a point where I can
feel productive on my own, but with React Native it only took a few days, so
huge kudos to them for setting up outstanding projects and the engineers at
Facebook for creating such an awesome framework.



> With a couple of recent announcements, namely Bash for Windows and React
> Native on the Universal Windows Platform, I began to wonder if React Native
> development on Windows might already be possible.

Spoiler alert: it is!

You may have noticed that while Facebook has detailed instructions for getting
started with React Native development on OS X, their instructions for getting
started on Windows were a little lacking. Here are the steps I went through to
get React Native running.

> Note: my computer is running a Windows Insider build that already has the Bash
> for Windows support mentioned above. If you are unable to wait until the Bash
> for Windows feature is released to the public or upgrade your Windows
> installation to an Insider build, your next best bet is to try a tool that
> includes Bash, like Git for Windows.


STEP 1: PREREQUISITES & PREP WORK

 * Download and install JDK (v7 or newer)
 * Download and install Node
 * Download and install Android Studio
 * Create an environment variable with the Java SDK path: Windows → Search →
   System → Advanced System Settings → Environment variables → New

JAVA_HOME: C:\path\to\JavaSDK


 * Due to a custom Android SDK installation location I also had to set an extra
   environment variable:

ANDROID_HOME: C:\path\to\AndroidSDK


STEP 2: CONFIGURE AN ANDROID VIRTUAL DEVICE

 * Set up Android Studio
 * Create an empty Android Studio project
 * Create an Android Virtual Device: Manage AVD → Create
 * Boot your Android Virtual Device


STEP 3: JUMP INTO COMMAND LINE

 * Open command prompt, jump into bash, and navigate to where you want your
   project to live

bash
cd /path/to/code

 * Install React Native globally:

npm install -g react-native-cli


 * Create a new React Native project (Note: this step may take a while):

react-native init AwesomeProject


 * CD into your new project
 * Optional: Configure Gradle Daemon for faster compiling:

((if not exist “%USERPROFILE%/.gradle” mkdir “%USERPROFILE%/.gradle”) && (echo org.gradle.daemon=true >> “%USERPROFILE%/.gradle/gradle.properties”))

 * Change your android/app/build.gradle file to use your installed version of
   Android SDK (I had to change mine from 23.0.1 to 23.0.3)
 * Start your application

react-native run-android


 * Manually start the packager (doesn’t currently start automatically on
   Windows, but probably will at some point in the future)

react-native start




PROFIT!


Yup! That’s React Native Android running on Windows!

As React Native becomes more popular, and the recently announced Windows support
begins to come online, the setup process is likely to become more streamlined.
In the meantime, hopefully this is enough to get you up and running! Stay tuned
for a future article detailing the setup process for running your React Native
project as a Windows application.




ABOUT KEVIN

Kevin is a Software Engineer at Infinite Red (web and mobile app development),
Microsoft fan-boy, tinkerer, open-source contributor, and student helicopter
pilot. Read the writings of Kevin and his co-workers in our Red Shift
publication.

Thanks to Ryan Linton, AJ Robertson, Gant Laborde, Jamon Holmgren, and Silas J.
Matson



1.8K



30



1.8K

1.8K

30





MORE FROM RED SHIFT

Follow

The official Infinite Red publication for React Native design & development.
We’re a fully distributed team building world-class apps for over 20 years for
clients all around the world.

Gant Laborde

·May 3, 2016


KEEPING UP WITH THE JETSONS

Hot tech moves fast; need tricks to keep up? — Imagine you’re a developer, and
you begin pairing with a “friend” when suddenly! You’re using a version of React
Native that is totally 13 hours outdated! What’s with you man!?

React Native

2 min read





--------------------------------------------------------------------------------

Share your ideas with millions of readers.

Write on Medium

--------------------------------------------------------------------------------

Gant Laborde

·Apr 25, 2016


FASTLANE — SIMPLE REACT NATIVE IOS RELEASES

React Native App Store Deployment & Zen — “COMPUTER! RELEASE THE APP!” — Outside
of Hollywood, this usually doesn’t work. Today, it pretty much will. With the
release setup in this article we can make App Store deployment effective by
making it simple. There’s no reason you can’t show updates to clients in the
same ease and speed…

I OS

9 min read





--------------------------------------------------------------------------------

Ryan Linton

·Apr 19, 2016


NATIVE MODULES FOR REACT NATIVE ANDROID

A guide to help you across the React Native bridge — When developing an Android
application with React Native you may need to access an API that doesn’t yet
have a corresponding React Native module. This can easily be done by writing
your own native module in Java and selectively exposing its public API to React
Native. …

React

4 min read





--------------------------------------------------------------------------------

Ken Miller

·Apr 4, 2016


THE DAY THEY INVENTED OFFICES

Knowledge Worker: Hey Real Estate Developer, long time no see! How’s business?
Real Estate Developer: Better and better! In fact, I wanted to talk to you about
something new we’re working on. KW: Why me? I’m no expert on real estate? RED:
Bear with me. You can think of it…

Remote Working

4 min read





--------------------------------------------------------------------------------

Zachary Berkompas

·Mar 29, 2016


HOW TO SET UP SASS LIVE RELOADING IN RAILS USING STYLE INJECTION

Last Thursday, I found myself twiddling my thumbs waiting for the browser to
reload for the umpteenth time and render my tiny CSS tweaks. I thought it would
be nice to have live reloading styles in Rails, like Phoenix, React, Ember or
many other new web frameworks. Then, the thought…

Rails

3 min read





--------------------------------------------------------------------------------

Read more from Red Shift


RECOMMENDED FROM MEDIUM

Rbcafe

//PLATFORM.TWITTER.COM/WIDGETS.JS



Daniel Mueller

I’M USING THIS NEW APP CALLED COINCIRCLE AND IT’S REALLY QUITE COOL.



Ruman Islam

IMPORTANT NOTE FOR JAVASCRIPT DEVELOPER



Parvez Alam

REACT BOOTSTRAP BUTTON EXAMPLE — BOOTSTRAP



Ole Ersoy

SUBSCRIBING TO DYNAMIC COMPONENT EVENTEMITTERS



Iftakher Uddin Rishad

LEARN SOME IMPORTANT TOPIC OF JAVASCRIPT



John Martinez

HOW TO BUILD A BIRTHDAY COUNTDOWN WEBSITE WITH JAVASCRIPT



Phoenix Pan

CREATE CUSTOM PRE-COMMIT HOOKS USING HUSKY



AboutHelpTermsPrivacy

--------------------------------------------------------------------------------


GET THE MEDIUM APP


Get started

Sign In


KEVIN VANGELDER


329 Followers


Senior Software Engineer at VanGelder Technologies, Microsoft fan-boy, tinkerer,
open-source contributor, and future homesteader.


Follow



MORE FROM MEDIUM

Kuray Ogun

in

FreakyCoder Software Blog

REACT NATIVE NOTES 29: FIREBASE GOOGLE SIGN-IN PROBLEM ON ANDROID APK



Ketan kumar

in

JavaScript in Plain English

AN OVERVIEW OF REACT NATIVE MOBILE APPLICATION DEVELOPMENT



AverageTechie

SETUP ANDROID STUDIO, LAUNCH REACT NATIVE APP



Looming Tech

FLUTTER VS REACT NATIVE: A DUALLY-BIASED REVIEW OF TWO TECHNOLOGIES



Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Knowable

To make Medium work, we log user data. By using Medium, you agree to our Privacy
Policy, including cookie policy.