From 2db7ad8ef326c582c698d1f7248aae7dc5c2c423 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 22 Feb 2023 21:21:17 -0600
Subject: [PATCH] Fix ref forwarding in web

---
 src/view/com/util/Views.web.tsx | 55 ++++++++++++++++++++-------------
 1 file changed, 34 insertions(+), 21 deletions(-)

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