WIP

app/components/option_item/index.tsx

@@ -43,10 +43,14 @@ const hitSlop = {top: 11, bottom: 11, left: 11, right: 11};
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     return {
         actionContainer: {
+            flex: 1,
             flexDirection: 'row',
             alignItems: 'center',
             marginLeft: 16,
         },
+        actionSubContainer: {
+            marginLeft: 'auto',
+        },
         container: {
             flexDirection: 'row',
             alignItems: 'center',
@@ -63,6 +67,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
         iconContainer: {marginRight: 16},
         infoContainer: {marginRight: 2},
         info: {
+            flex: 1,
+            textAlign: 'right',
             color: changeOpacity(theme.centerChannelColor, 0.56),
             ...typography('Body', 100),
         },
@@ -99,7 +105,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             ...typography('Body', 200),
         },
         row: {
-            flex: 1,
+
+            // flex: 1,
             flexDirection: 'row',
         },
     };
@@ -265,6 +272,7 @@ const OptionItem = ({
                         <Text
                             style={[labelTextStyle, optionLabelTextStyle]}
                             testID={`${testID}.label`}
+                            numberOfLines={1}
                         >
                             {label}
                         </Text>
@@ -284,16 +292,17 @@ const OptionItem = ({
             <View style={styles.actionContainer}>
                 {
                     Boolean(info) &&
-                    <View style={styles.infoContainer}>
-                        <Text
-                            style={[styles.info, !actionComponent && styles.iconContainer, destructive && {color: theme.dndIndicator}]}
-                            testID={`${testID}.info`}
-                        >
-                            {info}
-                        </Text>
-                    </View>
+                    <Text
+                        style={[styles.info, !actionComponent && styles.iconContainer, destructive && {color: theme.dndIndicator}]}
+                        testID={`${testID}.info`}
+                        numberOfLines={1}
+                    >
+                        {info}
+                    </Text>
                 }
-                {actionComponent}
+                <View style={styles.actionSubContainer}>
+                    {actionComponent}
+                </View>
             </View>
             }
         </View>

app/screens/convert_gm_to_channel/convert_gm_to_channel.tsx

@@ -8,7 +8,6 @@ import {useServerUrl} from '@app/context/server';
 
 import {ConvertGMToChannelForm} from './convert_gm_to_channel_form';
 import {Loader} from './loader';
-import { logDebug } from '@app/utils/log';
 
 type Props = {
     channelId: string;

app/screens/convert_gm_to_channel/team_selector.tsx

@@ -22,7 +22,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
     };
 });
 
-
 type Props = {
     commonTeams: Team[];
 }
@@ -58,6 +57,7 @@ export const TeamSelector = ({commonTeams}: Props) => {
             label={label}
             type={Platform.select({ios: 'arrow', default: 'default'})}
             info={selectedTeam ? selectedTeam.display_name : placeholder}
+            labelContainerStyle={{flexShrink: 0}}
         />
     );
 };

app/screens/convert_gm_to_channel/team_selector_list/team_selector_list.tsx

@@ -1,16 +1,15 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 
 import TeamList from '@app/components/team_list';
 import {useTheme} from '@app/context/theme';
+import {popTopScreen} from '@app/screens/navigation';
+import {logDebug} from '@app/utils/log';
 import {changeOpacity, getKeyboardAppearanceFromTheme, makeStyleSheetFromTheme} from '@app/utils/theme';
 import SearchBar from '@components/search';
-import { filter } from 'lodash';
-import { logDebug } from '@app/utils/log';
-import { loadDefs } from 'nock';
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     container: {
@@ -43,6 +42,11 @@ const TeamSelectorList = ({teams, selectTeam}: Props) => {
         }
     }, [teams]);
 
+    const handleOnPress = useCallback((teamId: string) => {
+        selectTeam(teamId);
+        popTopScreen();
+    }, []);
+
     return (
         <View style={styles.container}>
             <SearchBar
@@ -57,7 +61,7 @@ const TeamSelectorList = ({teams, selectTeam}: Props) => {
             <View style={styles.listContainer}>
                 <TeamList
                     teams={filteredTeams}
-                    onPress={selectTeam}
+                    onPress={handleOnPress}
                 />
             </View>
         </View>