Remove StatusBar deprecated props / methods (#57392)

Summary:
Removes long-deprecated `StatusBar` APIs that no longer do anything:

- Android: `backgroundColor` / `translucent` props and `setBackgroundColor()` / `setTranslucent()` (no effect under edge-to-edge, deprecated since 0.76).
- iOS: `networkActivityIndicatorVisible` prop and `setNetworkActivityIndicatorVisible()` (unsupported since iOS 13, deprecated since 0.77).

Also removes the now-unused native backing (`setColor`/`setTranslucent` Android, `setNetworkActivityIndicatorVisible` iOS, Android `DEFAULT_BACKGROUND_COLOR`).

See #57384.

## Changelog:

[GENERAL] [BREAKING] - Remove deprecated `StatusBar` `backgroundColor` / `translucent` / `networkActivityIndicatorVisible` props and `setBackgroundColor` / `setTranslucent` / `setNetworkActivityIndicatorVisible` methods

Pull Request resolved: #57392

Test Plan:
- `yarn flow check` — passes
- `yarn jest StatusBar` — passes
- `yarn test-typescript` — passes

Reviewed By: Abbondanzo, javache

Differential Revision: D110304943

Pulled By: cortinico

fbshipit-source-id: f7383c6bbbf8fd40042195ef7064b32692940499

Author: zoontek

packages/jest-preset/jest/mocks/NativeModules.js

@@ -186,15 +186,8 @@ const NativeModules = {
     },
   },
   StatusBarManager: {
-    setColor: jest.fn() as JestMockFn<$FlowFixMe, $FlowFixMe>,
     setStyle: jest.fn() as JestMockFn<$FlowFixMe, $FlowFixMe>,
     setHidden: jest.fn() as JestMockFn<$FlowFixMe, $FlowFixMe>,
-    setNetworkActivityIndicatorVisible: jest.fn() as JestMockFn<
-      $FlowFixMe,
-      $FlowFixMe,
-    >,
-    setBackgroundColor: jest.fn() as JestMockFn<$FlowFixMe, $FlowFixMe>,
-    setTranslucent: jest.fn() as JestMockFn<$FlowFixMe, $FlowFixMe>,
     getConstants: (): $FlowFixMe => ({
       HEIGHT: 42,
     }),

packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -89,12 +89,6 @@ class DrawerLayoutAndroid
     );
     const childrenWrapper = (
       <View style={styles.mainSubview} collapsable={false}>
-        {drawStatusBar && (
-          <StatusBar
-            translucent
-            backgroundColor={this.props.statusBarBackgroundColor}
-          />
-        )}
         {drawStatusBar && (
           <View
             style={[

packages/react-native/Libraries/Components/StatusBar/StatusBar.d.ts

@@ -8,7 +8,6 @@
  */
 
 import type * as React from 'react';
-import {ColorValue} from '../../StyleSheet/StyleSheet';
 
 export type StatusBarStyle =
   | 'default'
@@ -19,13 +18,6 @@ export type StatusBarStyle =
 export type StatusBarAnimation = 'none' | 'fade' | 'slide';
 
 export interface StatusBarPropsIOS {
-  /**
-   * If the network activity indicator should be visible.
-   *
-   * @platform ios
-   */
-  networkActivityIndicatorVisible?: boolean | undefined;
-
   /**
    * The transition effect when showing and hiding the status bar using
    * the hidden prop. Defaults to 'fade'.
@@ -35,34 +27,10 @@ export interface StatusBarPropsIOS {
   showHideTransition?: null | 'fade' | 'slide' | 'none' | undefined;
 }
 
-export interface StatusBarPropsAndroid {
-  /**
-   * The background color of the status bar.
-   *
-   * Please note that this prop has no effect on Android 15+
-   *
-   * @platform android
-   */
-  backgroundColor?: ColorValue | undefined;
-
-  /**
-   * If the status bar is translucent. When translucent is set to true,
-   * the app will draw under the status bar. This is useful when using a
-   * semi transparent status bar color.
-   *
-   * Please note that this prop has no effect on Android 15+
-   *
-   * @platform android
-   */
-  translucent?: boolean | undefined;
-}
-
-export interface StatusBarProps
-  extends StatusBarPropsIOS,
-    StatusBarPropsAndroid {
+export interface StatusBarProps extends StatusBarPropsIOS {
   /**
    * If the transition between status bar property changes should be
-   * animated. Supported for backgroundColor, barStyle and hidden.
+   * animated. Supported for barStyle and hidden.
    */
   animated?: boolean | undefined;
 
@@ -99,25 +67,6 @@ export class StatusBar extends React.Component<StatusBarProps> {
    */
   static setBarStyle: (style: StatusBarStyle, animated?: boolean) => void;
 
-  /**
-   * Control the visibility of the network activity indicator
-   * @param visible Show the indicator.
-   */
-  static setNetworkActivityIndicatorVisible: (visible: boolean) => void;
-
-  /**
-   * Set the background color for the status bar
-   * @param color Background color.
-   * @param animated Animate the style change.
-   */
-  static setBackgroundColor: (color: ColorValue, animated?: boolean) => void;
-
-  /**
-   * Control the translucency of the status bar
-   * @param translucent Set as translucent.
-   */
-  static setTranslucent: (translucent: boolean) => void;
-
   /**
    * Push a StatusBar entry onto the stack.
    * The return value should be passed to `popStackEntry` when complete.

packages/react-native/Libraries/Components/StatusBar/StatusBar.js

@@ -8,15 +8,12 @@
  * @format
  */
 
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
 
-import processColor from '../../StyleSheet/processColor';
 import * as Appearance from '../../Utilities/Appearance';
 import Platform from '../../Utilities/Platform';
 import NativeStatusBarManagerAndroid from './NativeStatusBarManagerAndroid';
 import NativeStatusBarManagerIOS from './NativeStatusBarManagerIOS';
-import invariant from 'invariant';
 import * as React from 'react';
 
 /**
@@ -62,39 +59,7 @@ export type StatusBarAnimation = keyof {
   ...
 };
 
-export type StatusBarPropsAndroid = Readonly<{
-  /**
-   * The background color of the status bar.
-   *
-   * @deprecated Has no effect on API level 35+ (Android 15+) due to
-   * edge-to-edge enforcement.
-   *
-   * @platform android
-   */
-  backgroundColor?: ?ColorValue,
-
-  /**
-   * If the status bar is translucent. When `true`, the app draws under the
-   * status bar. This is useful when using a semi-transparent status bar color.
-   *
-   * @deprecated Has no effect on API level 35+ (Android 15+) due to
-   * edge-to-edge enforcement.
-   *
-   * @default `false`
-   * @platform android
-   */
-  translucent?: ?boolean,
-}>;
-
 export type StatusBarPropsIOS = Readonly<{
-  /**
-   * If the network activity indicator should be visible.
-   *
-   * @default `false`
-   * @platform ios
-   */
-  networkActivityIndicatorVisible?: ?boolean,
-
   /**
    * The transition effect when showing and hiding the status bar using the
    * `hidden` prop.
@@ -115,7 +80,7 @@ type StatusBarBaseProps = Readonly<{
 
   /**
    * If the transition between status bar property changes should be animated.
-   * Supported for `backgroundColor`, `barStyle`, and `hidden`.
+   * Supported for `barStyle` and `hidden`.
    *
    * @default `false`
    */
@@ -130,27 +95,20 @@ type StatusBarBaseProps = Readonly<{
 }>;
 
 export type StatusBarProps = Readonly<{
-  ...StatusBarPropsAndroid,
   ...StatusBarPropsIOS,
   ...StatusBarBaseProps,
 }>;
 
 type StackProps = {
-  backgroundColor: ?{
-    value: StatusBarProps['backgroundColor'],
-    animated: boolean,
-  },
   barStyle: ?{
     value: StatusBarProps['barStyle'],
     animated: boolean,
   },
-  translucent: StatusBarProps['translucent'],
   hidden: ?{
     value: boolean,
     animated: boolean,
     transition: StatusBarProps['showHideTransition'],
   },
-  networkActivityIndicatorVisible: StatusBarProps['networkActivityIndicatorVisible'],
 };
 
 /**
@@ -198,21 +156,13 @@ function createStackEntry(props: StatusBarProps): StackProps {
   const animated = props.animated ?? false;
   const showHideTransition = props.showHideTransition ?? 'fade';
   return {
-    backgroundColor:
-      props.backgroundColor != null
-        ? {
-            value: props.backgroundColor,
-            animated,
-          }
-        : null,
     barStyle:
       props.barStyle != null
         ? {
             value: props.barStyle,
             animated,
           }
         : null,
-    translucent: props.translucent,
     hidden:
       props.hidden != null
         ? {
@@ -221,7 +171,6 @@ function createStackEntry(props: StatusBarProps): StackProps {
             transition: showHideTransition,
           }
         : null,
-    networkActivityIndicatorVisible: props.networkActivityIndicatorVisible,
   };
 }
 
@@ -276,15 +225,8 @@ class StatusBar extends React.Component<StatusBarProps> {
   static _propsStack: Array<StackProps> = [];
 
   static _defaultProps: any = createStackEntry({
-    backgroundColor:
-      Platform.OS === 'android'
-        ? (NativeStatusBarManagerAndroid.getConstants()
-            .DEFAULT_BACKGROUND_COLOR ?? 'black')
-        : 'black',
     barStyle: 'default',
-    translucent: false,
     hidden: false,
-    networkActivityIndicatorVisible: false,
   });
 
   // Timer for updating the native module values at the end of the frame.
@@ -347,67 +289,6 @@ class StatusBar extends React.Component<StatusBarProps> {
     }
   }
 
-  /**
-   * DEPRECATED - The status bar network activity indicator is not supported in
-   * iOS 13 and later. This will be removed in a future release.
-   *
-   * @param visible Show the indicator.
-   *
-   * @deprecated The status bar network activity indicator is not supported in
-   * iOS 13 and later.
-   */
-  static setNetworkActivityIndicatorVisible(visible: boolean) {
-    if (Platform.OS !== 'ios') {
-      console.warn(
-        '`setNetworkActivityIndicatorVisible` is only available on iOS',
-      );
-      return;
-    }
-    StatusBar._defaultProps.networkActivityIndicatorVisible = visible;
-    NativeStatusBarManagerIOS.setNetworkActivityIndicatorVisible(visible);
-  }
-
-  /**
-   * Set the background color for the status bar
-   * @param color Background color.
-   * @param animated Animate the style change.
-   */
-  static setBackgroundColor(color: ColorValue, animated?: boolean): void {
-    if (Platform.OS !== 'android') {
-      console.warn('`setBackgroundColor` is only available on Android');
-      return;
-    }
-    animated = animated || false;
-    StatusBar._defaultProps.backgroundColor.value = color;
-
-    const processedColor = processColor(color);
-    if (processedColor == null) {
-      console.warn(
-        `\`StatusBar.setBackgroundColor\`: Color ${String(color)} parsed to null or undefined`,
-      );
-      return;
-    }
-    invariant(
-      typeof processedColor === 'number',
-      'Unexpected color given for StatusBar.setBackgroundColor',
-    );
-
-    NativeStatusBarManagerAndroid.setColor(processedColor, animated);
-  }
-
-  /**
-   * Control the translucency of the status bar
-   * @param translucent Set as translucent.
-   */
-  static setTranslucent(translucent: boolean) {
-    if (Platform.OS !== 'android') {
-      console.warn('`setTranslucent` is only available on Android');
-      return;
-    }
-    StatusBar._defaultProps.translucent = translucent;
-    NativeStatusBarManagerAndroid.setTranslucent(translucent);
-  }
-
   /**
    * Push a StatusBar entry onto the stack.
    * The return value should be passed to `popStackEntry` when complete.
@@ -532,46 +413,13 @@ class StatusBar extends React.Component<StatusBarProps> {
               : 'none',
           );
         }
-
-        if (
-          !oldProps ||
-          oldProps.networkActivityIndicatorVisible !==
-            mergedProps.networkActivityIndicatorVisible
-        ) {
-          NativeStatusBarManagerIOS.setNetworkActivityIndicatorVisible(
-            mergedProps.networkActivityIndicatorVisible,
-          );
-        }
       } else if (Platform.OS === 'android') {
-        //todo(T60684787): Add back optimization to only update bar style and
-        //background color if the new value is different from the old value.
+        //todo(T60684787): Add back optimization to only update bar style if the
+        //new value is different from the old value.
         NativeStatusBarManagerAndroid.setStyle(mergedProps.barStyle.value);
-        const processedColor = processColor(mergedProps.backgroundColor.value);
-        if (processedColor == null) {
-          console.warn(
-            `\`StatusBar._updatePropsStack\`: Color ${mergedProps.backgroundColor.value} parsed to null or undefined`,
-          );
-        } else {
-          invariant(
-            typeof processedColor === 'number',
-            'Unexpected color given in StatusBar._updatePropsStack',
-          );
-          NativeStatusBarManagerAndroid.setColor(
-            processedColor,
-            mergedProps.backgroundColor.animated,
-          );
-        }
         if (!oldProps || oldProps.hidden?.value !== mergedProps.hidden.value) {
           NativeStatusBarManagerAndroid.setHidden(mergedProps.hidden.value);
         }
-        // Activities are not translucent by default, so always set if true.
-        if (
-          !oldProps ||
-          oldProps.translucent !== mergedProps.translucent ||
-          mergedProps.translucent
-        ) {
-          NativeStatusBarManagerAndroid.setTranslucent(mergedProps.translucent);
-        }
       }
       // Update the current prop values.
       StatusBar._currentValues = mergedProps;

packages/react-native/Libraries/Components/StatusBar/__tests__/StatusBar-test.js

@@ -27,14 +27,6 @@ describe('StatusBar', () => {
     const component = await create(<StatusBar hidden={true} />);
     expect(component.toTree()?.props.hidden).toBe(true);
   });
-  it('renders the statusbar with a background color', async () => {
-    const component = await create(<StatusBar backgroundColor={'#fff'} />);
-    expect(component.toTree()?.props.backgroundColor).toBe('#fff');
-    expect(
-      // $FlowFixMe[prop-missing]
-      component.toTree()?.type._defaultProps.backgroundColor.animated,
-    ).toBe(false);
-  });
   it('renders the statusbar with default barStyle', async () => {
     const component = await create(<StatusBar />);
     StatusBar.setBarStyle('default');
@@ -84,12 +76,4 @@ describe('StatusBar', () => {
       'fade',
     );
   });
-  it('renders the statusbar with networkActivityIndicatorVisible true', async () => {
-    const component = await create(
-      <StatusBar networkActivityIndicatorVisible={true} />,
-    );
-    expect(component.toTree()?.props.networkActivityIndicatorVisible).toBe(
-      true,
-    );
-  });
 });