fix: React: ref is not a prop (#21)

Reference: facebook/react#5744 https://stackoverflow.com/questions/38089895/react-ref-is-not-a-prop
hyochan · Oct 21, 2021 · e398fd2 · e398fd2
1 parent e74adb4
commit e398fd2
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -55,6 +55,7 @@ Our `MasonryList` view component is able to render all child views with all diff
 ## Props
 
 ```tsx
+innerRef?: MutableRefObject<ScrollView | undefined>;
 keyPrefix?: string;
 loading?: boolean;
 refreshing?: RefreshControlProps['refreshing'];
@@ -71,6 +72,8 @@ ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null;
 numColumns?: number;
 ```
 
+**`innerRef`** -            Expose ScrollView instance with `ref`, example usage:  `ref.current.scrollTo`.
+
 **`keyPrefix`** -             Add prefix for keying child views. This is currently incremented by `1`.
 
 **`loading`** -             Currently in loading status.

diff --git a/index.tsx b/index.tsx
@@ -12,7 +12,7 @@ import React, {MutableRefObject, ReactElement, memo, useState} from 'react';
 
 interface Props<T>
   extends Omit<ScrollViewProps, 'refreshControl' | 'onScroll'> {
-  ref?: MutableRefObject<ScrollView | undefined>;
+  innerRef?: MutableRefObject<ScrollView | undefined>;
   keyPrefix?: string;
   loading?: boolean;
   refreshing?: RefreshControlProps['refreshing'];
@@ -48,7 +48,7 @@ function MasonryList<T>(props: Props<T>): ReactElement {
     keyPrefix,
     refreshing,
     data,
-    ref,
+    innerRef,
     ListHeaderComponent,
     ListEmptyComponent,
     ListFooterComponent,
@@ -66,7 +66,7 @@ function MasonryList<T>(props: Props<T>): ReactElement {
   return (
     <ScrollView
       {...props}
-      ref={ref}
+      ref={innerRef}
       style={[{flex: 1, alignSelf: 'stretch'}, style]}
       removeClippedSubviews={true}
       refreshControl={