Fix ref forwarding in web

1 files changed, 25 insertions, 12 deletions

diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
index c16070b2b..f00d3c072 100644
--- a/src/view/com/util/Views.web.tsx
+++ b/src/view/com/util/Views.web.tsx
@@ -33,10 +33,13 @@ export function CenteredView({
   return <View style={style} {...props} />
 }
 
-export function FlatList<ItemT>({
-  contentContainerStyle,
-  ...props
-}: React.PropsWithChildren<FlatListProps<ItemT>>) {
+export const FlatList = React.forwardRef(function <ItemT>(
+  {
+    contentContainerStyle,
+    ...props
+  }: React.PropsWithChildren<FlatListProps<ItemT>>,
+  ref: React.Ref<RNFlatList>,
+) {
   const theme = useTheme()
   contentContainerStyle = addStyle(
     contentContainerStyle,
@@ -46,13 +49,19 @@ export function FlatList<ItemT>({
     contentContainerStyle,
     theme.colorScheme === 'dark' ? styles.containerDark : styles.containerLight,
   )
-  return <RNFlatList contentContainerStyle={contentContainerStyle} {...props} />
-}
+  return (
+    <RNFlatList
+      contentContainerStyle={contentContainerStyle}
+      ref={ref}
+      {...props}
+    />
+  )
+})
 
-export function ScrollView({
-  contentContainerStyle,
-  ...props
-}: React.PropsWithChildren<ScrollViewProps>) {
+export const ScrollView = React.forwardRef(function (
+  {contentContainerStyle, ...props}: React.PropsWithChildren<ScrollViewProps>,
+  ref: React.Ref<RNFlatList>,
+) {
   const theme = useTheme()
   contentContainerStyle = addStyle(
     contentContainerStyle,
@@ -63,9 +72,13 @@ export function ScrollView({
     theme.colorScheme === 'dark' ? styles.containerDark : styles.containerLight,
   )
   return (
-    <RNScrollView contentContainerStyle={contentContainerStyle} {...props} />
+    <RNScrollView
+      contentContainerStyle={contentContainerStyle}
+      ref={ref}
+      {...props}
+    />
   )
-}
+})
 
 const styles = StyleSheet.create({
   container: {