Using Typescript with React Native

150 150 DevGate

Author: Shaban Qamar,

We all love JavaScript as it is the common language to build react native apps. But some of us also love types. Luckily, options exist to add stronger types to JavaScript. Our favorite is Typescript, but React Native Supports Flow out of the box. Today, we’re going to look at how to use Typescript in React Native apps.

Commands which are used

JavaScript:
To create react-native with JavaScript we use this command:
npx react-native init

TypeScript:
To create react-native app with typescript we use this command:
npx react-native init –template react-native-template-typescript
However, there are some limitations to Babel’s TypeScript support

Prerequisites

Since you might be developing on one of several different platforms, targeting several different types of devices, basic setup can be involved. You should first ensure that you can run a plain React Native app without Typescript. When you’ve managed to deploy to a device or emulator, you’ll be ready to start a Typescript React Native app.
You will also need Node.js, npm, and Yarn.

Initializing

Once you created the basic React Native project, you’ll be ready to start adding TypeScript. Let’s go ahead and do that.

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

The tsconfig.json file contains all the settings for the TypeScript compiler. The defaults created by the command above are mostly fine, but open the file and uncomment the following line:
{
/* Search the config file for the following line and uncomment it. */
// “allowSyntheticDefaultImports”: true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
}

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’];
}
};

Rename the generated App.js and App.js files to App.tsx. index.js needs to use the .js extension. All new files should use the .tsx extension (or .ts if the file doesn’t contain any JSX).

If you tried to run the app now, you’d get an error like object prototype may only be an object or null. This is caused by a failure to import the default export from React as well as a named export on the same line. Open App.tsx and modify the import at the top of the file:

import React, { Component } from ‘react’;
import React from ‘react’
import { Component } from ‘react’;

Adding TypeScript Testing Infrastructure

React Native ships with Jest, so for testing a React Native app with TypeScript, we’ll want to add ts-jest to our devDependencies.
Then, we’ll open up our package.json and replace the jest field with the following:
{
“jest”: {
“preset”: “react-native”,
“moduleFileExtensions”: [
“ts”,
“tsx”,
“js”
],
“transform”: {
“^.+\\.(js)$”: “/node_modules/babel-jest”,
“\\.(ts|tsx)$”: “/node_modules/ts-jest/preprocessor.js”
},
“testRegex”: “(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$”,
“testPathIgnorePatterns”: [
“\\.snap$”,
“/node_modules/”
],
“cacheDirectory”: “.jest/cache”
}
}
This will configure Jest to run .ts and .tsx files with ts-jest.
Ignoring More Files

Installing Dependency Type Declarations

To get the best experience in TypeScript, we want the type-checker to understand the shape and API of our dependencies. Some libraries will publish their packages with .d.ts files (type declaration/type definition files), which can describe the shape of the underlying JavaScript. For other libraries, we’ll need to explicitly install the appropriate package in the @types/ npm scope.

For example, here we’ll need types for Jest, React, and React Native, and React Test Renderer.

yarn add –dev @types/jest @types/react @types/react-native @types/react-test-renderer

We saved these declaration file packages to our dev dependencies because this is a React Native app that only uses these dependencies during development and not during runtime. If we were publishing a library to NPM, we might have to add some of these type dependencies as regular dependencies.

Ignoring More Files

For your source control, you’ll want to start ignoring the .jest folder. If you’re using git, we can just add entries to our .gitignore file.

# Jest
#
.jest/

As a checkpoint, consider committing your files into version control.
git init
git add .gitignore # import to do this first, to ignore our files
git add .
git commit -am “Initial commit.”

After adding and doing all the steps told above you are good to go you can create screens and components just like you do in JavaScript but remember you are no longer working on JavaScript its typescript so you have to work according to the environment you just have set up.
To run the project just type the following command:

For Android:

npx react-native run-android

For IOS:

npx react-native run-ios