From 87e9774bb552d6afac87cddb58f6ba01ea94f32b Mon Sep 17 00:00:00 2001 From: Mattermost Build Date: Wed, 7 Jan 2026 08:26:30 +0200 Subject: [PATCH] [MM-66923] Fix scroll and private channel icon on invite user (#9363) (#9391) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [MM-66923] Fix scroll and private channel icon on invite user * Address feedback * Fix test (cherry picked from commit 2111c8fb2c940dbc426712d566e94b9457c5a3c0) Co-authored-by: Daniel Espino García --- .../channel_list_row/index.tsx | 2 +- .../integration_selector/custom_list/index.tsx | 15 ++++++++------- app/screens/invite/selection.test.tsx | 3 ++- app/screens/invite/selection.tsx | 18 +++++++++++++----- assets/base/i18n/en.json | 3 ++- 5 files changed, 26 insertions(+), 15 deletions(-) diff --git a/app/screens/integration_selector/channel_list_row/index.tsx b/app/screens/integration_selector/channel_list_row/index.tsx index 981cb51c6..29e1998bf 100644 --- a/app/screens/integration_selector/channel_list_row/index.tsx +++ b/app/screens/integration_selector/channel_list_row/index.tsx @@ -26,7 +26,7 @@ const getIconForChannel = (selectedChannel: Channel): string => { let icon = 'globe'; if (selectedChannel.type === 'P') { - icon = 'padlock'; + icon = 'lock-outline'; } if (selectedChannel.delete_at) { diff --git a/app/screens/integration_selector/custom_list/index.tsx b/app/screens/integration_selector/custom_list/index.tsx index 68d08051d..a1ab5f9eb 100644 --- a/app/screens/integration_selector/custom_list/index.tsx +++ b/app/screens/integration_selector/custom_list/index.tsx @@ -1,10 +1,12 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {useCallback} from 'react'; +import React, {useCallback, useRef} from 'react'; import { - Platform, FlatList, RefreshControl, View, + Platform, RefreshControl, View, } from 'react-native'; +import {KeyboardAwareFlatList} from 'react-native-keyboard-aware-scroll-view'; +import {useAvoidKeyboard} from '@hooks/device'; import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme'; import {typography} from '@utils/typography'; @@ -52,9 +54,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { }, }), }, - container: { - flexGrow: 1, - }, separator: { height: 1, flex: 1, @@ -109,6 +108,8 @@ function CustomList({ canRefresh = true, testID, refreshing = false, onRefresh, }: Props) { const style = getStyleFromTheme(theme); + const keyboardAwareFlatListRef = useRef(null); + useAvoidKeyboard(keyboardAwareFlatListRef); // Renders const renderEmptyList = useCallback(() => { @@ -159,8 +160,8 @@ function CustomList({ } return ( - { const {getByTestId} = renderWithIntl(); const optionItem = getByTestId('invite.guest_magic_link'); - expect(optionItem).toHaveProp('label', 'Allow newly created guests to login without password'); + expect(optionItem).toHaveProp('label', 'Use magic link'); + expect(optionItem).toHaveProp('description', 'Newly created guests will join and log in without a password, using a magic link sent to their email address'); expect(optionItem).toHaveProp('type', 'toggle'); expect(optionItem).toHaveProp('selected', false); diff --git a/app/screens/invite/selection.tsx b/app/screens/invite/selection.tsx index 7722b8db7..6313f5f7a 100644 --- a/app/screens/invite/selection.tsx +++ b/app/screens/invite/selection.tsx @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {useCallback, useState, useMemo} from 'react'; +import React, {useCallback, useState, useMemo, useRef} from 'react'; import {useIntl} from 'react-intl'; import { Keyboard, @@ -13,6 +13,7 @@ import { type ListRenderItemInfo, ScrollView, } from 'react-native'; +import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'; import Animated, {useAnimatedStyle, useDerivedValue} from 'react-native-reanimated'; import SelectedChip from '@components/chips/selected_chip'; @@ -25,7 +26,7 @@ import {Screens} from '@constants'; import {MAX_LIST_HEIGHT, MAX_LIST_TABLET_DIFF} from '@constants/autocomplete'; import {useTheme} from '@context/theme'; import {useAutocompleteDefaultAnimatedValues} from '@hooks/autocomplete'; -import {useIsTablet} from '@hooks/device'; +import {useAvoidKeyboard, useIsTablet} from '@hooks/device'; import {goToScreen} from '@screens/navigation'; import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme'; @@ -178,6 +179,9 @@ export default function Selection({ const hasChannelsSelected = selectedChannels.length > 0; + const keyboardAwareRef = useRef(null); + useAvoidKeyboard(keyboardAwareRef); + const onLayoutSelectionTeamBar = useCallback((e: LayoutChangeEvent) => { setTeamBarHeight(e.nativeEvent.layout.height); }, []); @@ -372,7 +376,10 @@ export default function Selection({ onLayoutContainer={onLayoutSelectionTeamBar} onClose={onClose} /> - + )} - +