Menu

1 / 2

Metro doesn't type-check your React Native app, so I made Gradle do it

DEV Community: reactnative·Muhammad Mozzammel Haque·about 16 hours ago
#9lv1iW9J
#devtoreactnative#devto#dev#android#gradle
Reading 0:00
15s threshold

React Native never type-checks your TypeScript when it builds. Metro hands every file to Babel, Babel deletes the type annotations, and the bundle ships. A function that expects a number and gets a string bundles without a single warning. You find out at runtime, usually on a screen you didn't open while testing.

The editor underlines the error in red, so it's easy to assume the build checks it too. It doesn't. Only tsc does, and nothing runs tsc unless you tell it to.

I made type errors fail the build. It takes two pieces.

The npm script

In package.json :

{ "scripts" : { "typecheck" : "tsc --noEmit" , "android" : "npm run typecheck && react-native run-android" } }

Enter fullscreen mode

Exit fullscreen mode

--noEmit is the important flag. Metro already produces the JavaScript, so tsc only has to check.

The Gradle hook

The script covers anyone who starts the app with npm run android . It does nothing when someone presses Run in Android Studio, or when CI calls ./gradlew assembleRelease directly.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.