Up and Running with React Native and TypeScript

Nader Dabit
Apr 29, 2017 · 4 min read

Quick and modern guide to getting started with React Native and TypeScript

Image for post
Image for post

In this post, I will go over how to quickly add to a React Native project.

TypeScript is being picked up by a lot of projects these days. It gives JavaScript static typing, and helps simplify relations between various components.

In our project, we will automatically compile our TypeScript into ready to run JavaScript whenever we save a file in our text editor.

To check out the final boilerplate, click .

This project assumes that you already have React Native CLI setup and working on your machine

The first thing we will do is create a new React Native project:

react-native init rntypescript

After the project is created, cd into the directory

cd rntypescript

The next thing we need to do is make sure we have TypeScript installed globally on our machine:

npm i -g typescript

Now, we need to go ahead and install the types we will be needing for React and React Native.

These types give us files for both React and React Native.

yarn add @types/react-native @types/react

Now that we have our dependencies set up, we need to create afile.

This file will let us dictate things like the root files, compiler options, and output directory for the compiled JavaScript that we will end up using in our app.

In the root of the directory, create a tsconfig.json with the following options:

{
"compilerOptions": { // 1
"target": "es2015",
"module": "es2015",
"jsx": "react",
"outDir": "build",
"rootDir": "src",
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"experimentalDecorators": true,
"preserveConstEnums": true,
"allowJs": true,
"sourceMap": true
},
"exclude": [ // 2
"index.android.js",
"index.ios.js",
"build",
"node_modules",
"__tests__"
],
"compileOnSave": true // 3
}
  1. compilerOptions — In this key, we specify some configuration to make sure this project works with our React project, specify the root directory (rootDir) where our TypeScript code will be, and specify the output directory (outDir) where our compiled JavaScript will be.
  2. exclude — tell typescript which files to ignore
  3. compileOnSave — If you are using Visual Studio or Atom editor (with the plugin), this will automatically compile your code when you save the file. We will also be implementing this manually from the command line, so this configuration could be completely optional.

Now, all of our configuration and setup is complete. The next thing we need to do is create a src directory, and add an index.tsx file there:

// index.tsximport React, { Component } from 'react'
import {
StyleSheet,
Text,
View
} from 'react-native'
interface Props {} // 1interface State { // 2
name: string
}
export default class App extends Component<Props, State> { // 3 state = { name: 'Nader' } // 4

render() {
return (
<View style={styles.container}>
<Text style={styles.text}>
Welcome {this.state.name}! // 5
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
text: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
  1. We create an empty Props interface
  2. We create a State interface, and give it a shape of name: string
  3. When we create our component, we now pass in our two interfaces
  4. create the state with a single value: name
  5. we use the state like we normally would in any component

The last thing we need to do is update the index.ios.js or index.android.js files, depending on our platform.

index.ios.js / index.android.jsimport React from 'react';
import {
AppRegistry
} from 'react-native';
import App from './build'const rntypescript = () => <App />AppRegistry.registerComponent('rntypescript', () => rntypescript);

Notice we are not importing from our src directory, as these are our uncompiled TypeScript files.

What we want is the compiled JavaScript which will show up in a new build directory when we compile our code in the next step after this one, which we import here as App.

The last thing we need to do is run the TypeScript compiler, and then open our App!

In your terminal, run this command:

tsc -w

Now, if we look in our app, we should see a new build directory with the compiled code.

From this point, you should be able to run your React Native app like you would normally.

The final code is available for download .

My Name is . I am a Developer Advocate at working with projects like and , and the founder of .

If you like React and React Native, checkout out our podcast — on .

Also, check out my book, now available from Manning Publications

If you enjoyed this article, please recommend and share it! Thanks for your time

React Native Training

Stories and tutorials for developers interested in React…

Nader Dabit

Written by

Developer Advocate at AWS Mobile — Specializing in Teaching and Building React & React Native — http://reactnative.training https://aws.amazon.com/mobile

React Native Training

Stories and tutorials for developers interested in React Native

Nader Dabit

Written by

Developer Advocate at AWS Mobile — Specializing in Teaching and Building React & React Native — http://reactnative.training https://aws.amazon.com/mobile

React Native Training

Stories and tutorials for developers interested in React Native

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

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