React Native TypeScript Maintenance

Many users in the React Native community use TypeScript in their projects. Because Meta engineers work primarily in Flow, the React Native JavaScript codebase is type-checked in Flow by default. To supplement, there is a TypeScript library definition for React Native.

Where to get TypeScript types for React Native?

For React Native 0.71 and lower, the TypeScript definitions are supplied via @types/react-native.

In React Native 0.71, we have started migrating the TypeScript definitions to be released with the react-native package and to replace @types/react-native for versions 0.72 and above. This means one less dependency required.

How do the TS types stay accurate?

To ensure TypeScript types accurately reflect the React Native codebase, there has been work by our partners to generate TS declarations from Flow declarations. See work in flow2dts. This work is still in development and cannot currently be used.

To mitigate in this interim, the React Native team is adding Flow declarations and nomenclature to signal when Flow types have been updated and ensuring our tooling properly alerts us.

As part of this you'll see the following nomenclature:

• <FILENAME>.flow.js - These are files that only contain types and no JS implementation
• <FILENAME>.js.flow - These are Flow declarations that shadow the JS implementation of FILENAME and defines the types of the module.

Creating Flow Declaration for React Native

Please add the following docblock to any added js.flow files:

/**
 * This is a Flow declaration file and defines the types for <YOUR_FILENAME>.*.js
 * See https://github.com/facebook/react-native/wiki/React-Native-TypeScript-Maintenance
 * for more details
 */

and for flow.js files:

/**
 * This is .flow.js file and should only export Flow types
 * See https://github.com/facebook/react-native/wiki/React-Native-TypeScript-Maintenance
 * for more details
 */

FAQ

Why the two formats *.flow.js and *.js.flow?

• FILENAME.js.flow is specifically a Flow declaration and refer to this file as the types for FILENAME.js. Learn more here. These files are not included in our npm package.
• <FILENAME>.flow.js is a simply a pattern our team devised to signal that a certain file should only contain types. These exist throughout React Native, say as the props of our core components like ViewProps.js. We could have created a ViewProps.js.flow that declares the types the types that we're exposing in ViewProps.js -- however this felt like un-unnecessary bloat. In addition, React Native supports platform branching via *.<platform>.js. If we lived in a world where we had ViewProps.android.js and ViewProps.ios.js -- we'd need to create the equivalent *.js.flow files which gets quite redundant.