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
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.
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:
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:
Now open the rn-cli.config.js, which contains the settings for the React Native TypeScript Transformer. Open it to add the following settings:
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.
Adding TypeScript ( Infrastructure Testing)
Now open the package.json and replace the jest field with the following:
The setting will configure the .ts and .tsx files with ts-jest.
Installing Dependencies Type Declarations
Here is an example that illustrates the types for Jest, React, and React Native, and React Test Renderer.
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.
Committing files to the version control will help more, add following settings for the same.
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.
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.
It is now time to create a __tests__ folder in the components directory and add a test for Hello.tsx:
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.
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.