How & Why - The Reader's Digest To Collaborate Typescript with React Native

How & Why: The Reader's Digest To Collaborate Typescript with React Native

A JavaScript guide that matters

How To published date 23rd July, 2018 Neha Baluni

Typescript with React Native

It is again JavaScript, something that we all love to code with. The developer’s community that love JavaScript cannot ignore the charm of TypeScript. Fortunately, there are options to add robust types to JavaScript. And among all those types, I would like to offer some extra marks to TypeScript for offering a suite of functional features to the developers. React Native is already rich and the addition of TypeScript can offer it amazing features. The write-up will focus on how to use TypeScript in React Native apps.

Let’s get started

The requirements before we get started

  • You might be looking forward to developing hybrid apps that could use and run on different platforms

  • For developing an app that could have additional components could first run on plain React Native components

  • The additional components in the app may include Node.js, npm, yarn, and more

Initializing

Once you are done managing a simple React Native app, it is time for you to add the components of TypeScript, let’s get started with it.

Initializing

Adding TypeScript

It is time now to add TypeScript to the project. You can go with the following commands:

  • Include TypeScript to your project

  • Add React Native TypeScript Transformer to your project

  • Add up an empty TypeScript config file. We'll configure it later

  • Include an empty React Native TypeScript Transformer config file, that will be configured next

  • Add typings for React and React Native

It’s showtime now, let’s run it all whatever we have described here:

adding typescript

The tsconfig.json has all the settings for the TypeScript compiler. The defaults created by the command above are mostly fine, but it is recommended to open the file and uncomment the following line:

typescript 2

Now open the rn-cli.config.js, which contains the settings for the React Native TypeScript Transformer. Open it to add the following settings:

module typescript

Components to Migrate to TypeScript

It is now time to rename the generated App.js and __tests_/App.js files to App.tsx. Index.js. You will need .js extension to alter the components. The new files must use .tsx extension (or .ts if the file doesn't contain any JSX).

Running your app at this moment may give you an error like “object prototype may only be an object or null.” It is due to an error caused by a failure to import the default export from React. To alter the default settings open, App.tsx to modify the import.

components to migrate to

Adding TypeScript ( Infrastructure Testing)

React Native goes with Jest, so for adding a React Native app with TypeScript, it is important to add  ts-jest to our devDependencies.

adding component typescript

Now open the package.json and replace the jest field with the following:

adding typescript component 2

The setting will configure the .ts and .tsx files with ts-jest.

Installing Dependencies Type Declarations

To impart the best experience in TypeScript, the type-checker must understand the shape and API of the dependencies. Some libraries will have their packages with .d.ts files (type declaration/type definition files) that describes the shape of the underlying JavaScript.

Here is an example that illustrates the types for Jest, React, and React Native, and React Test Renderer.

installing dependencies

Ignoring Other Files

Start ignoring the .jest folder for your source control. In case, you are using git, you can add entries to .gitignore file.

ignoring the files

Committing files to the version control will help more, add following settings for the same.

ignoring filters

Adding a component

It is now the time to add the components in our application. And it requires to create Hello.tsx component. This pedagogical component is not necessary to add to the app. This section has just been written to show you how to use TypeScript in React Native.

First, create components and add the following example.

typescript programming

It’s a big chunk of code so let’s break it down.

  • The components here uses elements like View and Button instead of using HTML components like div, span, h1, etc., instead of HTML. These native components work across different platforms.

  • Here styling is specified using the StyleSheet.create function. It is because of React’s stylesheet that help us to control the layout using Flexbox, style it using CSS.

Adding the Component Test

Now that we have component let’s try testing it.

There is Jest installed as a test runner. And now we are going to write snapshot test for our component. Let’s include the required add-ons.

adding comment

It is now time to create a __tests__ folder in the components directory and add a test for Hello.tsx:

adding component set

For the first time when the test will run, it will create a snapshot of the rendered component to store it in the components/__tests__/__snapshots__/Hello.tsx.snap file. In case, you need to modify your components, do not forget to add the snapshots. Also review the updates for inadverted changes. Here is more on how to test Jest in React Native.

The Upshot

This is all on adding TypeScript to React Native apps. It’s just the basic introduction that we have covered in this article. We will surely cover a complete write-up on the topic some other day. Do let us know how this article reads.  

Neha Baluni

Neha Baluni

Being a Senior Technical Writer at MobileAppDaily, Neha Baluni loves jotting down her piece of opinion for the advancing technology in mobile app world. Having a journalism background, she is a writer by day and a reader by night. Her passion for writing covers different categories of technical and non-technical genre. In addition to writing, Neha loves traveling a lot.

Was this article helpful?

Show Comments
0