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.

[shell]
react-native init MyAwesomeProject
cd MyAwesomeProject
[/shell]

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

[shell]
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
[/shell]

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:

[javascript]
{
“compilerOptions”: {
“allowJs”: true,
“allowSyntheticDefaultImports”: true,
“esModuleInterop”: true,
“isolatedModules”: true,
“jsx”: “react”,
“lib”: [
“es6”
],
“moduleResolution”: “node”,
“noEmit”: true,
“strict”: true,
“target”: “esnext”
},
“exclude”: [
“node_modules”,
“babel.config.js”,
“metro.config.js”,
“jest.config.js”
]
}
[/javascript]

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

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

Text

Example Text component use Typescript:

[javascript]
import React from ‘react’;
import {
Text as RNText,
TextStyle,
} 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’,
children,
style,
bold,
color,
…rest
}: TextProps) => (

{children}

)

export default Text;
[/javascript]

Example use Text component

[javascript]
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;
[/javascript]