The simplest way to setup React Native with TypeScript

With the newest react-native 0.63 and typescript 4.0 in 2020.

Photo by Thought Catalog on Unsplash

If you are new to typescript and do not how to set up with react-native, you are reading the right blog.

I was going through some of the blogs on how to setup react-native with typescript but all look old way to setup. I have spent significant time finding the easiest way to set up and sharing this so that you do not need to spend extra time on this.

You can use npx react-native directly, do not need react-native CLI.

react-native has a typescript template to get started quickly.

run this command to get project setup with a typescript template.

npx react-native init MyApp --template react-native-template-typescript

If it fails with error react-native-template-typescript is not found, then make sure you do not have react-native CLI already in your system or old yarn react-native in your system. You can try this.

That's all!

It will setup react-native with basic typescript and will have below things set up for you.

• test file for typescript under the root directory with the name __test__/App-test.tsx
• tsconfig.json
• converted App.js to App.tsx
• It will have eslint, @types/react-native, @types/react-test-renderer, @typescript-eslint/eslint-plugin,@typescript-eslint/parser as well.

With this, you can start developing right away.

You can add furthermore typescript modules your own based on your need.

For more options and details you can look here.

Hope this helps without any confusion.

If you liked this article, feel free to clap or have any question please comment.