diff --git a/app/components/selected_users_panel/index.tsx b/app/components/selected_users_panel/index.tsx
deleted file mode 100644
index 2eba3bce88..0000000000
--- a/app/components/selected_users_panel/index.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {useMemo} from 'react';
-import {View} from 'react-native';
-
-import FormattedText from '@components/formatted_text';
-import {useTheme} from '@context/theme';
-import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
-
-import SelectedUser from './selected_user';
-
-type Props = {
-
-    /*
-     * An object mapping user ids to a falsey value indicating whether or not they've been selected.
-     */
-    selectedIds: {[id: string]: UserProfile};
-
-    /*
-         * How to display the names of users.
-         */
-    teammateNameDisplay: string;
-
-    /*
-         * The number of users that will be selected when we start to display a message indicating
-         * the remaining number of users that can be selected.
-         */
-    warnCount: number;
-
-    /*
-         * The maximum number of users that can be selected.
-         */
-    maxCount: number;
-
-    /*
-         * A handler function that will deselect a user when clicked on.
-         */
-    onRemove: (id: string) => void;
-}
-
-const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
-    return {
-        container: {
-            marginHorizontal: 12,
-        },
-        users: {
-            alignItems: 'flex-start',
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-        },
-        message: {
-            color: changeOpacity(theme.centerChannelColor, 0.6),
-            fontSize: 12,
-            marginRight: 5,
-            marginTop: 10,
-            marginBottom: 2,
-        },
-    };
-});
-
-export default function SelectedUsers({
-    selectedIds,
-    teammateNameDisplay,
-    warnCount,
-    maxCount,
-    onRemove,
-}: Props) {
-    const theme = useTheme();
-    const style = getStyleFromTheme(theme);
-
-    const users = useMemo(() => {
-        const u = [];
-        for (const id of Object.keys(selectedIds)) {
-            if (!selectedIds[id]) {
-                continue;
-            }
-
-            u.push(
-                <SelectedUser
-                    key={id}
-                    user={selectedIds[id]}
-                    teammateNameDisplay={teammateNameDisplay}
-                    onRemove={onRemove}
-                    testID='create_direct_message.selected_user'
-                />,
-            );
-        }
-        return u;
-    }, [selectedIds, teammateNameDisplay, onRemove]);
-
-    const showWarn = users.length >= warnCount && users.length < maxCount;
-
-    const message = useMemo(() => {
-        if (users.length >= maxCount) {
-            return (
-                <FormattedText
-                    style={style.message}
-                    id='mobile.create_direct_message.cannot_add_more'
-                    defaultMessage='You cannot add more users'
-                />
-            );
-        } else if (users.length >= warnCount) {
-            const remaining = maxCount - users.length;
-            if (remaining === 1) {
-                return (
-                    <FormattedText
-                        style={style.message}
-                        id='mobile.create_direct_message.one_more'
-                        defaultMessage='You can add 1 more user'
-                    />
-                );
-            }
-            return (
-                <FormattedText
-                    style={style.message}
-                    id='mobile.create_direct_message.add_more'
-                    defaultMessage='You can add {remaining, number} more users'
-                    values={{
-                        remaining,
-                    }}
-                />
-            );
-        }
-
-        return null;
-    }, [users.length >= maxCount, showWarn && users.length, theme, maxCount]);
-
-    return (
-        <View style={style.container}>
-            <View style={style.users}>
-                {users}
-            </View>
-            {message}
-        </View>
-    );
-}
-
diff --git a/app/components/selected_users_panel/selected_user.tsx b/app/components/selected_users_panel/selected_user.tsx
deleted file mode 100644
index 03ecd506c6..0000000000
--- a/app/components/selected_users_panel/selected_user.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {useCallback} from 'react';
-import {useIntl} from 'react-intl';
-import {
-    Text,
-    TouchableOpacity,
-    View,
-} from 'react-native';
-import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
-
-import CompassIcon from '@components/compass_icon';
-import ProfilePicture from '@components/profile_picture';
-import {useTheme} from '@context/theme';
-import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
-import {typography} from '@utils/typography';
-import {displayUsername} from '@utils/user';
-
-type Props = {
-
-    /*
-     * How to display the names of users.
-     */
-    teammateNameDisplay: string;
-
-    /*
-     * The user that this component represents.
-     */
-    user: UserProfile;
-
-    /*
-     * A handler function that will deselect a user when clicked on.
-     */
-    onRemove: (id: string) => void;
-
-    /*
-     * The test ID.
-     */
-    testID?: string;
-}
-
-export const USER_CHIP_HEIGHT = 32;
-export const USER_CHIP_BOTTOM_MARGIN = 8;
-const FADE_DURATION = 100;
-
-const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
-    return {
-        container: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexDirection: 'row',
-            borderRadius: 16,
-            height: USER_CHIP_HEIGHT,
-            backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
-            marginBottom: USER_CHIP_BOTTOM_MARGIN,
-            marginRight: 8,
-            paddingHorizontal: 7,
-        },
-        remove: {
-            justifyContent: 'center',
-            marginLeft: 7,
-        },
-        profileContainer: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginRight: 8,
-            color: theme.centerChannelColor,
-        },
-        text: {
-            color: theme.centerChannelColor,
-            ...typography('Body', 100, 'SemiBold'),
-        },
-    };
-});
-
-export default function SelectedUser({
-    teammateNameDisplay,
-    user,
-    onRemove,
-    testID,
-}: Props) {
-    const theme = useTheme();
-    const style = getStyleFromTheme(theme);
-    const intl = useIntl();
-
-    const onPress = useCallback(() => {
-        onRemove(user.id);
-    }, [onRemove, user.id]);
-
-    const userItemTestID = `${testID}.${user.id}`;
-    return (
-        <Animated.View
-            entering={FadeIn.duration(FADE_DURATION)}
-            exiting={FadeOut.duration(FADE_DURATION)}
-            style={style.container}
-            testID={`${testID}.${user.id}`}
-        >
-            <View style={style.profileContainer}>
-                <ProfilePicture
-                    author={user}
-                    size={20}
-                    iconSize={20}
-                    testID={`${userItemTestID}.profile_picture`}
-                />
-            </View>
-            <Text
-                style={style.text}
-                testID={`${testID}.${user.id}.display_name`}
-            >
-                {displayUsername(user, intl.locale, teammateNameDisplay)}
-            </Text>
-            <TouchableOpacity
-                style={style.remove}
-                onPress={onPress}
-                testID={`${testID}.${user.id}.remove.button`}
-            >
-                <CompassIcon
-                    name='close-circle'
-                    size={18}
-                    color={changeOpacity(theme.centerChannelColor, 0.32)}
-                />
-            </TouchableOpacity>
-        </Animated.View>
-    );
-}