fix: fixed typescript declarations and upgrade flat-list-mvcp to 0.10.0

Author: vishalnarkhede

babel.config.js

@@ -1,3 +1,6 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: [
+    'module:metro-react-native-babel-preset',
+    '@babel/preset-typescript',
+  ],
 };

example/babel.config.js

@@ -1,16 +1,6 @@
-const path = require('path');
-const pak = require('../package.json');
-
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
-  plugins: [
-    [
-      'module-resolver',
-      {
-        alias: {
-          [pak.name]: path.join(__dirname, '..', pak.source),
-        },
-      },
-    ],
+  presets: [
+    'module:metro-react-native-babel-preset',
+    '@babel/preset-typescript',
   ],
 };

example/package.json

@@ -9,7 +9,7 @@
     "start": "react-native start"
   },
   "dependencies": {
-    "@stream-io/flat-list-mvcp": "^",
+    "@stream-io/flat-list-mvcp": "0.10.0",
     "react": "16.13.1",
     "react-native": "0.63.4",
     "react-native-bidirectional-infinite-scroll": "link:../"

example/yarn.lock

@@ -4,7 +4,7 @@
   "description": "Birectional infinite scroll for react-native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
-  "types": "lib/typescript/src/index.d.ts",
+  "types": "lib/typescript/index.d.ts",
   "react-native": "src/index",
   "source": "src/index",
   "files": [
@@ -50,10 +50,10 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@react-native-community/eslint-config": "^2.0.0",
     "@release-it/conventional-changelog": "^2.0.0",
-    "@stream-io/flat-list-mvcp": "^",
+    "@stream-io/flat-list-mvcp": "^0.10.0",
     "@types/jest": "^26.0.0",
     "@types/react": "^16.9.19",
-    "@types/react-native": "0.62.13",
+    "@types/react-native": "0.63.50",
     "commitlint": "^11.0.0",
     "eslint": "^7.2.0",
     "eslint-config-prettier": "^7.0.0",
@@ -69,7 +69,7 @@
     "typescript": "^4.1.3"
   },
   "peerDependencies": {
-    "@stream-io/flat-list-mvcp": "*",
+    "@stream-io/flat-list-mvcp": ">=0.10.0",
     "react": "*",
     "react-native": "*"
   },

package.json

@@ -16,7 +16,10 @@ const styles = StyleSheet.create({
   },
 });
 
-type Props<T> = Omit<FlatListProps<T>, 'maintainVisibleContentPosition'> & {
+export type Props<T> = Omit<
+  FlatListProps<T>,
+  'maintainVisibleContentPosition'
+> & {
   /**
    * Called once when the scroll position gets close to end of list. This must return a promise.
    * You can `onEndReachedThreshold` as distance from end of list, when this function should be called.
@@ -27,7 +30,7 @@ type Props<T> = Omit<FlatListProps<T>, 'maintainVisibleContentPosition'> & {
    * You can `onStartReachedThreshold` as distance from beginning of list, when this function should be called.
    */
   onStartReached: () => Promise<void>;
-  /** Color or inline loading indicator */
+  /** Color for inline loading indicator */
   activityIndicatorColor?: string;
   /**
    * Enable autoScrollToTop.
@@ -56,7 +59,6 @@ type Props<T> = Omit<FlatListProps<T>, 'maintainVisibleContentPosition'> & {
   /** Custom UI component for footer indicator of FlatList. Only used when `showDefaultLoadingIndicators` is false */
   ListFooterComponent?: React.ComponentType;
 };
-
 /**
  * Note:
  * - `onEndReached` and `onStartReached` must return a promise.
@@ -67,20 +69,19 @@ type Props<T> = Omit<FlatListProps<T>, 'maintainVisibleContentPosition'> & {
  * - doesn't accept `ListHeaderComponent` via prop, since it is occupied by `HeaderLoadingIndicator`
  *    Set `showDefaultLoadingIndicators` to use `ListHeaderComponent`.
  */
-const BidirectionalFlatList = React.forwardRef(
-  (
-    // TODO: Fix typescript generics for ref forwarding.
-    props: Props<any>,
+export const BidirectionalFlatList = (React.forwardRef(
+  <T extends any>(
+    props: Props<T>,
     ref:
-      | ((instance: FlatListType | null) => void)
-      | MutableRefObject<FlatListType | null>
+      | ((instance: FlatListType<T> | null) => void)
+      | MutableRefObject<FlatListType<T> | null>
       | null
   ) => {
     const {
       activityIndicatorColor = 'black',
+      autoscrollToTopThreshold = 100,
       data,
       enableAutoscrollToTop,
-      autoscrollToTopThreshold = 100,
       FooterLoadingIndicator,
       HeaderLoadingIndicator,
       ListHeaderComponent,
@@ -227,15 +228,14 @@ const BidirectionalFlatList = React.forwardRef(
 
     return (
       <>
-        <FlatList
+        <FlatList<T>
           {...props}
           ref={ref}
           progressViewOffset={50}
           ListHeaderComponent={renderHeaderLoadingIndicator}
           ListFooterComponent={renderFooterLoadingIndicator}
           onEndReached={null}
           onScroll={handleScroll}
-          // @ts-ignore
           maintainVisibleContentPosition={{
             autoscrollToTopThreshold: enableAutoscrollToTop
               ? autoscrollToTopThreshold
@@ -246,6 +246,8 @@ const BidirectionalFlatList = React.forwardRef(
       </>
     );
   }
-);
+) as unknown) as BidirectionalFlatListType;
 
-export { BidirectionalFlatList as FlatList };
+type BidirectionalFlatListType = <T extends any>(
+  props: Props<T>
+) => React.ReactElement;

src/index.tsx renamed to src/BidirectionalFlatList.tsx

@@ -0,0 +1 @@
+export { BidirectionalFlatList as FlatList } from './BidirectionalFlatList';