diff --git a/src/components/ConnectionLayout.tsx b/src/components/ConnectionLayout.tsx index b3f76aa21d47..a91dea9bfc92 100644 --- a/src/components/ConnectionLayout.tsx +++ b/src/components/ConnectionLayout.tsx @@ -1,5 +1,6 @@ -import React from 'react'; +import React, {useMemo} from 'react'; import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; +import {View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; @@ -45,8 +46,25 @@ type ConnectionLayoutProps = { /** Style of the subtitle text */ subTitleStyle?: StyleProp | undefined; + + /** Whether to use ScrollView or not */ + shouldUseScrollView?: boolean; }; +type ConnectionLayoutContentProps = Pick; + +function ConnectionLayoutContent({title, titleStyle, subtitle, subTitleStyle, children}: ConnectionLayoutContentProps) { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + return ( + <> + {title && {translate(title)}} + {subtitle && {translate(subtitle)}} + {children} + + ); +} + function ConnectionLayout({ displayName, headerTitle, @@ -59,10 +77,24 @@ function ConnectionLayout({ contentContainerStyle, titleStyle, subTitleStyle, + shouldUseScrollView = true, }: ConnectionLayoutProps) { - const styles = useThemeStyles(); const {translate} = useLocalize(); + const renderSelectionContent = useMemo( + () => ( + + {children} + + ), + [title, subtitle, titleStyle, subTitleStyle, children], + ); + return ( Navigation.goBack()} /> - - {title && {translate(title)}} - {subtitle && {translate(subtitle)}} - {children} - + {shouldUseScrollView ? ( + {renderSelectionContent} + ) : ( + {renderSelectionContent} + )} );