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

https://dk2dyle8k4h9a.cloudfront.net/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.  

Neha Baluni
Written By
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.

Top Companies

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

Latest Articles

How To

How To Start Playing Retro Games On Your Apple Device

Vikram Khajuria 3 min read  

Tired of playing games that can be obtained through App Store? Want something fresh and exquisite? What about playing retro games? It won’t be even necessary to jailbreak your precious iOS device to play cool Nintendo creations. Go reading our tutorial to get to know how to install an emulator

How To

How To Retarget Your Mobile App Users Effectively?

Akash Singh Chauhan 4 min read  

All strategies for mobile apps have a similar key objective and that is 'focusing on how to make more and more people use the app'. And this is where the concept of app retargeting comes into picture because it is must easier to turn your already existing customers into your app's loyal

How To

Know The Complete Procedure of How To Remove Android Viruses

Neha Baluni 4 min read  

The number of Android applications infected with viruses is on an increase. These viruses affect the phone badly only to take a toll on the device processor. Not only it is a threat to the processor but also the safety of the files remains at stake. And, it is obviously not done to keep these affect

How To

How To Use Snapchat On Android Device

Vikram Khajuria 4 min read  

Do I need to explain the Snapchat? I hope not because there is already a lot of buzz around it. If the platform itself wasn’t popular enough among the masses, then its ‘Stories’ feature did the magic.To start with, I must tell you, when Snapchat was introduced in 2011, it was n