diff --git a/src/AutocompleteFlatList.tsx b/src/AutocompleteFlatList.tsx index 5f44bf4..d2746da 100644 --- a/src/AutocompleteFlatList.tsx +++ b/src/AutocompleteFlatList.tsx @@ -6,7 +6,7 @@ import { useScrollableProps } from './shared'; function AutocompleteFlatList(rest: FlatListProps, ref: any) { const { scrollableRef, scrollX, scrollY, scrollableProps } = - useScrollableProps(rest); + useScrollableProps(rest, ref); const Flat = Animated.FlatList as any; return ( diff --git a/src/AutocompleteScrollView.tsx b/src/AutocompleteScrollView.tsx index 5ba99f8..af6fbfe 100644 --- a/src/AutocompleteScrollView.tsx +++ b/src/AutocompleteScrollView.tsx @@ -6,7 +6,7 @@ import { useScrollableProps } from './shared'; function AutocompleteScrollView(rest: ScrollViewProps, ref: any) { const { scrollableRef, scrollX, scrollY, scrollableProps } = - useScrollableProps(rest); + useScrollableProps(rest, ref); return ( diff --git a/src/createAutocompleteScrollable.tsx b/src/createAutocompleteScrollable.tsx index dfaef6e..80c72a3 100644 --- a/src/createAutocompleteScrollable.tsx +++ b/src/createAutocompleteScrollable.tsx @@ -7,7 +7,7 @@ export default function createAutocompleteScrollable< >(WrappedComponent: T): React.ComponentType { return React.forwardRef(function (rest, ref) { const { scrollableRef, scrollX, scrollY, scrollableProps } = - useScrollableProps(rest); + useScrollableProps(rest, ref); const WW = WrappedComponent as any; return ( diff --git a/src/mergeRefs.tsx b/src/mergeRefs.tsx new file mode 100644 index 0000000..afd3011 --- /dev/null +++ b/src/mergeRefs.tsx @@ -0,0 +1,15 @@ +import type * as React from 'react'; + +export function mergeRefs( + refs: Array | React.LegacyRef> +): React.RefCallback { + return (value) => { + refs.forEach((ref) => { + if (typeof ref === 'function') { + ref(value); + } else if (ref != null) { + (ref as React.MutableRefObject).current = value; + } + }); + }; +} diff --git a/src/shared.tsx b/src/shared.tsx index 2fda9ff..dc557c1 100644 --- a/src/shared.tsx +++ b/src/shared.tsx @@ -8,6 +8,7 @@ import type { NativeSyntheticEvent, ScrollViewProps, } from 'react-native'; +import { mergeRefs } from './mergeRefs'; export type AutocompleteScrollableProps = { ref?: any; @@ -23,7 +24,7 @@ export type AutocompleteScrollableProps = { | undefined; }; -export function useScrollableProps(props: ScrollViewProps) { +export function useScrollableProps(props: ScrollViewProps, ref: any) { const scrollableRef = useAnimatedRef(); const scrollX = useSharedValue(0); const scrollY = useSharedValue(0); @@ -34,7 +35,7 @@ export function useScrollableProps(props: ScrollViewProps) { props?.onScroll?.(e as any); }); const scrollableProps: AutocompleteScrollableProps = { - ref: scrollableRef, + ref: mergeRefs([scrollableRef, ref]), scrollEventThrottle: 16, keyboardShouldPersistTaps: 'handled', onScroll: scrollHandler,