diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 41f42268b2..a09971ccbe 100644 --- a/src/components/Layout/index.tsx +++ b/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 && } @@ -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 ? (
@@ -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 -} - -/** - * 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 ( - - {IS_WEB ?
{children}
: children} -
- ) -}) - /** * Utility component to center content within the screen */ diff --git a/src/screens/Messages/ChatList.tsx b/src/screens/Messages/ChatList.tsx index 03a641de86..14fe32d6b3 100644 --- a/src/screens/Messages/ChatList.tsx +++ b/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`, - }), - ] - } /> ) } diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx index 0c9669edcc..39e76ccf88 100644 --- a/src/view/com/util/List.web.tsx +++ b/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( ListHeaderComponent, ListFooterComponent, ListEmptyComponent, - disableFullWindowScroll, + disableFullWindowScroll: disableFullWindowScrollProp, contentContainerStyle, data, desktopFixedHeight, @@ -78,6 +80,12 @@ function ListImpl( ref: React.Ref, ) { 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(