How & Why to Collaborate Typescript with React Native
mobile app development

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.  

Twinkle <span>Product Strategist</span>
Written By
Twinkle Product Strategist

Twinkle is an experienced business and marketing consultant of the mobile app industry. She advocates perfect branding to the latest tech releases. She is passionate about writing well-researched reports to help the app owners and the mobile app industry audience. Also, she has a vibrant touch that goes well in her writing as well.

mobile app development

Top Cross Platform App Development Frameworks in 2019

4 min read  

Lots and lots of enterprises are changing their developmental processes by switching to the latest mobile application development frameworks. All of them want to reach their targeted audience fast with the help of the most updated technology.Technology is always volatile, and sticking to old tra

mobile app development

Everything About Angular Latest Version: Angular 8 Feature Updates

4 min read  

Angular 8 is here! So what do you expect from this most recent version of the open-source app development framework?Before moving towards gaining an insight into Angular 8 features, let’s help you understand the basic concept of Angular and AngularJS.What is Angular?Angular is also

mobile app development

Role of Agile Methodology In Redefining Mobile App Development Industry

4 min read  

‘Agile Methodology’ - one of those buzzwords that has been in the limelight for quite a few years now. From mobile app developers to testers to professionals with a technical background, they are well of how important the agile practices can be. This is one of the main reasons why we dec

mobile app development

Top Mobile App Testing Tools For App Developers In 2019

4 min read  

Mobile apps have become an integral part of our personal and professional lives and it has brought a revolution in the mobile app testing industry with an increased number of mobile testing tools. The mobile app tools exist for native apps, HTML5/web interfaces, iOS, Android, Windows, and other plat