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} /> - + )} - +