diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx index 25f05b484d..54833e9d75 100644 --- a/src/view/com/util/Views.web.tsx +++ b/src/view/com/util/Views.web.tsx @@ -72,10 +72,6 @@ export const FlatList = React.forwardRef(function FlatListImpl( styles.containerScroll, ) } - style = addStyle(style, { - // @ts-ignore web-only - contain: 'content', - }) if (contentOffset && contentOffset?.y !== 0) { // NOTE // we use paddingTop & contentOffset to space around the floating header @@ -132,6 +128,12 @@ export const FlatList = React.forwardRef(function FlatListImpl( return () => window.removeEventListener('scroll', handleScroll) }, [onScroll]) + const onVisible = React.useCallback(() => { + onEndReached?.({ + distanceFromEnd: onEndReachedThreshold || 0, + }) + }, [onEndReachedThreshold, onEndReached]) + return ( ( ))} {onEndReached && ( - { - onEndReached({ - distanceFromEnd: onEndReachedThreshold || 0, - }) - }} - /> + )} ) }) -function Tail({ +let Tail = ({ threshold = 0, onVisible, }: { threshold?: number | null | undefined onVisible: () => void -}) { +}): React.ReactNode => { const tailRef = React.useRef(null) React.useEffect(() => { @@ -185,8 +180,9 @@ function Tail({ } }, [onVisible, threshold]) - return
+ return } +Tail = React.memo(Tail) export const ScrollView = React.forwardRef(function ScrollViewImpl( {contentContainerStyle, ...props}: React.PropsWithChildren, @@ -219,7 +215,6 @@ const styles = StyleSheet.create({ contentContainer: { borderLeftWidth: 1, borderRightWidth: 1, - // @ts-ignore web only }, container: { width: '100%', @@ -233,8 +228,4 @@ const styles = StyleSheet.create({ marginLeft: 'auto', marginRight: 'auto', }, - fixedHeight: { - // @ts-ignore web only - height: '100vh', - }, })