Make SafeAreView flow strict-local

Summary:
The forwardRef calls were able to be cleaned up and consolidated a bit.

Changelog:
[Changed][SafeAreaView] Improved SafeAreaView's typing, removing extra underscore from display name

Reviewed By: cpojer

Differential Revision: D17881901

fbshipit-source-id: 00f876d34600f4cfd44075eb7ad7192c9a885907

Libraries/Components/SafeAreaView/SafeAreaView.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
@@ -12,6 +12,7 @@ const Platform = require('../../Utilities/Platform');
 const React = require('react');
 const View = require('../View/View');
 
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 type Props = $ReadOnly<{|
@@ -19,7 +20,10 @@ type Props = $ReadOnly<{|
   emulateUnlessSupported?: boolean,
 |}>;
 
-let exported: Class<React$Component<Props>>;
+let exported: React.AbstractComponent<
+  Props,
+  React.ElementRef<HostComponent<mixed>>,
+>;
 
 /**
  * Renders nested content and automatically applies paddings reflect the portion
@@ -31,37 +35,27 @@ let exported: Class<React$Component<Props>>;
  * sensor housing area on iPhone X).
  */
 if (Platform.OS === 'android') {
-  const SafeAreaView = (
-    props: Props,
-    forwardedRef?: ?React.Ref<typeof View>,
-  ) => {
-    const {emulateUnlessSupported, ...localProps} = props;
-    return <View {...localProps} ref={forwardedRef} />;
-  };
-
-  const SafeAreaViewRef = React.forwardRef(SafeAreaView);
-  SafeAreaViewRef.displayName = 'SafeAreaView';
-  exported = ((SafeAreaViewRef: any): Class<React.Component<Props>>);
+  exported = React.forwardRef<Props, React.ElementRef<HostComponent<mixed>>>(
+    function SafeAreaView(props, forwardedRef) {
+      const {emulateUnlessSupported, ...localProps} = props;
+      return <View {...localProps} ref={forwardedRef} />;
+    },
+  );
 } else {
   const RCTSafeAreaViewNativeComponent = require('./RCTSafeAreaViewNativeComponent')
     .default;
 
-  const SafeAreaView = (
-    props: Props,
-    forwardedRef?: ?React.Ref<typeof RCTSafeAreaViewNativeComponent>,
-  ) => {
-    return (
-      <RCTSafeAreaViewNativeComponent
-        emulateUnlessSupported={true}
-        {...props}
-        ref={forwardedRef}
-      />
-    );
-  };
-
-  const SafeAreaViewRef = React.forwardRef(SafeAreaView);
-  SafeAreaViewRef.displayName = 'SafeAreaView';
-  exported = ((SafeAreaViewRef: any): Class<React.Component<Props>>);
+  exported = React.forwardRef<Props, React.ElementRef<HostComponent<mixed>>>(
+    function SafeAreaView(props, forwardedRef) {
+      return (
+        <RCTSafeAreaViewNativeComponent
+          emulateUnlessSupported={true}
+          {...props}
+          ref={forwardedRef}
+        />
+      );
+    },
+  );
 }
 
 module.exports = exported;

Libraries/Components/SafeAreaView/__tests__/__snapshots__/SafeAreaView-test.js.snap

@@ -25,21 +25,21 @@ exports[`<SafeAreaView /> should render as <SafeAreaView> when not mocked 1`] =
 `;
 
 exports[`<SafeAreaView /> should shallow render as <ForwardRef(SafeAreaView)> when mocked 1`] = `
-<ForwardRef(_SafeAreaView)>
+<ForwardRef(SafeAreaView)>
   <View>
     <Text>
       Hello World!
     </Text>
   </View>
-</ForwardRef(_SafeAreaView)>
+</ForwardRef(SafeAreaView)>
 `;
 
 exports[`<SafeAreaView /> should shallow render as <ForwardRef(SafeAreaView)> when not mocked 1`] = `
-<ForwardRef(_SafeAreaView)>
+<ForwardRef(SafeAreaView)>
   <View>
     <Text>
       Hello World!
     </Text>
   </View>
-</ForwardRef(_SafeAreaView)>
+</ForwardRef(SafeAreaView)>
 `;