How To Use TypeScript With React Native
June 26 , 2020 Posted by Creatix9
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.
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’.
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
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
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.
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.
Also Read: Beginners Guide to Learn React Native CLI