React Native App use TypeScript

React Native Typescript

This post uses Microsoft’s TypeScript-React-Native-Starter repo as a guide.

Create react native app

Once you’ve tried scaffolding out an ordinary React Native project, you’ll be ready to start adding TypeScript. Let’s go ahead and do that.

react-native init MyAwesomeProject
cd MyAwesomeProject

Adding TypeScript

The next step is to add TypeScript to your project. The following commands will:

  • add TypeScript to your project
  • add React Native TypeScript Transformer to your project
  • initialize an empty TypeScript config file, which we’ll configure next
  • add an empty React Native TypeScript Transformer config file, which we’ll configure next
  • Adds typings for React and React Native

yarn add –dev typescript
yarn add –dev react-native-typescript-transformer
yarn tsc –init –pretty –jsx react-native
touch rn-cli.config.js
yarn add –dev @types/react @types/react-native

The tsconfig.json file contains all the settings for the TypeScript compile.
The defaults created by the command above are mostly fine, but open the file and uncomment the following line:

“compilerOptions”: {
“allowJs”: true,
“allowSyntheticDefaultImports”: true,
“esModuleInterop”: true,
“isolatedModules”: true,
“jsx”: “react”,
“lib”: [
“moduleResolution”: “node”,
“noEmit”: true,
“strict”: true,
“target”: “esnext”
“exclude”: [

The rn-cli.config.js contains the settings for the React Native TypeScript Transformer.
Open it and add the following:

module.exports = {
getTransformModulePath() {
return require.resolve(“react-native-typescript-transformer”);
getSourceExts() {
return [“ts”, “tsx”];


Example Text component use Typescript:

import React from ‘react’;
import {
Text as RNText,
} from ‘react-native’;
import {
Consts, // size of text
Colors, // color if text
} from ‘../../constants’;

export interface TextProps {
size?: ‘S’ | ‘M’ | ‘L’ | ‘XL’ | ‘XXL’; // size name
style?: TextStyle;
bold?: boolean,
color?: string,
children: React.ReactNode;

const getSize: { [key: string]: number } = Consts;

const checkSize = (size: string): number => {
return getSize[size] || 0;

const Text = ({
size = ‘M’,
}: TextProps) => (



export default Text;

Example use Text component

import React, { Component } from ‘react’;
import { View } from ‘react-native’;
import Text from ‘./Text’;

const Home = () => (

{/* prop size ‘S’ | ‘M’ | ‘L’ | ‘XL’ | ‘XXL’ */}
{/* same ’11’ | ’14’ | ’16’ | ’22’ | ’28’ */}
Text component 1

{/* use fontWeight bold */}
Text component 2

{/* custom color text */}
Text component 3

{/* add more style */}
Text component 4

{/* use onPress of Text react native */}
alert(“Hello from Text”)}>Text component 5


export default Home;