Upgrade Dependencies (#7299)

* upgrade reanimated

* update devDependencies

* upgrade react-intl

* update react-native and some dependencies

* update react-native-permissions

* update RN

* use Share sheet for Report a problem

* update Sentry

* remove step to downloadWebRTC

* update detox deps

* feedback review

.circleci/config.yml

@@ -114,7 +114,6 @@ commands:
           command: |
             NODE_ENV=development npm ci --ignore-scripts
             node node_modules/\@sentry/cli/scripts/install.js
-            node node_modules/react-native-webrtc/tools/downloadWebRTC.js
       - save_cache:
           name: Save npm cache
           key: v2-npm-{{ checksum "package.json" }}-{{ arch }}

NOTICE.txt

@@ -246,41 +246,6 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 
----
-
-## @mattermost/react-native-turbo-mailer
-
-This product contains '@mattermost/react-native-turbo-mailer' by Avinash Lingaloo.
-
-An adaptation of react-native-mail that supports Turbo Module
-
-* HOMEPAGE:
-  * https://github.com/mattermost/react-native-turbo-mailer#readme
-
-* LICENSE: MIT
-
-MIT License
-
-Copyright (c) 2022 Mattermost
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-
 ---
 
 ## @msgpack/msgpack
@@ -1546,42 +1511,6 @@ Open Android settings from your React Native app
 * LICENSE: ISC
 
 
----
-
-## react-native-animated-numbers
-
-This product contains 'react-native-animated-numbers' by Lake (Yeongsu Han).
-
-Library showing animation of number changes in react-native
-
-* HOMEPAGE:
-  * https://github.com/heyman333/react-native-animated-numbers
-
-* LICENSE: MIT
-
-MIT License
-
-Copyright (c) 2020 Yeongsu Han
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-
 ---
 
 ## react-native-background-timer

app/actions/local/channel.ts

@@ -14,7 +14,7 @@ import {
     getMyChannel, getChannelById, queryUsersOnChannel, queryUserChannelsByTypes,
 } from '@queries/servers/channel';
 import {queryDisplayNamePreferences} from '@queries/servers/preference';
-import {prepareCommonSystemValues, PrepareCommonSystemValuesArgs, getCommonSystemValues, getCurrentTeamId, setCurrentChannelId, getCurrentUserId, getConfig, getLicense} from '@queries/servers/system';
+import {prepareCommonSystemValues, type PrepareCommonSystemValuesArgs, getCommonSystemValues, getCurrentTeamId, setCurrentChannelId, getCurrentUserId, getConfig, getLicense} from '@queries/servers/system';
 import {addChannelToTeamHistory, addTeamToTeamHistory, getTeamById, removeChannelFromTeamHistory} from '@queries/servers/team';
 import {getCurrentUser, queryUsersById} from '@queries/servers/user';
 import {dismissAllModalsAndPopToRoot, dismissAllModalsAndPopToScreen} from '@screens/navigation';

app/actions/local/thread.ts

@@ -8,7 +8,7 @@ import DatabaseManager from '@database/manager';
 import {getTranslations, t} from '@i18n';
 import {getChannelById} from '@queries/servers/channel';
 import {getPostById} from '@queries/servers/post';
-import {getCurrentTeamId, getCurrentUserId, prepareCommonSystemValues, PrepareCommonSystemValuesArgs, setCurrentTeamAndChannelId} from '@queries/servers/system';
+import {getCurrentTeamId, getCurrentUserId, prepareCommonSystemValues, type PrepareCommonSystemValuesArgs, setCurrentTeamAndChannelId} from '@queries/servers/system';
 import {addChannelToTeamHistory, addTeamToTeamHistory} from '@queries/servers/team';
 import {getIsCRTEnabled, getThreadById, prepareThreadsFromReceivedPosts, queryThreadsInTeam} from '@queries/servers/thread';
 import {getCurrentUser} from '@queries/servers/user';

app/actions/remote/entry/common.ts

@@ -1,15 +1,15 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {fetchMissingDirectChannelsInfo, fetchMyChannelsForTeam, handleKickFromChannel, MyChannelsRequest} from '@actions/remote/channel';
+import {fetchMissingDirectChannelsInfo, fetchMyChannelsForTeam, handleKickFromChannel, type MyChannelsRequest} from '@actions/remote/channel';
 import {fetchGroupsForMember} from '@actions/remote/groups';
 import {fetchPostsForUnreadChannels} from '@actions/remote/post';
-import {MyPreferencesRequest, fetchMyPreferences} from '@actions/remote/preference';
+import {type MyPreferencesRequest, fetchMyPreferences} from '@actions/remote/preference';
 import {fetchRoles} from '@actions/remote/role';
 import {fetchConfigAndLicense} from '@actions/remote/systems';
-import {fetchMyTeams, fetchTeamsChannelsAndUnreadPosts, handleKickFromTeam, MyTeamsRequest, updateCanJoinTeams} from '@actions/remote/team';
+import {fetchMyTeams, fetchTeamsChannelsAndUnreadPosts, handleKickFromTeam, type MyTeamsRequest, updateCanJoinTeams} from '@actions/remote/team';
 import {syncTeamThreads} from '@actions/remote/thread';
-import {fetchMe, MyUserRequest, updateAllUsersSince} from '@actions/remote/user';
+import {fetchMe, type MyUserRequest, updateAllUsersSince} from '@actions/remote/user';
 import {General, Preferences, Screens} from '@constants';
 import {SYSTEM_IDENTIFIERS} from '@constants/database';
 import {PUSH_PROXY_RESPONSE_NOT_AVAILABLE, PUSH_PROXY_RESPONSE_UNKNOWN, PUSH_PROXY_STATUS_NOT_AVAILABLE, PUSH_PROXY_STATUS_UNKNOWN, PUSH_PROXY_STATUS_VERIFIED} from '@constants/push_proxy';

app/actions/remote/entry/gql_common.ts

@@ -5,7 +5,7 @@ import {storeConfigAndLicense} from '@actions/local/systems';
 import {fetchGroupsForMember} from '@actions/remote/groups';
 import {fetchPostsForUnreadChannels} from '@actions/remote/post';
 import {fetchDataRetentionPolicy} from '@actions/remote/systems';
-import {MyTeamsRequest, updateCanJoinTeams} from '@actions/remote/team';
+import {type MyTeamsRequest, updateCanJoinTeams} from '@actions/remote/team';
 import {syncTeamThreads} from '@actions/remote/thread';
 import {autoUpdateTimezone, fetchProfilesInGroupChannels, updateAllUsersSince} from '@actions/remote/user';
 import {gqlEntry, gqlEntryChannels, gqlOtherChannels} from '@client/graphQL/entry';
@@ -21,7 +21,7 @@ import {filterAndTransformRoles, getMemberChannelsFromGQLQuery, getMemberTeamsFr
 import {logDebug} from '@utils/log';
 import {processIsCRTEnabled} from '@utils/thread';
 
-import {teamsToRemove, FETCH_UNREADS_TIMEOUT, entryRest, EntryResponse, entryInitialChannelId, restDeferredAppEntryActions, getRemoveTeamIds} from './common';
+import {teamsToRemove, FETCH_UNREADS_TIMEOUT, entryRest, type EntryResponse, entryInitialChannelId, restDeferredAppEntryActions, getRemoveTeamIds} from './common';
 
 import type {MyChannelsRequest} from '@actions/remote/channel';
 import type ClientError from '@client/rest/error';

app/actions/remote/retry.ts

@@ -15,12 +15,12 @@ import {prepareMyTeams} from '@queries/servers/team';
 import {getCurrentUser} from '@queries/servers/user';
 import {isDMorGM, selectDefaultChannelForTeam} from '@utils/channel';
 
-import {fetchMissingDirectChannelsInfo, fetchMyChannelsForTeam, MyChannelsRequest} from './channel';
+import {fetchMissingDirectChannelsInfo, fetchMyChannelsForTeam, type MyChannelsRequest} from './channel';
 import {fetchPostsForChannel} from './post';
-import {fetchMyPreferences, MyPreferencesRequest} from './preference';
+import {fetchMyPreferences, type MyPreferencesRequest} from './preference';
 import {fetchRolesIfNeeded} from './role';
-import {ConfigAndLicenseRequest, fetchConfigAndLicense} from './systems';
-import {fetchMyTeams, MyTeamsRequest} from './team';
+import {type ConfigAndLicenseRequest, fetchConfigAndLicense} from './systems';
+import {fetchMyTeams, type MyTeamsRequest} from './team';
 
 import type {Model} from '@nozbe/watermelondb';
 import type TeamModel from '@typings/database/models/servers/team';

app/client/rest/index.ts

@@ -1,27 +1,27 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import ClientCalls, {ClientCallsMix} from '@calls/client/rest';
-import ClientPlugins, {ClientPluginsMix} from '@client/rest/plugins';
+import ClientCalls, {type ClientCallsMix} from '@calls/client/rest';
+import ClientPlugins, {type ClientPluginsMix} from '@client/rest/plugins';
 import mix from '@utils/mix';
 
-import ClientApps, {ClientAppsMix} from './apps';
+import ClientApps, {type ClientAppsMix} from './apps';
 import ClientBase from './base';
-import ClientCategories, {ClientCategoriesMix} from './categories';
-import ClientChannels, {ClientChannelsMix} from './channels';
+import ClientCategories, {type ClientCategoriesMix} from './categories';
+import ClientChannels, {type ClientChannelsMix} from './channels';
 import {DEFAULT_LIMIT_AFTER, DEFAULT_LIMIT_BEFORE, HEADER_X_VERSION_ID} from './constants';
-import ClientEmojis, {ClientEmojisMix} from './emojis';
-import ClientFiles, {ClientFilesMix} from './files';
-import ClientGeneral, {ClientGeneralMix} from './general';
-import ClientGroups, {ClientGroupsMix} from './groups';
-import ClientIntegrations, {ClientIntegrationsMix} from './integrations';
-import ClientNPS, {ClientNPSMix} from './nps';
-import ClientPosts, {ClientPostsMix} from './posts';
-import ClientPreferences, {ClientPreferencesMix} from './preferences';
-import ClientTeams, {ClientTeamsMix} from './teams';
-import ClientThreads, {ClientThreadsMix} from './threads';
-import ClientTos, {ClientTosMix} from './tos';
-import ClientUsers, {ClientUsersMix} from './users';
+import ClientEmojis, {type ClientEmojisMix} from './emojis';
+import ClientFiles, {type ClientFilesMix} from './files';
+import ClientGeneral, {type ClientGeneralMix} from './general';
+import ClientGroups, {type ClientGroupsMix} from './groups';
+import ClientIntegrations, {type ClientIntegrationsMix} from './integrations';
+import ClientNPS, {type ClientNPSMix} from './nps';
+import ClientPosts, {type ClientPostsMix} from './posts';
+import ClientPreferences, {type ClientPreferencesMix} from './preferences';
+import ClientTeams, {type ClientTeamsMix} from './teams';
+import ClientThreads, {type ClientThreadsMix} from './threads';
+import ClientTos, {type ClientTosMix} from './tos';
+import ClientUsers, {type ClientUsersMix} from './users';
 
 import type {APIClientInterface} from '@mattermost/react-native-network-client';
 

app/client/websocket/index.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {ClientHeaders, getOrCreateWebSocketClient, WebSocketClientInterface, WebSocketReadyState} from '@mattermost/react-native-network-client';
+import {type ClientHeaders, getOrCreateWebSocketClient, type WebSocketClientInterface, WebSocketReadyState} from '@mattermost/react-native-network-client';
 import {Platform} from 'react-native';
 
 import {WebsocketEvents} from '@constants';

app/components/animated_number/index.tsx

@@ -0,0 +1,119 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useCallback, useMemo} from 'react';
+import {Animated, Easing, type LayoutChangeEvent, type StyleProp, Text, type TextStyle, View} from 'react-native';
+
+interface Props {
+    animateToNumber: number;
+    fontStyle?: StyleProp<TextStyle>;
+    animationDuration?: number;
+    easing?: ((input: number) => number) | undefined;
+  }
+
+const NUMBERS = Array(10).fill(null).map((_, i) => i);
+
+const usePrevious = (value: number) => {
+    const ref = React.useRef<number>(value);
+    React.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+
+    return ref.current;
+};
+
+const AnimatedNumber = ({
+    animateToNumber,
+    animationDuration,
+    fontStyle,
+    easing,
+}: Props) => {
+    const prevNumber = usePrevious(animateToNumber);
+    const animateToNumberString = String(Math.abs(animateToNumber));
+    const prevNumberString = String(Math.abs(prevNumber));
+
+    const numberStringToDigitsArray = Array.from(animateToNumberString, Number);
+    const prevNumberersArr = Array.from(prevNumberString, Number);
+
+    const [numberHeight, setNumberHeight] = React.useState(0);
+    const animations = useMemo(() => numberStringToDigitsArray.map((__, index) => {
+        if (typeof prevNumberersArr[index] !== 'number') {
+            return new Animated.Value(0);
+        }
+
+        const animationHeight = -1 * (numberHeight * prevNumberersArr[index]);
+        return new Animated.Value(animationHeight);
+    }), [numberStringToDigitsArray]);
+
+    const setButtonLayout = useCallback((e: LayoutChangeEvent) => {
+        setNumberHeight(e.nativeEvent.layout.height);
+    }, []);
+
+    React.useEffect(() => {
+        animations.forEach((animation, index) => {
+            Animated.timing(animation, {
+                toValue: -1 * (numberHeight * numberStringToDigitsArray[index]),
+                duration: animationDuration || 1400,
+                useNativeDriver: true,
+                easing: easing || Easing.elastic(1.2),
+            }).start();
+        });
+    }, [animateToNumber, animationDuration, fontStyle, numberHeight]);
+
+    const getTranslateY = (index: number) => {
+        return animations[index];
+    };
+
+    return (
+        <>
+            {numberHeight !== 0 && (
+                <View style={{flexDirection: 'row'}}>
+                    {animateToNumber < 0 && (
+                        <Text style={[fontStyle, {height: numberHeight}]}>{'-'}</Text>
+                    )}
+                    {numberStringToDigitsArray.map((n, index) => {
+                        return (
+                            <View
+                                key={`${index.toString()}`}
+                                style={{height: numberHeight, overflow: 'hidden'}}
+                            >
+                                <Animated.View
+                                    style={[
+                                        {
+                                            transform: [
+                                                {
+                                                    translateY: getTranslateY(index),
+                                                },
+                                            ],
+                                        },
+                                    ]}
+                                >
+                                    {NUMBERS.map((number, i) => (
+                                        <View
+                                            style={{flexDirection: 'row'}}
+                                            key={`${i.toString()}`}
+                                        >
+                                            <Text style={[fontStyle, {height: numberHeight}]}>
+                                                {number}
+                                            </Text>
+                                        </View>
+                                    ))}
+                                </Animated.View>
+                            </View>
+                        );
+                    })}
+                </View>
+            )}
+            {numberHeight === 0 &&
+            <Text
+                style={[fontStyle]}
+                onLayout={setButtonLayout}
+            >
+                {animateToNumberString}
+            </Text>
+            }
+        </>
+    );
+};
+
+export default AnimatedNumber;

app/components/app_version/__snapshots__/index.test.tsx.snap

@@ -2,14 +2,6 @@
 
 exports[`@components/app_version should match snapshot 1`] = `
 <View
-  animatedStyle={
-    {
-      "value": {
-        "opacity": 1,
-      },
-    }
-  }
-  collapsable={false}
   pointerEvents="none"
   style={
     {

app/components/app_version/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useEffect} from 'react';
-import {Keyboard, StyleSheet, TextStyle, View} from 'react-native';
+import {Keyboard, StyleSheet, type TextStyle, View} from 'react-native';
 import DeviceInfo from 'react-native-device-info';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 

app/components/autocomplete/at_mention/at_mention.tsx

@@ -3,7 +3,7 @@
 
 import {debounce} from 'lodash';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {Platform, SectionList, SectionListData, SectionListRenderItemInfo, StyleProp, ViewStyle} from 'react-native';
+import {Platform, SectionList, type SectionListData, type SectionListRenderItemInfo, type StyleProp, type ViewStyle} from 'react-native';
 
 import {searchGroupsByName, searchGroupsByNameInChannel, searchGroupsByNameInTeam} from '@actions/local/group';
 import {searchUsers} from '@actions/remote/user';

app/components/autocomplete/autocomplete.tsx

@@ -2,8 +2,8 @@
 // See LICENSE.txt for license information.
 
 import React, {useMemo, useState} from 'react';
-import {Platform, StyleProp, useWindowDimensions, ViewStyle} from 'react-native';
-import Animated, {SharedValue, useAnimatedStyle, useDerivedValue} from 'react-native-reanimated';
+import {Platform, type StyleProp, useWindowDimensions, type ViewStyle} from 'react-native';
+import Animated, {type SharedValue, useAnimatedStyle, useDerivedValue} from 'react-native-reanimated';
 
 import {MAX_LIST_HEIGHT, MAX_LIST_TABLET_DIFF} from '@constants/autocomplete';
 import {useTheme} from '@context/theme';

app/components/autocomplete/channel_mention/channel_mention.tsx

@@ -3,7 +3,7 @@
 
 import {debounce} from 'lodash';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {Platform, SectionList, SectionListData, SectionListRenderItemInfo, StyleProp, ViewStyle} from 'react-native';
+import {Platform, SectionList, type SectionListData, type SectionListRenderItemInfo, type StyleProp, type ViewStyle} from 'react-native';
 
 import {searchChannels} from '@actions/remote/channel';
 import AutocompleteSectionHeader from '@components/autocomplete/autocomplete_section_header';

app/components/autocomplete/emoji_suggestion/emoji_suggestion.tsx

@@ -4,7 +4,7 @@
 import Fuse from 'fuse.js';
 import {debounce} from 'lodash';
 import React, {useCallback, useEffect, useMemo} from 'react';
-import {FlatList, Platform, StyleProp, Text, View, ViewStyle} from 'react-native';
+import {FlatList, Platform, type StyleProp, Text, View, type ViewStyle} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {searchCustomEmojis} from '@actions/remote/custom_emoji';

app/components/autocomplete/slash_suggestion/app_slash_suggestion/app_slash_suggestion.tsx

@@ -4,7 +4,7 @@
 import {debounce} from 'lodash';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {FlatList, Platform, StyleProp, ViewStyle} from 'react-native';
+import {FlatList, Platform, type StyleProp, type ViewStyle} from 'react-native';
 
 import AtMentionItem from '@components/autocomplete/at_mention_item';
 import ChannelItem from '@components/channel_item';
@@ -12,7 +12,7 @@ import {COMMAND_SUGGESTION_CHANNEL, COMMAND_SUGGESTION_USER} from '@constants/ap
 import {useServerUrl} from '@context/server';
 import analytics from '@managers/analytics';
 
-import {AppCommandParser, ExtendedAutocompleteSuggestion} from '../app_command_parser/app_command_parser';
+import {AppCommandParser, type ExtendedAutocompleteSuggestion} from '../app_command_parser/app_command_parser';
 import SlashSuggestionItem from '../slash_suggestion_item';
 
 export type Props = {

app/components/autocomplete/slash_suggestion/slash_suggestion.tsx

@@ -7,8 +7,8 @@ import {useIntl} from 'react-intl';
 import {
     FlatList,
     Platform,
-    StyleProp,
-    ViewStyle,
+    type StyleProp,
+    type ViewStyle,
 } from 'react-native';
 
 import {fetchSuggestions} from '@actions/remote/command';

app/components/autocomplete_selector/index.tsx

@@ -4,7 +4,7 @@
 import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
 import withObservables from '@nozbe/with-observables';
 import React, {useCallback, useEffect, useState} from 'react';
-import {IntlShape, useIntl} from 'react-intl';
+import {type IntlShape, useIntl} from 'react-intl';
 import {Text, View} from 'react-native';
 
 import CompassIcon from '@components/compass_icon';

app/components/badge/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import * as React from 'react';
-import {Animated, Platform, StyleProp, StyleSheet, TextStyle} from 'react-native';
+import {Animated, Platform, type StyleProp, StyleSheet, type TextStyle} from 'react-native';
 
 import {useTheme} from '@context/theme';
 

app/components/button/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useMemo} from 'react';
-import {StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';
+import {type StyleProp, StyleSheet, Text, type TextStyle, View, type ViewStyle} from 'react-native';
 import RNButton from 'react-native-button';
 
 import CompassIcon from '@components/compass_icon';

app/components/channel_icon/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {StyleProp, Text, View, ViewStyle} from 'react-native';
+import {type StyleProp, Text, View, type ViewStyle} from 'react-native';
 
 import CompassIcon from '@components/compass_icon';
 import General from '@constants/general';

app/components/channel_item/channel_body.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 import React from 'react';
-import {StyleProp, Text, TextStyle, View} from 'react-native';
+import {type StyleProp, Text, type TextStyle, View} from 'react-native';
 
 import {useTheme} from '@context/theme';
 import {useIsTablet} from '@hooks/device';

app/components/custom_status/custom_status_expiry.tsx

@@ -3,9 +3,9 @@
 
 import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
 import withObservables from '@nozbe/with-observables';
-import moment, {Moment} from 'moment-timezone';
+import moment, {type Moment} from 'moment-timezone';
 import React from 'react';
-import {Text, TextStyle} from 'react-native';
+import {Text, type TextStyle} from 'react-native';
 import {of as of$} from 'rxjs';
 import {switchMap} from 'rxjs/operators';
 

app/components/custom_status/custom_status_text.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {Text, TextStyle} from 'react-native';
+import {Text, type TextStyle} from 'react-native';
 
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 

app/components/error_text/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {StyleProp, Text, TextStyle, ViewStyle} from 'react-native';
+import {type StyleProp, Text, type TextStyle, type ViewStyle} from 'react-native';
 
 import FormattedText from '@components/formatted_text';
 import {useTheme} from '@context/theme';

app/components/files/document_file.tsx

@@ -3,7 +3,7 @@
 
 import React, {forwardRef, useImperativeHandle, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {Platform, StatusBar, StatusBarStyle, StyleSheet, TouchableOpacity, View} from 'react-native';
+import {Platform, StatusBar, type StatusBarStyle, StyleSheet, TouchableOpacity, View} from 'react-native';
 import FileViewer from 'react-native-file-viewer';
 import FileSystem from 'react-native-fs';
 import tinyColor from 'tinycolor2';

app/components/files/file.tsx

@@ -11,7 +11,7 @@ import {useGalleryItem} from '@hooks/gallery';
 import {isDocument, isImage, isVideo} from '@utils/file';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
-import DocumentFile, {DocumentFileRef} from './document_file';
+import DocumentFile, {type DocumentFileRef} from './document_file';
 import FileIcon from './file_icon';
 import FileInfo from './file_info';
 import FileOptionsIcon from './file_options_icon';

app/components/files/file_filter.tsx

@@ -3,7 +3,7 @@
 
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
-import {ListRenderItemInfo, View} from 'react-native';
+import {type ListRenderItemInfo, View} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
 
 import OptionItem, {ITEM_HEIGHT} from '@components/option_item';
@@ -12,7 +12,7 @@ import {useIsTablet} from '@hooks/device';
 import {t} from '@i18n';
 import BottomSheetContent from '@screens/bottom_sheet/content';
 import {dismissBottomSheet} from '@screens/navigation';
-import {FileFilter, FileFilters} from '@utils/file';
+import {type FileFilter, FileFilters} from '@utils/file';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
 const getStyleSheet = makeStyleSheetFromTheme((theme) => {

app/components/files/files.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useEffect, useMemo, useState} from 'react';
-import {DeviceEventEmitter, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
+import {DeviceEventEmitter, type StyleProp, StyleSheet, View, type ViewStyle} from 'react-native';
 import Animated, {useDerivedValue} from 'react-native-reanimated';
 
 import {Events} from '@constants';

app/components/files/image_file.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useMemo, useState} from 'react';
-import {StyleProp, StyleSheet, useWindowDimensions, View, ViewStyle} from 'react-native';
+import {type StyleProp, StyleSheet, useWindowDimensions, View, type ViewStyle} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 
 import {buildFilePreviewUrl, buildFileThumbnailUrl} from '@actions/remote/file';

app/components/files_search/file_results.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useMemo, useState} from 'react';
-import {FlatList, ListRenderItemInfo, StyleProp, ViewStyle} from 'react-native';
+import {FlatList, type ListRenderItemInfo, type StyleProp, type ViewStyle} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import NoResults from '@components/files_search/no_results';

app/components/floating_text_input_label/index.tsx

@@ -5,7 +5,7 @@
 
 import {debounce} from 'lodash';
 import React, {useState, useEffect, useRef, useImperativeHandle, forwardRef, useMemo, useCallback} from 'react';
-import {GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, StyleProp, TargetedEvent, Text, TextInput, TextInputFocusEventData, TextInputProps, TextStyle, TouchableWithoutFeedback, View, ViewStyle} from 'react-native';
+import {type GestureResponderEvent, type LayoutChangeEvent, type NativeSyntheticEvent, type StyleProp, type TargetedEvent, Text, TextInput, type TextInputFocusEventData, type TextInputProps, type TextStyle, TouchableWithoutFeedback, View, type ViewStyle} from 'react-native';
 import Animated, {useAnimatedStyle, withTiming, Easing} from 'react-native-reanimated';
 
 import CompassIcon from '@components/compass_icon';

app/components/floating_text_input_label/utils.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {NativeSyntheticEvent, Platform, TargetedEvent, TextInputFocusEventData, TextStyle} from 'react-native';
+import {type NativeSyntheticEvent, Platform, type TargetedEvent, type TextInputFocusEventData, type TextStyle} from 'react-native';
 
 export const onExecution = (
     e: NativeSyntheticEvent<TextInputFocusEventData>,

app/components/formatted_date/index.tsx

@@ -5,7 +5,7 @@ import moment from 'moment';
 import mtz from 'moment-timezone';
 import React from 'react';
 import {useIntl} from 'react-intl';
-import {Text, TextProps} from 'react-native';
+import {Text, type TextProps} from 'react-native';
 
 import {getLocaleFromLanguage} from '@i18n';
 

app/components/formatted_markdown_text/index.tsx

@@ -3,9 +3,9 @@
 
 import {Parser} from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
-import React, {ReactElement, useRef} from 'react';
+import React, {type ReactElement, useRef} from 'react';
 import {useIntl} from 'react-intl';
-import {GestureResponderEvent, StyleProp, Text, TextStyle, ViewStyle} from 'react-native';
+import {type GestureResponderEvent, type StyleProp, Text, type TextStyle, type ViewStyle} from 'react-native';
 
 import AtMention from '@components/markdown/at_mention';
 import MarkdownLink from '@components/markdown/markdown_link';

app/components/formatted_relative_time/index.tsx

@@ -3,7 +3,7 @@
 
 import moment from 'moment-timezone';
 import React, {useEffect, useState} from 'react';
-import {Text, TextProps} from 'react-native';
+import {Text, type TextProps} from 'react-native';
 
 import {toMilliseconds} from '@utils/datetime';
 

app/components/formatted_text/index.tsx

@@ -3,7 +3,7 @@
 
 import {createElement, isValidElement} from 'react';
 import {useIntl} from 'react-intl';
-import {StyleProp, Text, TextProps, TextStyle} from 'react-native';
+import {type StyleProp, Text, type TextProps, type TextStyle} from 'react-native';
 
 type FormattedTextProps = TextProps & {
     id: string;

app/components/formatted_time/index.tsx

@@ -5,7 +5,7 @@ import moment from 'moment';
 import mtz from 'moment-timezone';
 import React from 'react';
 import {useIntl} from 'react-intl';
-import {Text, TextProps} from 'react-native';
+import {Text, type TextProps} from 'react-native';
 
 import {getLocaleFromLanguage} from '@i18n';
 

app/components/friendly_date/index.tsx

@@ -2,8 +2,8 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {IntlShape, useIntl} from 'react-intl';
-import {StyleProp, Text, TextStyle} from 'react-native';
+import {type IntlShape, useIntl} from 'react-intl';
+import {type StyleProp, Text, type TextStyle} from 'react-native';
 
 import {DateTime} from '@constants';
 import {isYesterday} from '@utils/datetime';

app/components/jumbo_emoji/index.tsx

@@ -3,8 +3,8 @@
 
 import {Node, Parser} from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
-import React, {ReactElement, useRef} from 'react';
-import {Platform, StyleProp, Text, TextStyle, View} from 'react-native';
+import React, {type ReactElement, useRef} from 'react';
+import {Platform, type StyleProp, Text, type TextStyle, View} from 'react-native';
 
 import Emoji from '@components/emoji';
 import FormattedText from '@components/formatted_text';

app/components/loading/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {ActivityIndicator, StyleProp, View, ViewStyle} from 'react-native';
+import {ActivityIndicator, type StyleProp, View, type ViewStyle} from 'react-native';
 
 import {useTheme} from '@context/theme';
 

app/components/markdown/at_mention/at_mention.tsx

@@ -5,7 +5,7 @@ import {useManagedConfig} from '@mattermost/react-native-emm';
 import Clipboard from '@react-native-clipboard/clipboard';
 import React, {useCallback, useEffect, useMemo} from 'react';
 import {useIntl} from 'react-intl';
-import {GestureResponderEvent, Keyboard, StyleProp, StyleSheet, Text, TextStyle, View} from 'react-native';
+import {type GestureResponderEvent, Keyboard, type StyleProp, StyleSheet, Text, type TextStyle, View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {fetchUserOrGroupsByMentionsInBatch} from '@actions/remote/user';

app/components/markdown/channel_mention/channel_mention.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import {useIntl} from 'react-intl';
-import {StyleProp, Text, TextStyle} from 'react-native';
+import {type StyleProp, Text, type TextStyle} from 'react-native';
 
 import {joinChannel, switchToChannelById} from '@actions/remote/channel';
 import {useServerUrl} from '@context/server';

app/components/markdown/hashtag/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {DeviceEventEmitter, StyleProp, Text, TextStyle} from 'react-native';
+import {DeviceEventEmitter, type StyleProp, Text, type TextStyle} from 'react-native';
 
 import {Navigation, Screens} from '@constants';
 import {popToRoot, dismissAllModals} from '@screens/navigation';

app/components/markdown/markdown.tsx

@@ -4,8 +4,8 @@
 import {useManagedConfig} from '@mattermost/react-native-emm';
 import {Parser, Node} from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
-import React, {ReactElement, useMemo, useRef} from 'react';
-import {Dimensions, GestureResponderEvent, Platform, StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';
+import React, {type ReactElement, useMemo, useRef} from 'react';
+import {Dimensions, type GestureResponderEvent, Platform, type StyleProp, StyleSheet, Text, type TextStyle, View, type ViewStyle} from 'react-native';
 
 import CompassIcon from '@components/compass_icon';
 import Emoji from '@components/emoji';
@@ -15,7 +15,7 @@ import {blendColors, changeOpacity, concatStyles, makeStyleSheetFromTheme} from
 import {getScheme} from '@utils/url';
 
 import AtMention from './at_mention';
-import ChannelMention, {ChannelMentions} from './channel_mention';
+import ChannelMention, {type ChannelMentions} from './channel_mention';
 import Hashtag from './hashtag';
 import MarkdownBlockQuote from './markdown_block_quote';
 import MarkdownCodeBlock from './markdown_code_block';
@@ -26,9 +26,9 @@ import MarkdownLink from './markdown_link';
 import MarkdownList from './markdown_list';
 import MarkdownListItem from './markdown_list_item';
 import MarkdownTable from './markdown_table';
-import MarkdownTableCell, {MarkdownTableCellProps} from './markdown_table_cell';
+import MarkdownTableCell, {type MarkdownTableCellProps} from './markdown_table_cell';
 import MarkdownTableImage from './markdown_table_image';
-import MarkdownTableRow, {MarkdownTableRowProps} from './markdown_table_row';
+import MarkdownTableRow, {type MarkdownTableRowProps} from './markdown_table_row';
 import {addListItemIndices, combineTextNodes, highlightMentions, highlightSearchPatterns, parseTaskLists, pullOutImages} from './transform';
 
 import type {

app/components/markdown/markdown_block_quote/index.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ReactNode} from 'react';
-import {StyleSheet, TextStyle, View, ViewStyle} from 'react-native';
+import React, {type ReactNode} from 'react';
+import {StyleSheet, type TextStyle, View, type ViewStyle} from 'react-native';
 
 import CompassIcon from '@components/compass_icon';
 

app/components/markdown/markdown_code_block/index.tsx

@@ -5,7 +5,7 @@ import {useManagedConfig} from '@mattermost/react-native-emm';
 import Clipboard from '@react-native-clipboard/clipboard';
 import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
-import {Keyboard, StyleSheet, Text, TextStyle, TouchableOpacity, View} from 'react-native';
+import {Keyboard, StyleSheet, Text, type TextStyle, TouchableOpacity, View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import FormattedText from '@components/formatted_text';

app/components/markdown/markdown_image/index.tsx

@@ -5,7 +5,7 @@ import {useManagedConfig} from '@mattermost/react-native-emm';
 import Clipboard from '@react-native-clipboard/clipboard';
 import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {Alert, Platform, StyleProp, Text, TextStyle, TouchableWithoutFeedback, View} from 'react-native';
+import {Alert, Platform, type StyleProp, Text, type TextStyle, TouchableWithoutFeedback, View} from 'react-native';
 import Animated from 'react-native-reanimated';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {SvgUri} from 'react-native-svg';

app/components/markdown/markdown_link/markdown_link.tsx

@@ -3,7 +3,7 @@
 
 import {useManagedConfig} from '@mattermost/react-native-emm';
 import Clipboard from '@react-native-clipboard/clipboard';
-import React, {Children, ReactElement, useCallback} from 'react';
+import React, {Children, type ReactElement, useCallback} from 'react';
 import {useIntl} from 'react-intl';
 import {Alert, StyleSheet, Text, View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';

app/components/markdown/markdown_list/index.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ReactElement} from 'react';
+import React, {type ReactElement} from 'react';
 
 type MarkdownList = {
    children: ReactElement[];

app/components/markdown/markdown_list_item/index.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ReactNode} from 'react';
-import {StyleSheet, Text, TextStyle, View} from 'react-native';
+import React, {type ReactNode} from 'react';
+import {StyleSheet, Text, type TextStyle, View} from 'react-native';
 
 type MarkdownListItemProps = {
     bulletStyle: TextStyle;

app/components/markdown/markdown_table/index.tsx

@@ -1,9 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {PureComponent, ReactNode} from 'react';
-import {injectIntl, IntlShape} from 'react-intl';
-import {Dimensions, EventSubscription, LayoutChangeEvent, Platform, ScaledSize, ScrollView, StyleProp, TouchableOpacity, View, ViewStyle} from 'react-native';
+import React, {PureComponent, type ReactNode} from 'react';
+import {injectIntl, type IntlShape} from 'react-intl';
+import {Dimensions, type EventSubscription, type LayoutChangeEvent, Platform, type ScaledSize, ScrollView, type StyleProp, TouchableOpacity, View, type ViewStyle} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 
 import CompassIcon from '@components/compass_icon';

app/components/markdown/markdown_table_cell/index.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ReactNode} from 'react';
-import {StyleProp, View, ViewStyle} from 'react-native';
+import React, {type ReactNode} from 'react';
+import {type StyleProp, View, type ViewStyle} from 'react-native';
 
 import {useTheme} from '@context/theme';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';

app/components/markdown/markdown_table_row/index.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ReactElement, ReactNode} from 'react';
-import {StyleProp, View, ViewStyle} from 'react-native';
+import React, {type ReactElement, type ReactNode} from 'react';
+import {type StyleProp, View, type ViewStyle} from 'react-native';
 
 import {useTheme} from '@context/theme';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';

app/components/markdown/transform.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {Node, NodeType} from 'commonmark';
+import {Node, type NodeType} from 'commonmark';
 
 import {escapeRegex} from '@utils/markdown';
 

app/components/navigation_header/index.tsx

@@ -10,7 +10,7 @@ import useHeaderHeight, {MAX_OVERSCROLL} from '@hooks/header';
 import {clamp} from '@utils/gallery';
 import {makeStyleSheetFromTheme} from '@utils/theme';
 
-import Header, {HeaderRightButton} from './header';
+import Header, {type HeaderRightButton} from './header';
 import NavigationHeaderLargeTitle from './large';
 import NavigationSearch from './search';
 

app/components/navigation_header/search.tsx

@@ -2,10 +2,10 @@
 // See LICENSE.txt for license information.
 
 import React, {forwardRef, useCallback, useEffect, useMemo} from 'react';
-import {DeviceEventEmitter, Keyboard, NativeSyntheticEvent, Platform, TextInputFocusEventData, ViewStyle} from 'react-native';
-import Animated, {AnimatedStyleProp} from 'react-native-reanimated';
+import {DeviceEventEmitter, Keyboard, type NativeSyntheticEvent, Platform, type TextInputFocusEventData, type ViewStyle} from 'react-native';
+import Animated, {type AnimatedStyleProp} from 'react-native-reanimated';
 
-import Search, {SearchProps, SearchRef} from '@components/search';
+import Search, {type SearchProps, type SearchRef} from '@components/search';
 import {Events} from '@constants';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';

app/components/no_results_with_term/index.tsx

@@ -7,7 +7,7 @@ import {View} from 'react-native';
 import FormattedText from '@components/formatted_text';
 import {useTheme} from '@context/theme';
 import {t} from '@i18n';
-import {TabTypes, TabType} from '@utils/search';
+import {TabTypes, type TabType} from '@utils/search';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 

app/components/option_box/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useEffect, useState} from 'react';
-import {Pressable, PressableStateCallbackType, StyleProp, Text, ViewStyle} from 'react-native';
+import {Pressable, type PressableStateCallbackType, type StyleProp, Text, type ViewStyle} from 'react-native';
 
 import CompassIcon from '@components/compass_icon';
 import {useTheme} from '@context/theme';

app/components/option_item/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useMemo} from 'react';
-import {LayoutChangeEvent, Platform, StyleProp, Switch, Text, TextStyle, TouchableOpacity, View, ViewStyle} from 'react-native';
+import {type LayoutChangeEvent, Platform, type StyleProp, Switch, Text, type TextStyle, TouchableOpacity, View, type ViewStyle} from 'react-native';
 
 import CompassIcon from '@components/compass_icon';
 import TouchableWithFeedback from '@components/touchable_with_feedback';
@@ -11,7 +11,7 @@ import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 
 import OptionIcon from './option_icon';
-import RadioItem, {RadioItemProps} from './radio_item';
+import RadioItem, {type RadioItemProps} from './radio_item';
 
 const TouchableOptionTypes = {
     ARROW: 'arrow',

app/components/post_draft/archived/index.tsx

@@ -3,7 +3,7 @@
 
 import React, {useCallback} from 'react';
 import Button from 'react-native-button';
-import {Edge, SafeAreaView} from 'react-native-safe-area-context';
+import {type Edge, SafeAreaView} from 'react-native-safe-area-context';
 
 import {switchToPenultimateChannel} from '@actions/remote/channel';
 import FormattedMarkdownText from '@components/formatted_markdown_text';

app/components/post_draft/draft_input/index.tsx

@@ -2,8 +2,8 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useRef} from 'react';
-import {LayoutChangeEvent, Platform, ScrollView, View} from 'react-native';
-import {Edge, SafeAreaView} from 'react-native-safe-area-context';
+import {type LayoutChangeEvent, Platform, ScrollView, View} from 'react-native';
+import {type Edge, SafeAreaView} from 'react-native-safe-area-context';
 
 import PostPriorityLabel from '@components/post_priority/post_priority_label';
 import {useTheme} from '@context/theme';

app/components/post_draft/post_draft.tsx

@@ -1,9 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {RefObject, useEffect, useState} from 'react';
+import React, {type RefObject, useEffect, useState} from 'react';
 import {Platform} from 'react-native';
-import {KeyboardTrackingView, KeyboardTrackingViewRef} from 'react-native-keyboard-tracking-view';
+import {KeyboardTrackingView, type KeyboardTrackingViewRef} from 'react-native-keyboard-tracking-view';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import Autocomplete from '@components/autocomplete';

app/components/post_draft/post_input/post_input.tsx

@@ -2,12 +2,12 @@
 // See LICENSE.txt for license information.
 
 import {useManagedConfig} from '@mattermost/react-native-emm';
-import PasteableTextInput, {PastedFile, PasteInputRef} from '@mattermost/react-native-paste-input';
+import PasteableTextInput, {type PastedFile, type PasteInputRef} from '@mattermost/react-native-paste-input';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {IntlShape, useIntl} from 'react-intl';
+import {type IntlShape, useIntl} from 'react-intl';
 import {
-    Alert, AppState, AppStateStatus, DeviceEventEmitter, EmitterSubscription, Keyboard,
-    NativeSyntheticEvent, Platform, TextInputSelectionChangeEventData,
+    Alert, AppState, type AppStateStatus, DeviceEventEmitter, type EmitterSubscription, Keyboard,
+    type NativeSyntheticEvent, Platform, type TextInputSelectionChangeEventData,
 } from 'react-native';
 import HWKeyboardEvent from 'react-native-hw-keyboard-event';
 

app/components/post_draft/read_only/index.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import {View} from 'react-native';
-import {Edge, SafeAreaView} from 'react-native-safe-area-context';
+import {type Edge, SafeAreaView} from 'react-native-safe-area-context';
 
 import CompassIcon from '@components/compass_icon';
 import FormattedText from '@components/formatted_text';

app/components/post_list/combined_user_activity/combined_user_activity.tsx

@@ -3,7 +3,7 @@
 
 import React, {useCallback, useEffect} from 'react';
 import {useIntl} from 'react-intl';
-import {Keyboard, StyleProp, TouchableHighlight, View, ViewStyle} from 'react-native';
+import {Keyboard, type StyleProp, TouchableHighlight, View, type ViewStyle} from 'react-native';
 
 import {fetchMissingProfilesByIds, fetchMissingProfilesByUsernames} from '@actions/remote/user';
 import Markdown from '@components/markdown';

app/components/post_list/date_separator/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {StyleProp, View, ViewStyle} from 'react-native';
+import {type StyleProp, View, type ViewStyle} from 'react-native';
 
 import FormattedDate from '@components/formatted_date';
 import FormattedText from '@components/formatted_text';

app/components/post_list/more_messages/more_messages.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {ActivityIndicator, DeviceEventEmitter, View, ViewToken} from 'react-native';
+import {ActivityIndicator, DeviceEventEmitter, View, type ViewToken} from 'react-native';
 import Animated, {interpolate, useAnimatedStyle, useSharedValue, withSpring} from 'react-native-reanimated';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
@@ -143,7 +143,7 @@ const MoreMessages = ({
                     shownTop + (adjustTop ? 0 : insets.top),
                     shownTop + (adjustTop ? 0 : insets.top),
                 ],
-                Animated.Extrapolate.CLAMP,
+                'clamp',
             ), {damping: 15}),
         }],
     }), [shownTop, insets.top, adjustTop]);
@@ -245,8 +245,8 @@ const MoreMessages = ({
     }, [channelId]);
 
     return (
-        <Animated.View style={[styles.animatedContainer, styles.roundBorder, animatedStyle]}>
-            <View style={styles.container}>
+        <Animated.View style={[styles.animatedContainer, animatedStyle]}>
+            <View style={[styles.container, styles.roundBorder]}>
                 <TouchableWithFeedback
                     type={'opacity'}
                     onPress={onPress}

app/components/post_list/new_message_line/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {StyleProp, View, ViewStyle} from 'react-native';
+import {type StyleProp, View, type ViewStyle} from 'react-native';
 
 import FormattedText from '@components/formatted_text';
 import {makeStyleSheetFromTheme} from '@utils/theme';

app/components/post_list/post/avatar/avatar.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ReactNode} from 'react';
+import React, {type ReactNode} from 'react';
 import {useIntl} from 'react-intl';
 import {Keyboard, Platform, StyleSheet, TouchableOpacity, View} from 'react-native';
 import FastImage from 'react-native-fast-image';

app/components/post_list/post/body/add_members/add_members.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ReactNode} from 'react';
+import React, {type ReactNode} from 'react';
 import {useIntl} from 'react-intl';
 import {Text} from 'react-native';
 

app/components/post_list/post/body/content/embedded_bindings/button_binding/button_binding_text.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {Text, View, StyleSheet, StyleProp, TextStyle} from 'react-native';
+import {Text, View, StyleSheet, type StyleProp, type TextStyle} from 'react-native';
 
 import Emoji from '@components/emoji';
 import {reEmoji, reEmoticon, reMain} from '@constants/emoji';

app/components/post_list/post/body/content/embedded_bindings/embed_text.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useState} from 'react';
-import {LayoutChangeEvent, useWindowDimensions, ScrollView, View} from 'react-native';
+import {type LayoutChangeEvent, useWindowDimensions, ScrollView, View} from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import Markdown from '@components/markdown';

app/components/post_list/post/body/content/message_attachments/action_button/action_button_text.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {Text, View, StyleSheet, StyleProp, TextStyle} from 'react-native';
+import {Text, View, StyleSheet, type StyleProp, type TextStyle} from 'react-native';
 
 import Emoji from '@components/emoji';
 import {reEmoji, reEmoticon, reMain} from '@constants/emoji';

app/components/post_list/post/body/content/message_attachments/attachment_fields.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {StyleProp, Text, TextStyle, View} from 'react-native';
+import {type StyleProp, Text, type TextStyle, View} from 'react-native';
 
 import Markdown from '@components/markdown';
 import {makeStyleSheetFromTheme} from '@utils/theme';

app/components/post_list/post/body/content/message_attachments/attachment_pretext.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {StyleProp, StyleSheet, TextStyle, View} from 'react-native';
+import {type StyleProp, StyleSheet, type TextStyle, View} from 'react-native';
 
 import Markdown from '@components/markdown';
 

app/components/post_list/post/body/content/message_attachments/attachment_text.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useState} from 'react';
-import {LayoutChangeEvent, useWindowDimensions, ScrollView, StyleProp, StyleSheet, TextStyle, View} from 'react-native';
+import {type LayoutChangeEvent, useWindowDimensions, ScrollView, type StyleProp, StyleSheet, type TextStyle, View} from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import Markdown from '@components/markdown';

app/components/post_list/post/body/content/opengraph/opengraph_image/index.tsx

@@ -3,7 +3,7 @@
 
 import React, {useMemo, useRef} from 'react';
 import {TouchableWithoutFeedback, useWindowDimensions} from 'react-native';
-import FastImage, {Source} from 'react-native-fast-image';
+import FastImage, {type Source} from 'react-native-fast-image';
 import Animated from 'react-native-reanimated';
 
 import {Device as DeviceConstant, View as ViewConstants} from '@constants';
@@ -13,7 +13,7 @@ import {lookupMimeType} from '@utils/file';
 import {openGalleryAtIndex} from '@utils/gallery';
 import {generateId} from '@utils/general';
 import {calculateDimensions} from '@utils/images';
-import {BestImage, getNearestPoint} from '@utils/opengraph';
+import {type BestImage, getNearestPoint} from '@utils/opengraph';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {extractFilenameFromUrl, isValidUrl} from '@utils/url';
 

app/components/post_list/post/body/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useState} from 'react';
-import {LayoutChangeEvent, StyleProp, View, ViewStyle} from 'react-native';
+import {type LayoutChangeEvent, type StyleProp, View, type ViewStyle} from 'react-native';
 
 import Files from '@components/files';
 import FormattedText from '@components/formatted_text';

app/components/post_list/post/body/message/message.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useMemo, useState} from 'react';
-import {LayoutChangeEvent, ScrollView, useWindowDimensions, View} from 'react-native';
+import {type LayoutChangeEvent, ScrollView, useWindowDimensions, View} from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import Markdown from '@components/markdown';

app/components/post_list/post/body/reactions/reaction.tsx

@@ -3,8 +3,8 @@
 
 import React, {useCallback, useMemo} from 'react';
 import {TouchableOpacity, View} from 'react-native';
-import AnimatedNumbers from 'react-native-animated-numbers';
 
+import AnimatedNumbers from '@components/animated_number';
 import Emoji from '@components/emoji';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
@@ -87,7 +87,6 @@ const Reaction = ({count, emojiName, highlight, onPress, onLongPress, theme}: Re
             </View>
             <View style={styles.countContainer}>
                 <AnimatedNumbers
-                    includeComma={false}
                     fontStyle={fontStyle}
                     animateToNumber={count}
                     animationDuration={450}

app/components/post_list/post/footer/footer.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useMemo} from 'react';
-import {TouchableOpacity, View, ViewStyle} from 'react-native';
+import {TouchableOpacity, View, type ViewStyle} from 'react-native';
 
 import {updateThreadFollowing} from '@actions/remote/thread';
 import CompassIcon from '@components/compass_icon';

app/components/post_list/post/post.tsx

@@ -1,9 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ReactNode, useEffect, useMemo, useRef, useState} from 'react';
+import React, {type ReactNode, useEffect, useMemo, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {Keyboard, Platform, StyleProp, View, ViewStyle, TouchableHighlight} from 'react-native';
+import {Keyboard, Platform, type StyleProp, View, type ViewStyle, TouchableHighlight} from 'react-native';
 
 import {removePost} from '@actions/local/post';
 import {showPermalink} from '@actions/remote/permalink';

app/components/post_list/post/system_message/system_message.tsx

@@ -2,8 +2,8 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {IntlShape, useIntl} from 'react-intl';
-import {StyleProp, Text, TextStyle, View, ViewStyle} from 'react-native';
+import {type IntlShape, useIntl} from 'react-intl';
+import {type StyleProp, Text, type TextStyle, View, type ViewStyle} from 'react-native';
 
 import Markdown from '@components/markdown';
 import {Post} from '@constants';

app/components/post_list/post_list.tsx

@@ -2,8 +2,8 @@
 // See LICENSE.txt for license information.
 
 import {FlatList} from '@stream-io/flat-list-mvcp';
-import React, {ReactElement, useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {DeviceEventEmitter, ListRenderItemInfo, NativeScrollEvent, NativeSyntheticEvent, Platform, StyleProp, StyleSheet, ViewStyle} from 'react-native';
+import React, {type ReactElement, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {DeviceEventEmitter, type ListRenderItemInfo, type NativeScrollEvent, type NativeSyntheticEvent, Platform, type StyleProp, StyleSheet, type ViewStyle} from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import {fetchPosts, fetchPostThread} from '@actions/remote/post';

app/components/post_list/refresh_control.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {Platform, RefreshControl, StyleProp, ViewStyle} from 'react-native';
+import {Platform, RefreshControl, type StyleProp, type ViewStyle} from 'react-native';
 
 type Props = {
     children: React.ReactElement;

app/components/post_list/thread_overview/thread_overview.tsx

@@ -3,7 +3,7 @@
 
 import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
-import {Keyboard, Platform, StyleProp, View, ViewStyle} from 'react-native';
+import {Keyboard, Platform, type StyleProp, View, type ViewStyle} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 
 import {deleteSavedPost, savePostPreference} from '@actions/remote/preference';

app/components/post_priority/post_priority_label.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import {useIntl} from 'react-intl';
-import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native';
+import {type StyleProp, StyleSheet, Text, View, type ViewStyle} from 'react-native';
 
 import CompassIcon from '@components/compass_icon';
 import {PostPriorityColors, PostPriorityType} from '@constants/post';

app/components/post_priority/post_priority_picker/post_priority_picker_item.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import OptionItem, {OptionItemProps} from '@components/option_item';
+import OptionItem, {type OptionItemProps} from '@components/option_item';
 import {useTheme} from '@context/theme';
 import {makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';

app/components/profile_picture/image.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useMemo} from 'react';
-import FastImage, {Source} from 'react-native-fast-image';
+import FastImage, {type Source} from 'react-native-fast-image';
 import Animated from 'react-native-reanimated';
 
 import CompassIcon from '@components/compass_icon';

app/components/profile_picture/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useEffect, useMemo} from 'react';
-import {StyleProp, View, ViewStyle} from 'react-native';
+import {type StyleProp, View, type ViewStyle} from 'react-native';
 
 import {fetchStatusInBatch} from '@actions/remote/user';
 import {useServerUrl} from '@context/server';

app/components/profile_picture/status.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useMemo} from 'react';
-import {Platform, StyleProp, View, ViewStyle} from 'react-native';
+import {Platform, type StyleProp, View, type ViewStyle} from 'react-native';
 
 import UserStatus from '@components/user_status';
 import {makeStyleSheetFromTheme} from '@utils/theme';

app/components/progress_bar/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useEffect, useState} from 'react';
-import {LayoutChangeEvent, StyleSheet, StyleProp, View, ViewStyle} from 'react-native';
+import {type LayoutChangeEvent, StyleSheet, type StyleProp, View, type ViewStyle} from 'react-native';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 
 type ProgressBarProps = {

app/components/progressive_image/index.tsx

@@ -1,9 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ReactNode, useEffect, useState} from 'react';
-import {ImageBackground, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
-import FastImage, {ImageStyle, ResizeMode} from 'react-native-fast-image';
+import React, {type ReactNode, useEffect, useState} from 'react';
+import {ImageBackground, type StyleProp, StyleSheet, View, type ViewStyle} from 'react-native';
+import FastImage, {type ImageStyle, type ResizeMode} from 'react-native-fast-image';
 import Animated, {interpolate, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
 
 import {useTheme} from '@context/theme';

app/components/progressive_image/thumbnail.tsx

@@ -2,8 +2,8 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import FastImage, {ImageStyle, Source} from 'react-native-fast-image';
-import Animated, {SharedValue} from 'react-native-reanimated';
+import FastImage, {type ImageStyle, type Source} from 'react-native-fast-image';
+import Animated, {type SharedValue} from 'react-native-reanimated';
 
 import type {ColorValue, StyleProp} from 'react-native';
 

app/components/remove_markdown/index.tsx

@@ -3,8 +3,8 @@
 
 import {Parser} from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
-import React, {ReactElement, useCallback, useMemo, useRef} from 'react';
-import {StyleProp, Text, TextStyle} from 'react-native';
+import React, {type ReactElement, useCallback, useMemo, useRef} from 'react';
+import {type StyleProp, Text, type TextStyle} from 'react-native';
 
 import Emoji from '@components/emoji';
 import {computeTextStyle} from '@utils/markdown';

app/components/search/index.tsx

@@ -6,7 +6,7 @@
 
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {ActivityIndicatorProps, Keyboard, Platform, StyleProp, TextInput, TextInputProps, TextStyle, TouchableOpacityProps, ViewStyle} from 'react-native';
+import {type ActivityIndicatorProps, Keyboard, Platform, type StyleProp, TextInput, type TextInputProps, type TextStyle, type TouchableOpacityProps, type ViewStyle} from 'react-native';
 import {SearchBar} from 'react-native-elements';
 
 import CompassIcon from '@components/compass_icon';

app/components/selected_users/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import {LayoutChangeEvent, Platform, ScrollView, useWindowDimensions, View} from 'react-native';
+import {type LayoutChangeEvent, Platform, ScrollView, useWindowDimensions, View} from 'react-native';
 import Animated, {useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 

app/components/server_icon/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useMemo} from 'react';
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
+import {type StyleProp, StyleSheet, View, type ViewStyle} from 'react-native';
 
 import Badge from '@components/badge';
 import CompassIcon from '@components/compass_icon';