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

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

A JavaScript guide that matters

How & Why: The Reader\'s Digest To Collaborate 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.  

MAD Team
Written By

MobileAppDaily host a team of experienced technical writers, industry wizards, and app experts who have an exact knack of content that caters to the needs of the mobile app targeted audience. We strive to bring you the best of tech!

Top Companies

InMobi
Singapore
Dot Com Infoway
New York, USA
M&C Saatchi Mobile
New York City, USA
Techmagnate
New Delhi, India
Fetch
London, UK
View full report

Latest Articles

Join our global community 135K Followers
How To

How To Update Your Android Device: 5 Ways To Upgrade Your Smartphone

MAD Team 4 min read  

In order to benefit from the latest features, the best approach is to keep your operating system updated with the newest release in the respective OS. This blog will take you through the manual and OTA (over the air) update to help you know how to update your Android operating system. These updates

How To

How To Improve Your Mobile App Security? Here Is The Guide

MAD Team 7 min read  

In this digitized world, mobile apps have virtually become part of our lives. From the alarm clock to booking a cab for office and from ordering grocery in the evening to late night texts, we all are covered under the umbrella of mobile apps. So, it becomes very crucial that we trust the platform on

How To

How to Know If Influencer Marketing Is Right for Your App?

MAD Team 4 min read  

With more brands targeting the same consumers and so much content generated every single day, it is becoming harder for brands to reach their target audience. This has led to many brands going back to the drawing board to strategize on how to reach their consumers faster. In the past few years, infl

How To

How to Improve Your Developers' Productivity

MAD Team 4 min read  

Most marketers know this already, but it is not easy and almost impossible to hire inexpensive developers for your service and for the most part, they are quite hard to find as well. For anyone out there who has spent a considerable amount of time working on a service, they will know that the time o