remove unused style

app/screens/integration_selector/selected_options/index.tsx

@@ -1,14 +1,16 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useCallback} from 'react';
-import {View, ScrollView} from 'react-native';
+import {FlatList, ListRenderItemInfo, View} from 'react-native';
 
 import {View as ViewConstants} from '@constants';
 import {makeStyleSheetFromTheme} from '@utils/theme';
 
 import SelectedOption from '../selected_option';
 
+type SelectedOption = DialogOption | UserProfile | Channel
+
 type Props = {
     theme: Theme;
     selectedOptions: DialogOption[] | UserProfile[] | Channel[];
@@ -19,15 +21,12 @@ type Props = {
 const getStyleFromTheme = makeStyleSheetFromTheme(() => {
     return {
         container: {
-            marginLeft: 5,
+            marginHorizontal: 5,
+            marginRight: 5,
             marginBottom: 5,
             maxHeight: 100,
             flexGrow: 0,
-        },
-        users: {
-            alignItems: 'flex-start',
             flexDirection: 'row',
-            flexWrap: 'wrap',
         },
     };
 });
@@ -36,43 +35,47 @@ const SelectedOptions = ({
     theme, selectedOptions, onRemove, dataSource,
 }: Props) => {
     const style = getStyleFromTheme(theme);
-    const options: React.ReactNode[] = selectedOptions.map((optionItem) => {
-        let key: string;
-
-        switch (dataSource) {
-            case ViewConstants.DATA_SOURCE_USERS:
-                key = (optionItem as UserProfile).id;
-                break;
-            case ViewConstants.DATA_SOURCE_CHANNELS:
-                key = (optionItem as Channel).id;
-                break;
-            default:
-                key = (optionItem as DialogOption).value;
-                break;
-        }
 
+    const renderItem = useCallback(({item}: ListRenderItemInfo<SelectedOption>) => {
         return (
             <SelectedOption
-                key={key}
+                option={item}
-                option={optionItem}
                 theme={theme}
                 dataSource={dataSource}
                 onRemove={onRemove}
             />);
-    });
+    }, [dataSource, onRemove, theme]);
+
+    const extractKey = useCallback((item: SelectedOption) => {
+        let key: string;
+
+        switch (dataSource) {
+            case ViewConstants.DATA_SOURCE_USERS:
+                key = (item as UserProfile)?.id;
+                break;
+            case ViewConstants.DATA_SOURCE_CHANNELS:
+                key = (item as Channel).id;
+                break;
+            default:
+                key = (item as DialogOption).value;
+                break;
+        }
+        return key;
+    }, [dataSource]);
 
-    // eslint-disable-next-line no-warning-comments
-    // TODO Consider using a Virtualized List since the number of elements is potentially unbounded.
-    // https://mattermost.atlassian.net/browse/MM-48420
     return (
-        <ScrollView
+        <View style={[style.container]}>
-            style={style.container}
+            <FlatList
-            contentContainerStyle={style.scrollViewContent}
+                numColumns={3}
-        >
+                data={selectedOptions}
-            <View style={style.users}>
+                initialNumToRender={3}
-                {options}
+                renderItem={renderItem}
-            </View>
+                keyExtractor={extractKey}
-        </ScrollView>
+            />
+
+        </View>
+
+    // </>
     );
 };