React Native 0.71 Invests in TypeScript: What You Need to Know

React Native, the popular framework for building cross-platform mobile applications, has released version 0.71, and it comes with significant enhancements for TypeScript users. These changes not only improve the developer experience but also streamline the use of TypeScript within the React Native ecosystem. In this article, we will dive into the key updates that 0.71 brings to the TypeScript experience.

New App Template is TypeScript By Default

One of the most notable changes in React Native 0.71 is the default TypeScript app template. When you create a new React Native app using the React Native CLI with version 0.71.0 or above, you will now get a TypeScript app by default. This means that the starting point of your newly generated app will be App.tsx instead of App.js, and it will be fully TypeScript typed right from the beginning.

To create a new TypeScript-based React Native app, you can use the following command:

npx react-native init My71App --version 0.71.0

With this update, React Native not only embraces TypeScript but also provides a tsconfig.json setup out of the box. This enables developers to start writing typed code immediately without any additional configuration.

Declarations Shipped with React Native

React Native 0.71 marks a significant milestone as it includes built-in TypeScript (TS) declarations for the first time. Previously, TypeScript declarations for React Native were provided by the @types/react-native package, which was hosted in the DefinitelyTyped repository.

The decision to co-locate TypeScript types with the React Native source code was made to enhance correctness and simplify maintenance. The old approach of using @types/react-native had its drawbacks. It only provided types for stable releases, which meant that developers working with pre-release versions of React Native had to rely on types from older releases, potentially leading to inaccuracies.

Additionally, managing @types/react-native releases was error-prone, as it required manual inspection of changes in React Native’s public API and updating the TypeScript declarations accordingly. With TypeScript types now integrated with React Native source code, there is better visibility and ownership of TypeScript types.

As part of this transition, React Native users can remove @types/react-native as a dependency when upgrading to version 0.71 or higher. Detailed instructions on setting up TypeScript support can be found in the new app template.

Looking ahead, React Native plans to deprecate @types/react-native starting from version 0.73. This means that for React Native versions 0.71 and 0.72, @types/react-native will still be available and identical to the types integrated into React Native. However, for version 0.73 and beyond, TypeScript types will only be available directly from React Native.

How to Migrate

For developers using React Native, migrating to the new co-located TypeScript types is recommended. The migration process varies depending on your role within the React Native ecosystem:

App Maintainer:

• If you upgrade to React Native version 0.71 or later, you can remove @types/react-native from your devDependencies.

Library Maintainer:

• If your library targets versions of React Native below 0.71, it may use @types/react-native as a peerDependency for typechecking against the app’s version of typings. In this case, mark this dependency as optional in peerDependenciesMeta to avoid requiring typings for users without TypeScript or for 0.71 users who already have built-in typings.

Maintainer of TypeScript Declarations:

• Ensure that your TypeScript declarations that depend on @types/react-native are compatible with the changes introduced in React Native 0.71. Be sure to review any breaking changes introduced with this release.

In conclusion, React Native 0.71’s investment in the TypeScript experience is a significant step forward for developers using TypeScript in their mobile app development workflow. These changes not only simplify the development process but also ensure greater accuracy and maintenance for TypeScript typings within the React Native ecosystem. Developers are encouraged to embrace these updates and migrate to the new TypeScript-first paradigm for an improved development experience.