DEV Community

alican akyol
alican akyol

Posted on

Your code is clean, your libraries aren't: 29 popular React Native libraries still call APIs removed in 0.85 and 0.87

You searched your code for InteractionManager, replaced every call, and the upgrade to React Native 0.87 still crashes. The call is in node_modules.

React Native removed two widely used JavaScript APIs in the last few releases:

  • 0.85: StyleSheet.absoluteFillObject (release post)
  • 0.87: InteractionManager, and StatusBar's background colour and translucency (release post)

Renaming them in your own code is a five-minute job. The libraries you depend on are a different story, so I checked them.

How I checked

I took every dependency used by at least two of 900 open-source React Native and Expo apps from GitHub: 1,442 libraries. For each, I downloaded the latest published package from npm (nothing installed or run) and searched its shipped JavaScript for the removed APIs, comments stripped. Every hit was then confirmed with NativeKeel's own rules, and bisected across older releases to find the exact version range that has it.

Libraries that define their own copy of the API (Tamagui, Unistyles) were dropped, and so were React Native platform forks.

29 libraries are left, plus one hook library covered below. 123 of the 900 apps (14%) depend on an affected release of at least one of the 29.

The ones that crash: InteractionManager

A removed function is undefined, so the first call throws. In a debug build that's a red screen; in a release build the app closes. 58 of 900 apps depend on a library release that does this.

Library Releases Where Apps
react-native-modal 11.10.0 – 14.0.0 Modal 25
react-native-draggable-flatlist 4.0.3 DraggableFlatList 18
react-navigation-stack 2.0.0 – 2.10.4 stack card 8
react-native-svg-charts 5.3.0 – 5.4.0 animated paths 5
react-native-safe-area-view 1.0.0 – 1.1.1 SafeAreaView 3
react-navigation-shared-element 3.0.0 – 3.1.3 shared element scenes 2
react-native-walkthrough-tooltip 1.0.0 – 1.7.0 Tooltip 3
@shoutem/ui 9.0.0 – 9.2.1 HorizontalPager (and a StatusBar setter in ListView) –
react-native-dropdownalert 5.0.0 – 5.2.0 StatusBar setter –

Plus react-native-color-picker and react-native-deprecated-custom-components (2 apps each). A dash means no app in the sample uses an affected release.

@react-native-community/hooks exports useInteractionManager, but it only breaks if you call that hook, so it's not in the table.

The ones that break layout: absoluteFillObject

This one doesn't crash. StyleSheet.absoluteFillObject is now undefined, and spreading undefined in JavaScript is allowed, so { ...StyleSheet.absoluteFillObject } silently becomes {}. The overlay, backdrop or skeleton is still rendered, just no longer positioned over what it should cover. Nobody gets an error; someone eventually files a bug about a screen that looks wrong. 89 of 900 apps depend on one of these:

Library Releases Component affected Apps
react-native-calendars 1.1275.0 – 1.1314.0 Timeline 22
react-native-elements 3.0.0 – 3.4.3 SpeedDial and others 15
@rneui/base 4.0.0 – 5.0.0 Image 9
react-native-snap-carousel 3.0.0 – 3.9.1 ParallaxImage 15
moti 0.25.4 – 0.30.0 Skeleton 12
native-base 3.0.0 – 3.4.28 AspectRatio 3
react-native-flash-message 0.4.0 – 0.4.2 FlashMessage 7
react-native-image-viewing 0.2.0 – 0.2.2 Modal (Android) 5
react-native-skeleton-placeholder 5.0.0 – 5.2.4 SkeletonPlaceholder 5
@ui-kitten/components 4.4.1 – 6.2.1 TopNavigation, CircularProgressBar 4
react-native-ui-lib 9.0.0 – 9.1.3 HighlighterOverlayView –

Plus react-native-circular-progress-indicator, react-native-indicators, react-native-material-dropdown, @howljs/calendar-kit, react-native-video-player, react-native-shared-element and react-navigation-drawer.

Only the named component is affected: if you use react-native-calendars but never render Timeline, nothing changes for you.

What to do

  1. Find out which ones you actually ship. The lockfile tells you which packages are installed, not what they call. Search node_modules (or let a tool do it, below).
  2. Check for a newer release that drops the call. The ranges above are what's on npm today; some of these libraries are maintained and will fix it. I've opened fixes for two of them, still under review: react-native-elements #4043 (overlay layouts on 0.85+) and react-native-dropdownalert #322 (Android alerts on 0.87).
  3. If there's no fix, patch it. Both changes are one-liners: StyleSheet.absoluteFill has the same values and can be spread, and InteractionManager.runAfterInteractions(fn) can become requestIdleCallback(fn). Apply them with patch-package until upstream catches up, or move to a maintained alternative for unmaintained packages.
  4. Test the path in a release build. A red screen in development is easy to miss if that screen isn't on your test route.

Let a tool do step 1

npx nativekeel upgrade
Enter fullscreen mode Exit fullscreen mode

It's free, MIT licensed and runs locally. It reads your own code and your installed dependencies and gives a go / no-go for the newest React Native or Expo. A library that calls InteractionManager or a StatusBar setter is listed as a blocker with the package, version and file. An absoluteFillObject hit is listed for review with the affected component. With no node_modules, it matches the version ranges above from your lockfile.

If you maintain one of these libraries and have already fixed it, tell me in the comments and I'll update the range.

Top comments (0)