From 5923ee50fc5bc871322c197d0d5b34d280475942 Mon Sep 17 00:00:00 2001
From: alessandro <alessandro.fan@welld.ch>
Date: Wed, 18 Aug 2021 01:22:12 -0700
Subject: [PATCH] refactor: remove DefaultProps from the StatusBar Component
 (#31631)

Summary:
Issue https://github.com/facebook/react-native/issues/31607. defaultProps makes it difficult to migrate components to functional.

## Changelog

[General] [Changed] -  Remove defaultProps from the StatusBar Component.

Pull Request resolved: https://github.com/facebook/react-native/pull/31631

Test Plan:
Verified the behaviour of the existing functionality after the removal on the RN Tester app.

https://user-images.githubusercontent.com/11355609/120085709-a2b35f80-c0da-11eb-94f2-2649270155ef.mov

Reviewed By: sota000

Differential Revision: D30259324

Pulled By: lunaleaps

fbshipit-source-id: 0c8841691198761589fdd029cab36629f7dfa757
---
 Libraries/Components/StatusBar/StatusBar.js   | 20 ++----
 .../StatusBar/__tests__/StatusBar-test.js     | 62 +++++++++++++++++++
 2 files changed, 68 insertions(+), 14 deletions(-)
 create mode 100644 Libraries/Components/StatusBar/__tests__/StatusBar-test.js

diff --git a/Libraries/Components/StatusBar/StatusBar.js b/Libraries/Components/StatusBar/StatusBar.js
index 4ba35f0f461d01..49c96f77e07335 100644
--- a/Libraries/Components/StatusBar/StatusBar.js
+++ b/Libraries/Components/StatusBar/StatusBar.js
@@ -127,19 +127,21 @@ function mergePropsStack(
  * and the transition/animation info.
  */
 function createStackEntry(props: any): any {
+  const animated = props.animated ?? false;
+  const showHideTransition = props.showHideTransition ?? 'fade';
   return {
     backgroundColor:
       props.backgroundColor != null
         ? {
             value: props.backgroundColor,
-            animated: props.animated,
+            animated,
           }
         : null,
     barStyle:
       props.barStyle != null
         ? {
             value: props.barStyle,
-            animated: props.animated,
+            animated,
           }
         : null,
     translucent: props.translucent,
@@ -147,8 +149,8 @@ function createStackEntry(props: any): any {
       props.hidden != null
         ? {
             value: props.hidden,
-            animated: props.animated,
-            transition: props.showHideTransition,
+            animated,
+            transition: showHideTransition,
           }
         : null,
     networkActivityIndicatorVisible: props.networkActivityIndicatorVisible,
@@ -221,8 +223,6 @@ class StatusBar extends React.Component<Props> {
   static _propsStack = [];
 
   static _defaultProps = createStackEntry({
-    animated: false,
-    showHideTransition: 'fade',
     backgroundColor:
       Platform.OS === 'android'
         ? NativeStatusBarManagerAndroid.getConstants()
@@ -384,14 +384,6 @@ class StatusBar extends React.Component<Props> {
     return newEntry;
   }
 
-  static defaultProps: {|
-    animated: boolean,
-    showHideTransition: $TEMPORARY$string<'fade'>,
-  |} = {
-    animated: false,
-    showHideTransition: 'fade',
-  };
-
   _stackEntry = null;
 
   componentDidMount() {
diff --git a/Libraries/Components/StatusBar/__tests__/StatusBar-test.js b/Libraries/Components/StatusBar/__tests__/StatusBar-test.js
new file mode 100644
index 00000000000000..a75d4fc1b0d31c
--- /dev/null
+++ b/Libraries/Components/StatusBar/__tests__/StatusBar-test.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @emails oncall+react_native
+ */
+
+'use strict';
+
+const React = require('react');
+const ReactTestRenderer = require('react-test-renderer');
+
+const StatusBar = require('../StatusBar');
+
+describe('StatusBar', () => {
+  it('renders the statusbar', () => {
+    const component = ReactTestRenderer.create(<StatusBar />);
+    expect(component).not.toBeNull();
+  });
+  it('renders the statusbar animated enabled', () => {
+    const component = ReactTestRenderer.create(<StatusBar animated={true} />);
+    expect(component.toTree().props.animated).toBe(true);
+  });
+  it('renders the statusbar with fade transition on hide', () => {
+    const component = ReactTestRenderer.create(<StatusBar hidden={true} />);
+    expect(component.toTree().props.hidden).toBe(true);
+  });
+  it('renders the statusbar with a background color', () => {
+    const component = ReactTestRenderer.create(
+      <StatusBar backgroundColor={'#fff'} />,
+    );
+    expect(component.toTree().props.backgroundColor).toBe('#fff');
+    expect(component.toTree().type._defaultProps.backgroundColor.animated).toBe(
+      false,
+    );
+  });
+  it('renders the statusbar with default barStyle', () => {
+    const component = ReactTestRenderer.create(<StatusBar />);
+    StatusBar.setBarStyle('default');
+    expect(component.toTree().type._defaultProps.barStyle.value).toBe(
+      'default',
+    );
+    expect(component.toTree().type._defaultProps.barStyle.animated).toBe(false);
+  });
+  it('renders the statusbar but should not be visible', () => {
+    const component = ReactTestRenderer.create(<StatusBar hidden={true} />);
+    expect(component.toTree().props.hidden).toBe(true);
+    expect(component.toTree().type._defaultProps.hidden.animated).toBe(false);
+    expect(component.toTree().type._defaultProps.hidden.transition).toBe(
+      'fade',
+    );
+  });
+  it('renders the statusbar with networkActivityIndicatorVisible true', () => {
+    const component = ReactTestRenderer.create(
+      <StatusBar networkActivityIndicatorVisible={true} />,
+    );
+    expect(component.toTree().props.networkActivityIndicatorVisible).toBe(true);
+  });
+});