From a0def82ca254ce3efaa06b45ba024a287db14727 Mon Sep 17 00:00:00 2001
From: Bartosz Grajdek <bartosz.grajdek@swmansion.com>
Date: Tue, 17 Oct 2023 11:00:56 +0200
Subject: [PATCH 1/2] [TS migration] Migrate 'SectionList' component to
 TypeScript

---
 src/components/SectionList/index.android.js    | 14 --------------
 src/components/SectionList/index.android.tsx   | 18 ++++++++++++++++++
 .../SectionList/{index.js => index.tsx}        |  0
 3 files changed, 18 insertions(+), 14 deletions(-)
 delete mode 100644 src/components/SectionList/index.android.js
 create mode 100644 src/components/SectionList/index.android.tsx
 rename src/components/SectionList/{index.js => index.tsx} (100%)

diff --git a/src/components/SectionList/index.android.js b/src/components/SectionList/index.android.js
deleted file mode 100644
index 7fc74277a281..000000000000
--- a/src/components/SectionList/index.android.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, {forwardRef} from 'react';
-import {SectionList} from 'react-native';
-
-export default forwardRef((props, ref) => (
-    <SectionList
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        ref={ref}
-        // For Android we want to use removeClippedSubviews since it helps manage memory consumption. When we
-        // run out memory images stop loading and appear as grey circles
-        // eslint-disable-next-line react/jsx-props-no-multi-spaces
-        removeClippedSubviews
-    />
-));
diff --git a/src/components/SectionList/index.android.tsx b/src/components/SectionList/index.android.tsx
new file mode 100644
index 000000000000..2ebe69bfa997
--- /dev/null
+++ b/src/components/SectionList/index.android.tsx
@@ -0,0 +1,18 @@
+import React, {ForwardedRef, forwardRef} from 'react';
+import {SectionListProps, SectionList} from 'react-native';
+
+function SectionListWithoutSubviews(props: SectionListProps<SectionList>, ref: ForwardedRef<SectionList>) {
+    return (
+        <SectionList
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={ref}
+            // For Android we want to use removeClippedSubviews since it helps manage memory consumption. When we
+            // run out memory images stop loading and appear as grey circles
+            // eslint-disable-next-line react/jsx-props-no-multi-spaces
+            removeClippedSubviews
+        />
+    );
+}
+
+export default forwardRef(SectionListWithoutSubviews);
diff --git a/src/components/SectionList/index.js b/src/components/SectionList/index.tsx
similarity index 100%
rename from src/components/SectionList/index.js
rename to src/components/SectionList/index.tsx

From 5454bdec9dd140c2f07876d9b9185ce8987dcfbf Mon Sep 17 00:00:00 2001
From: Bartosz Grajdek <bartosz.grajdek@swmansion.com>
Date: Thu, 19 Oct 2023 12:57:27 +0200
Subject: [PATCH 2/2] [TS migration] Migrate 'SectionList' component to
 TypeScript

---
 src/components/SectionList/index.android.tsx | 34 +++++++++++---------
 src/components/SectionList/index.tsx         | 17 ++++++++--
 src/components/SectionList/types.ts          |  9 ++++++
 3 files changed, 42 insertions(+), 18 deletions(-)
 create mode 100644 src/components/SectionList/types.ts

diff --git a/src/components/SectionList/index.android.tsx b/src/components/SectionList/index.android.tsx
index 2ebe69bfa997..a50e9102e473 100644
--- a/src/components/SectionList/index.android.tsx
+++ b/src/components/SectionList/index.android.tsx
@@ -1,18 +1,20 @@
-import React, {ForwardedRef, forwardRef} from 'react';
-import {SectionListProps, SectionList} from 'react-native';
+import React, {forwardRef} from 'react';
+import {SectionList as RNSectionList} from 'react-native';
+import ForwardedSectionList from './types';
 
-function SectionListWithoutSubviews(props: SectionListProps<SectionList>, ref: ForwardedRef<SectionList>) {
-    return (
-        <SectionList
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            ref={ref}
-            // For Android we want to use removeClippedSubviews since it helps manage memory consumption. When we
-            // run out memory images stop loading and appear as grey circles
-            // eslint-disable-next-line react/jsx-props-no-multi-spaces
-            removeClippedSubviews
-        />
-    );
-}
+// eslint-disable-next-line react/function-component-definition
+const SectionList: ForwardedSectionList = (props, ref) => (
+    <RNSectionList
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        ref={ref}
+        // For Android we want to use removeClippedSubviews since it helps manage memory consumption. When we
+        // run out memory images stop loading and appear as grey circles
+        // eslint-disable-next-line react/jsx-props-no-multi-spaces
+        removeClippedSubviews
+    />
+);
 
-export default forwardRef(SectionListWithoutSubviews);
+SectionList.displayName = 'SectionList';
+
+export default forwardRef(SectionList);
diff --git a/src/components/SectionList/index.tsx b/src/components/SectionList/index.tsx
index 55410d664736..1c89b50468dd 100644
--- a/src/components/SectionList/index.tsx
+++ b/src/components/SectionList/index.tsx
@@ -1,3 +1,16 @@
-import {SectionList} from 'react-native';
+import React, {forwardRef} from 'react';
+import {SectionList as RNSectionList} from 'react-native';
+import ForwardedSectionList from './types';
 
-export default SectionList;
+// eslint-disable-next-line react/function-component-definition
+const SectionList: ForwardedSectionList = (props, ref) => (
+    <RNSectionList
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        ref={ref}
+    />
+);
+
+SectionList.displayName = 'SectionList';
+
+export default forwardRef(SectionList);
diff --git a/src/components/SectionList/types.ts b/src/components/SectionList/types.ts
new file mode 100644
index 000000000000..093cb8f4e77c
--- /dev/null
+++ b/src/components/SectionList/types.ts
@@ -0,0 +1,9 @@
+import {ForwardedRef} from 'react';
+import {SectionList, SectionListProps} from 'react-native';
+
+type ForwardedSectionList = {
+    (props: SectionListProps<SectionList>, ref: ForwardedRef<SectionList>): React.ReactNode;
+    displayName: string;
+};
+
+export default ForwardedSectionList;