From 98f89ada062eec261414497e82626cd79bb8f783 Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Tue, 17 Oct 2023 14:02:53 +0200
Subject: [PATCH 1/2] [TS migration] Migrate 'SafeAreaConsumer.js' component to
 TypeScript

---
 ...feAreaConsumer.js => SafeAreaConsumer.tsx} | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)
 rename src/components/{SafeAreaConsumer.js => SafeAreaConsumer.tsx} (55%)

diff --git a/src/components/SafeAreaConsumer.js b/src/components/SafeAreaConsumer.tsx
similarity index 55%
rename from src/components/SafeAreaConsumer.js
rename to src/components/SafeAreaConsumer.tsx
index 78d7426ba380..c2439e25ecd3 100644
--- a/src/components/SafeAreaConsumer.js
+++ b/src/components/SafeAreaConsumer.tsx
@@ -1,29 +1,34 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import {EdgeInsets, SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import {DimensionValue} from 'react-native';
 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: (props: ChildrenProps) => React.ReactNode;
 };
 
 /**
  * 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;

From eab87d28d3a3747f68f1096e2b68f03583799a64 Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Wed, 18 Oct 2023 13:05:00 +0200
Subject: [PATCH 2/2] Adjust after internal review

---
 src/components/SafeAreaConsumer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SafeAreaConsumer.tsx b/src/components/SafeAreaConsumer.tsx
index c2439e25ecd3..dec0964b34a9 100644
--- a/src/components/SafeAreaConsumer.tsx
+++ b/src/components/SafeAreaConsumer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {EdgeInsets, SafeAreaInsetsContext} from 'react-native-safe-area-context';
-import {DimensionValue} from 'react-native';
+import type {DimensionValue} from 'react-native';
 import * as StyleUtils from '../styles/StyleUtils';
 
 type ChildrenProps = {
@@ -13,7 +13,7 @@ type ChildrenProps = {
 };
 
 type SafeAreaConsumerProps = {
-    children: (props: ChildrenProps) => React.ReactNode;
+    children: React.FC<ChildrenProps>;
 };
 
 /**