Up and Running with React Native and TypeScript

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

In this post, I will go over how to quickly add TypeScript 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 here.

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 declaration 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 a tsconfig.json file.

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 atom-typescript 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.tsx
import React, { Component } from 'react'
import {
StyleSheet,
Text,
View
} from 'react-native'
interface Props {} // 1
interface 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.js
import 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 here.

My Name is Nader Dabit . I am a software consultant and trainer and the founder of React Native Training where we teach developers at top companies around the world how to quickly get up and running with React Native.
If you like React and React Native, checkout out our podcast — React Native Radio on Devchat.tv.
Also, check out my book, React Native in Action now available from Manning Publications
If you enjoyed this article, please recommend and share it! Thanks for your time