Merge pull request #29745 from software-mansion-labs/ts-migration/sec…

…tion-list-component

[TS migration] Migrate 'SectionList' component to TypeScript

src/components/SectionList/index.android.js → src/components/SectionList/index.android.tsx

@@ -1,8 +1,10 @@
 import React, {forwardRef} from 'react';
-import {SectionList} from 'react-native';
+import {SectionList as RNSectionList} from 'react-native';
+import ForwardedSectionList from './types';
 
-const SectionListWithRef = forwardRef((props, ref) => (
-    <SectionList
+// eslint-disable-next-line react/function-component-definition
+const SectionListWithRef: ForwardedSectionList = (props, ref) => (
+    <RNSectionList
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         ref={ref}
@@ -11,8 +13,8 @@ const SectionListWithRef = forwardRef((props, ref) => (
         // eslint-disable-next-line react/jsx-props-no-multi-spaces
         removeClippedSubviews
     />
-));
+);
 
 SectionListWithRef.displayName = 'SectionListWithRef';
 
-export default SectionListWithRef;
+export default forwardRef(SectionListWithRef);

src/components/SectionList/index.tsx

@@ -0,0 +1,16 @@
+import React, {forwardRef} from 'react';
+import {SectionList as RNSectionList} from 'react-native';
+import ForwardedSectionList from './types';
+
+// 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);

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;