diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx
index f72515ac..11b951e9 100644
--- a/src/screens/Messages/Conversation/MessagesList.tsx
+++ b/src/screens/Messages/Conversation/MessagesList.tsx
@@ -386,10 +386,10 @@ export function MessagesList({
data={convoState.items}
renderItem={renderItem}
keyExtractor={keyExtractor}
- containWeb={true}
+ disableFullWindowScroll={true}
// Prevents wrong position in Firefox when sending a message
// as well as scroll getting stuck on Chome when scrolling upwards.
- disableContentVisibility={true}
+ disableContainStyle={true}
disableVirtualization={true}
style={animatedListStyle}
// The extra two items account for the header and the footer components
diff --git a/src/screens/StarterPack/Wizard/StepFeeds.tsx b/src/screens/StarterPack/Wizard/StepFeeds.tsx
index 878d17ce..de8d856a 100644
--- a/src/screens/StarterPack/Wizard/StepFeeds.tsx
+++ b/src/screens/StarterPack/Wizard/StepFeeds.tsx
@@ -101,7 +101,7 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
onEndReachedThreshold={2}
renderScrollComponent={props => }
keyboardShouldPersistTaps="handled"
- containWeb={true}
+ disableFullWindowScroll={true}
sideBorders={false}
style={{flex: 1}}
ListEmptyComponent={
diff --git a/src/screens/StarterPack/Wizard/StepProfiles.tsx b/src/screens/StarterPack/Wizard/StepProfiles.tsx
index f77a46e7..c14de847 100644
--- a/src/screens/StarterPack/Wizard/StepProfiles.tsx
+++ b/src/screens/StarterPack/Wizard/StepProfiles.tsx
@@ -80,7 +80,7 @@ export function StepProfiles({
keyExtractor={keyExtractor}
renderScrollComponent={props => }
keyboardShouldPersistTaps="handled"
- containWeb={true}
+ disableFullWindowScroll={true}
sideBorders={false}
style={[a.flex_1]}
onEndReached={
diff --git a/src/view/com/util/List.tsx b/src/view/com/util/List.tsx
index ed43ed5f..e1a10e47 100644
--- a/src/view/com/util/List.tsx
+++ b/src/view/com/util/List.tsx
@@ -24,11 +24,12 @@ export type ListProps = Omit<
refreshing?: boolean
onRefresh?: () => void
onItemSeen?: (item: ItemT) => void
- containWeb?: boolean
desktopFixedHeight?: number | boolean
+ // Web only prop to contain the scroll to the container rather than the window
+ disableFullWindowScroll?: boolean
sideBorders?: boolean
// Web only prop to disable a perf optimization (which would otherwise be on).
- disableContentVisibility?: boolean
+ disableContainStyle?: boolean
}
export type ListRef = React.MutableRefObject
diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx
index f2b2add3..12d223db 100644
--- a/src/view/com/util/List.web.tsx
+++ b/src/view/com/util/List.web.tsx
@@ -23,9 +23,11 @@ export type ListProps = Omit<
onRefresh?: () => void
onItemSeen?: (item: ItemT) => void
desktopFixedHeight?: number | boolean
- containWeb?: boolean
+ // Web only prop to contain the scroll to the container rather than the window
+ disableFullWindowScroll?: boolean
sideBorders?: boolean
- disableContentVisibility?: boolean
+ // Web only prop to disable a perf optimization (which would otherwise be on).
+ disableContainStyle?: boolean
}
export type ListRef = React.MutableRefObject // TODO: Better types.
@@ -39,7 +41,7 @@ function ListImpl(
ListHeaderComponent,
ListFooterComponent,
ListEmptyComponent,
- containWeb,
+ disableFullWindowScroll,
contentContainerStyle,
data,
desktopFixedHeight,
@@ -58,7 +60,7 @@ function ListImpl(
extraData,
style,
sideBorders = true,
- disableContentVisibility,
+ disableContainStyle,
...props
}: ListProps,
ref: React.Ref,
@@ -112,7 +114,7 @@ function ListImpl(
}
const getScrollableNode = React.useCallback(() => {
- if (containWeb) {
+ if (disableFullWindowScroll) {
const element = nativeRef.current as HTMLDivElement | null
if (!element) return
@@ -182,7 +184,7 @@ function ListImpl(
},
}
}
- }, [containWeb])
+ }, [disableFullWindowScroll])
const nativeRef = React.useRef(null)
React.useImperativeHandle(
@@ -267,7 +269,12 @@ function ListImpl(
return () => {
element?.removeEventListener('scroll', handleScroll)
}
- }, [isInsideVisibleTree, handleScroll, containWeb, getScrollableNode])
+ }, [
+ isInsideVisibleTree,
+ handleScroll,
+ disableFullWindowScroll,
+ getScrollableNode,
+ ])
// --- onScrolledDownChange ---
const isScrolledDown = useRef(false)
@@ -308,7 +315,7 @@ function ListImpl(
{...props}
style={[
style,
- containWeb && {
+ disableFullWindowScroll && {
flex: 1,
// @ts-expect-error web only
'overflow-y': 'scroll',
@@ -332,13 +339,13 @@ function ListImpl(
pal.border,
]}>
{onStartReached && !isEmpty && (
@@ -356,13 +363,13 @@ function ListImpl(
renderItem={renderItem}
extraData={extraData}
onItemSeen={onItemSeen}
- disableContentVisibility={disableContentVisibility}
+ disableContainStyle={disableContainStyle}
/>
)
})}
{onEndReached && !isEmpty && (
({
renderItem,
extraData: _unused,
onItemSeen,
- disableContentVisibility,
+ disableContainStyle,
}: {
item: ItemT
index: number
@@ -416,7 +423,7 @@ let Row = function RowImpl({
| ((data: {index: number; item: any; separators: any}) => React.ReactNode)
extraData: any
onItemSeen: ((item: any) => void) | undefined
- disableContentVisibility?: boolean
+ disableContainStyle?: boolean
}): React.ReactNode {
const rowRef = React.useRef(null)
const intersectionTimeout = React.useRef(undefined)
@@ -465,14 +472,10 @@ let Row = function RowImpl({
return null
}
- const shouldDisableContentVisibility = disableContentVisibility || isSafari
+ const shouldDisableContainStyle = disableContainStyle || isSafari
return (
{renderItem({item, index, separators: null as any})}
@@ -544,9 +547,9 @@ const styles = StyleSheet.create({
marginLeft: 'auto',
marginRight: 'auto',
},
- contentVisibilityAuto: {
+ contain: {
// @ts-ignore web only
- contentVisibility: 'auto',
+ contain: 'layout paint',
},
minHeightViewport: {
// @ts-ignore web only
diff --git a/src/view/screens/Storybook/ListContained.tsx b/src/view/screens/Storybook/ListContained.tsx
index b3ea091f..20ec6865 100644
--- a/src/view/screens/Storybook/ListContained.tsx
+++ b/src/view/screens/Storybook/ListContained.tsx
@@ -47,7 +47,7 @@ export function ListContained() {
)
}}
keyExtractor={item => item.id.toString()}
- containWeb={true}
+ disableFullWindowScroll={true}
style={{flex: 1}}
onStartReached={() => {
console.log('Start Reached')