StatusBar backgroundColor and translucent removed in React Native 0.87
React Native 0.87 removed three StatusBar props and their setter methods. The release notes list it under API removals: "Removed deprecated StatusBar backgroundColor / translucent / networkActivityIndicatorVisible props and their setter methods."
What happens after the upgrade. The two ways of using them fail differently:
- As props (
<StatusBar backgroundColor="#0b5d55" translucent />): React Native 0.87 no longer reads them, so they are silently ignored. TypeScript fails the build, because the props are gone from the type definitions. - As setters (
StatusBar.setBackgroundColor(...),StatusBar.setTranslucent(...),StatusBar.setNetworkActivityIndicatorVisible(...)): the methods no longer exist, so the call throws aTypeError(it is not a function). In a development build that is a red screen; in a release build the screen or the app crashes where the call runs.
Why they went. On Android 15, apps that target API level 35 or higher are drawn edge-to-edge: the status bar is transparent, content draws behind it, and the system ignores the status bar colour (setStatusBarColor is deprecated and has no effect). Google Play requires a target of API 35 or higher, so these props had already stopped doing anything on current Android.
Fix.
- Remove
backgroundColor,translucentandnetworkActivityIndicatorVisiblefrom everyStatusBarimported fromreact-native, and delete the setter calls. - Keep
barStyle(andStatusBar.setBarStyle): it still sets light or dark status bar icons. - To colour the area behind the status bar, draw it yourself, using the top inset from react-native-safe-area-context:
import { useSafeAreaInsets } from 'react-native-safe-area-context';
function Screen({ children }) {
const insets = useSafeAreaInsets();
return (
<View style={{ flex: 1, paddingTop: insets.top, backgroundColor: '#0b5d55' }}>
<StatusBar barStyle="light-content" />
{children}
</View>
);
}
Search the project for setBackgroundColor, setTranslucent and setNetworkActivityIndicatorVisible first: those are the calls that crash.
Check before you upgrade. npx nativekeel upgrade lists the files that use these props or setters when your app is below React Native 0.87, with the other breaking changes between your version and the newest one. In our scan of 947 open-source React Native apps, 140 that are still below 0.87 use them.
npx nativekeel