Merge pull request Expensify#29755 from software-mansion-labs/ts-migr…

…ation/SafeAreaConsumer

[TS migration] Migrate 'SafeAreaConsumer.js' component to TypeScript

src/components/SafeAreaConsumer.js → src/components/SafeAreaConsumer.tsx

@@ -1,29 +1,34 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import type {DimensionValue} from 'react-native';
+import {EdgeInsets, SafeAreaInsetsContext} from 'react-native-safe-area-context';
 import * as StyleUtils from '@styles/StyleUtils';
 
-const propTypes = {
-    /** Children to render. */
-    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+type ChildrenProps = {
+    paddingTop?: DimensionValue;
+    paddingBottom?: DimensionValue;
+    insets?: EdgeInsets;
+    safeAreaPaddingBottomStyle: {
+        paddingBottom?: DimensionValue;
+    };
+};
+
+type SafeAreaConsumerProps = {
+    children: React.FC<ChildrenProps>;
 };
 
 /**
  * This component is a light wrapper around the SafeAreaInsetsContext.Consumer. There are several places where we
  * may need not just the insets, but the computed styles so we save a few lines of code with this.
- *
- * @param {Object} props
- * @returns {React.Component}
  */
-function SafeAreaConsumer(props) {
+function SafeAreaConsumer({children}: SafeAreaConsumerProps) {
     return (
         <SafeAreaInsetsContext.Consumer>
             {(insets) => {
-                const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
-                return props.children({
+                const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets ?? undefined);
+                return children({
                     paddingTop,
                     paddingBottom,
-                    insets,
+                    insets: insets ?? undefined,
                     safeAreaPaddingBottomStyle: {paddingBottom},
                 });
             }}
@@ -32,5 +37,5 @@ function SafeAreaConsumer(props) {
 }
 
 SafeAreaConsumer.displayName = 'SafeAreaConsumer';
-SafeAreaConsumer.propTypes = propTypes;
+
 export default SafeAreaConsumer;