fbpx

How To Use TypeScript With React Native

blog_detail_img

June 26 , 2020 Posted by Creatix9

With the increased demand of React Native, developers are switching over to this amazing language for creation of wonderful apps. A rapid growth in the community of React Native has been noticed in the recent years due to the continuous improvement of the framework. A wide variety of libraries and tools has also been introduced to facilitate the development of React Native apps. One of the most popular languages that has become essential for the developers is TypeScript. It’s an extension of JavaScript with addition of type definitions just like Flow. As React Native is built using Flow, it supports both Flow and TypeScript by default. 

Use this outstanding language for developing apps that are exceptional, user-friendly and interactive. Have a look on the complete guide on how to use TypeScript into your React Native applications. 

 

Initializing

How To Use TypeScript With React Native
Initializing

As you need to create mobile app design for multiple platforms for different types of devices, a basic setup should be built. First ensure your native app development is running successfully without the involvement of typescript. If there’s an issue with the app, try to resolve the issue before integrating typescript into it. To start with react typescript app, you need to have Node.js, npm and yarn installed on your device. Try to use the react-native 0.59 typescript version for a successful creation of the app with wonderful design. Initialize your project using the command of ‘react-native init projectname’, then to the next line ‘cd projectname’. 

 

Adding TypeScript

How To Use TypeScript With React Native
Adding TypeScript

The next step is to add the TypeScript into your React Native app using command ‘yarn add –dev typescript’. Move on to the next line for adding  ‘yarn add –dev react-native-typescript-transformer’ to your project. Then, initialize an empty file of TypeScript config which is used for configuration then add an empty config file of react native typescript transformer. Use the commands ‘yarn tsc –init –prety –jsx react’ and ‘touch rn-cli.config.js’.  Add typings for both Reach and React Native and place command ‘yarn add –dev @types/react @types/react-native’ on the next line. The file with name tsconfig.json contains all the TypeScript compiler settings. While the file of rn-cli.cofig.js contains React Native TypeScript Transformer settings.  

 

Migrating to Typescript

How To Use TypeScript With React Native
Migrating to Typescript

Now rename the generated files of App.js and __tests_/App.js to App.tsx. The file with name index.js should use the extension of .js, while all the new files should be using the extension of .tsx or .ts if the files doesn’t have any JSX. Don’t try to run the app at this time as it would only generate an error mentioning something like ‘object prototype may only be an object or null’.  Such errors are displayed due to the failure in importing default export from React. It may also arise because of the name exported on the same line. Now open the file of App.tsx and modify the top of the file for import. Now, you’ll be able to run your React Native app. For testing your app, React Native TypeScript Jest is required.  All you need is to add ts-jest to your devDependencies with command ‘yarn add –dev ts-jest’. 

 

Installing Dependency Type Declarations

How To Use TypeScript With React Native
Installing Dependency Type Declarations

Now you need to open the file of package.json to replace the jest field. It’ll allow you to configure the jest to run files of .ts and .tsx with ts-jest. To make the overall experience of TypeScript better in react native development, make the type-checker understand API of the dependencies. There are some libraries that publish the packages with files of .d.ts called as type declaration or type definition files. It describes the shape of the JavaScript that underlines within the files. To use another set of libraries, you need to explicitly install the package that is suitable within the scope of @types/npm. You can then save the declaration file packages to your dev dependencies as the app uses these only during the development process and not during runtime. 

 

Adding a Component

How To Use TypeScript With React Native
Adding a Component

Now you can add a component to the react native app for making it more functional. Start by creating a directory for components and avoiding using the HTML elements like span, div, h1 etc. Instead add the components like Button and View to your app so that it works perfectly across multiple platforms. While working with the components, set React Native TypeScript onpress on different situations. Surround your app with touchables or set the onpress on View controller itself. You style the app using StyleSheet.create function giving you all control over the layout of your React Native app. You can use style and Flexbox or other similar constructs available on the CSS to give style to your app. You have the option to use React Native TypeScript expo that allows you to use two available templates. 

 

Component Test 

How To Use TypeScript With React Native
Component Test

Finally, test the component added by using the same Jest installed previously. It’ll work as a test runner, thus write snapshots tests by adding the required add-ons like ‘yarn add –dev react -addons-test-utils’. Create a __tests__ folder into the directory of already built components. Add the test for the added component into the directory. As soon as the first test is run, it’ll create a rendered component’s snapshot. Then it’ll eventually be stored into the file of components/__tests__/__snapshots__/component_name.snap file. If you want to modify the component, you’ll first need to update the component snapshots. Then have a review of the update for inadvertent changes.    

 

Conclusion

Developing React Native apps with TypeScript gives a variety of benefits, making the entire development process easier and faster. If you talk about React Native TypeScript vs JavaScript, the first one would surely win due to the large range of features it offers. You can take help from different react native typescript medium blogs written to create amazing apps.

Also Read: Beginners Guide to Learn React Native CLI

Leave a Reply

Your email address will not be published. Required fields are marked *