force disableFullWindowScroll when within split view

src/components/Layout/index.tsx

@@ -1,15 +1,10 @@
 import {forwardRef, memo, useContext, useMemo} from 'react'
 import {
   type StyleProp,
-  StyleSheet,
   View,
   type ViewProps,
   type ViewStyle,
 } from 'react-native'
-import {
-  KeyboardAwareScrollView,
-  type KeyboardAwareScrollViewProps,
-} from 'react-native-keyboard-controller'
 import Animated, {
   type AnimatedScrollViewProps,
   useAnimatedProps,
@@ -58,7 +53,12 @@ export const Screen = memo(function Screen({
     <>
       {IS_WEB && !isWithinSplitView && <WebCenterBorders />}
       <View
-        style={[a.util_screen_outer, {paddingTop: noInsetTop ? 0 : top}, style]}
+        style={[
+          a.util_screen_outer,
+          {paddingTop: noInsetTop ? 0 : top},
+          isWithinSplitView && {maxHeight: '100%'},
+          style,
+        ]}
         {...props}
       />
     </>
@@ -87,6 +87,7 @@ export const Content = memo(
   ) {
     const t = useTheme()
     const {footerHeight} = useShellLayout()
+    const {isWithinSplitView} = useIsWithinSplitView()
     const animatedProps = useAnimatedProps(() => {
       return {
         scrollIndicatorInsets: {
@@ -105,11 +106,18 @@ export const Content = memo(
         indicatorStyle={t.scheme === 'dark' ? 'white' : 'black'}
         // sets the scroll inset to the height of the footer
         animatedProps={animatedProps}
-        style={[scrollViewStyles.common, style]}
-        contentContainerStyle={[
-          scrollViewStyles.contentContainer,
-          contentContainerStyle,
+        style={[
+          a.w_full,
+          isWithinSplitView &&
+            web({
+              flex: 1,
+              overflowY: 'scroll',
+              scrollbarWidth: 'thin',
+              scrollbarColor: `${t.palette.contrast_100} transparent`,
+            }),
+          style,
         ]}
+        contentContainerStyle={[contentContainerStyle]}
         {...props}>
         {IS_WEB ? (
           <Center ignoreTabletLayoutOffset={ignoreTabletLayoutOffset}>
@@ -124,45 +132,6 @@ export const Content = memo(
   }),
 )
 
-const scrollViewStyles = StyleSheet.create({
-  common: {
-    width: '100%',
-  },
-  contentContainer: {
-    paddingBottom: 100,
-  },
-})
-
-export type KeyboardAwareContentProps = KeyboardAwareScrollViewProps & {
-  children: React.ReactNode
-  contentContainerStyle?: StyleProp<ViewStyle>
-}
-
-/**
- * Default scroll view for simple pages.
- *
- * BE SURE TO TEST THIS WHEN USING, it's untested as of writing this comment.
- */
-export const KeyboardAwareContent = memo(function LayoutKeyboardAwareContent({
-  children,
-  style,
-  contentContainerStyle,
-  ...props
-}: KeyboardAwareContentProps) {
-  return (
-    <KeyboardAwareScrollView
-      style={[scrollViewStyles.common, style]}
-      contentContainerStyle={[
-        scrollViewStyles.contentContainer,
-        contentContainerStyle,
-      ]}
-      keyboardShouldPersistTaps="handled"
-      {...props}>
-      {IS_WEB ? <Center>{children}</Center> : children}
-    </KeyboardAwareScrollView>
-  )
-})
-
 /**
  * Utility component to center content within the screen
  */

src/screens/Messages/ChatList.tsx

@@ -20,7 +20,7 @@ import {useListConvosQuery} from '#/state/queries/messages/list-conversations'
 import {EmptyState} from '#/view/com/util/EmptyState'
 import {List, type ListRef} from '#/view/com/util/List'
 import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
-import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
 import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -326,16 +326,6 @@ export function ChatList({selectedChat}: {selectedChat?: string}) {
       windowSize={11}
       desktopFixedHeight
       sideBorders={false}
-      disableFullWindowScroll={isWithinSplitView}
-      style={
-        isWithinSplitView && [
-          a.w_full,
-          web({
-            scrollbarWidth: 'thin',
-            scrollbarColor: `${t.palette.contrast_100} transparent`,
-          }),
-        ]
-      }
     />
   )
 }

src/view/com/util/List.web.tsx

@@ -21,6 +21,8 @@ import {batchedUpdates} from '#/lib/batchedUpdates'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {useScrollHandlers} from '#/lib/ScrollContext'
 import {addStyle} from '#/lib/styles'
+import {useIsWithinSplitView} from '#/screens/Messages/components/splitView/context'
+import {useTheme, web} from '#/alf'
 import * as Layout from '#/components/Layout'
 
 export type ListMethods = any // TODO: Better types.
@@ -55,7 +57,7 @@ function ListImpl<ItemT>(
     ListHeaderComponent,
     ListFooterComponent,
     ListEmptyComponent,
-    disableFullWindowScroll,
+    disableFullWindowScroll: disableFullWindowScrollProp,
     contentContainerStyle,
     data,
     desktopFixedHeight,
@@ -78,6 +80,12 @@ function ListImpl<ItemT>(
   ref: React.Ref<ListMethods>,
 ) {
   const contextScrollHandlers = useScrollHandlers()
+  const {isWithinSplitView} = useIsWithinSplitView()
+  const t = useTheme()
+
+  // automatically disable full window scroll when within split view
+  const disableFullWindowScroll =
+    disableFullWindowScrollProp ?? isWithinSplitView
 
   const isEmpty = !data || data.length === 0
 
@@ -319,11 +327,15 @@ function ListImpl<ItemT>(
     <View
       {...props}
       style={[
+        isWithinSplitView &&
+          web({
+            scrollbarWidth: 'thin',
+            scrollbarColor: `${t.palette.contrast_100} transparent`,
+          }),
         style,
         disableFullWindowScroll && {
           flex: 1,
-          // @ts-expect-error web only
-          'overflow-y': 'scroll',
+          overflowY: 'scroll',
         },
       ]}
       ref={nativeRef as any}>