Refactor makeStylesFromTheme to use the correct types (#6801)

* Refactor makeStylesFromTheme to use the correct types * Address feedback
2022-12-12 10:53:54 +01:00
parent e0f9ea3f95
commit 28526034d4
63 changed files with 111 additions and 151 deletions
--- a/app/components/announcement_banner/announcement_banner.tsx
+++ b/app/components/announcement_banner/announcement_banner.tsx
@@ -17,6 +17,7 @@ import {ANNOUNCEMENT_BAR_HEIGHT} from '@constants/view';
 import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import {bottomSheet} from '@screens/navigation';
+import {getMarkdownTextStyles} from '@utils/markdown';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';

@@ -84,6 +85,7 @@ const AnnouncementBanner = ({
    const theme = useTheme();
    const [visible, setVisible] = useState(false);
    const style = getStyle(theme);
+    const markdownTextStyles = getMarkdownTextStyles(theme);

    const renderContent = useCallback(() => (
        <ExpandedAnnouncementBanner
@@ -161,7 +163,8 @@ const AnnouncementBanner = ({
                                {'  '}
                                <RemoveMarkdown
                                    value={bannerText}
-                                    textStyle={style.bannerText}
+                                    textStyle={markdownTextStyles}
+                                    baseStyle={style.bannerText}
                                />
                            </Text>
                        </TouchableOpacity>
--- a/app/components/autocomplete/autocomplete.tsx
+++ b/app/components/autocomplete/autocomplete.tsx
@@ -115,7 +115,7 @@ const Autocomplete = ({
    }, [growDown, position]);

    const containerStyles = useMemo(() => {
-        const s = [style.base, containerAnimatedStyle];
+        const s: StyleProp<ViewStyle> = [style.base, containerAnimatedStyle];
        if (hasElements) {
            s.push(style.borders);
        }
--- a/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx
+++ b/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx
@@ -33,9 +33,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
            width: 16,
            height: 16,
        },
-        iconColor: {
-            tintColor: theme.centerChannelColor,
-        },
        container: {
            flexDirection: 'row',
            alignItems: 'center',
@@ -110,7 +107,8 @@ const SlashSuggestionItem = ({

    let image = (
        <FastImage
-            style={[style.iconColor, style.slashIcon]}
+            tintColor={theme.centerChannelColor}
+            style={style.slashIcon}
            source={slashIcon}
        />
    );
--- a/app/components/channel_list_row/index.tsx
+++ b/app/components/channel_list_row/index.tsx
@@ -70,7 +70,7 @@ export default function ChannelListRow({

        const color = selected ? theme.buttonBg : theme.centerChannelColor;
        return (
-            <View style={style.selector}>
+            <View>
                <CompassIcon
                    name={selected ? 'check-circle' : 'circle-outline'}
                    size={28}
--- a/app/components/connection_banner/connection_banner.tsx
+++ b/app/components/connection_banner/connection_banner.tsx
@@ -27,9 +27,9 @@ const getStyle = makeStyleSheetFromTheme((theme: Theme) => {
    const bannerContainer = {
        flex: 1,
        paddingHorizontal: 10,
-        overflow: 'hidden',
-        flexDirection: 'row',
-        alignItems: 'center',
+        overflow: 'hidden' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
        marginHorizontal: 8,
        borderRadius: 7,
    };
--- a/app/components/floating_text_input_label/index.tsx
+++ b/app/components/floating_text_input_label/index.tsx
@@ -184,7 +184,7 @@ const FloatingTextInput = forwardRef<FloatingTextInputRef, FloatingTextInputProp
    const onPressAction = !isKeyboardInput && editable && onPress ? onPress : undefined;

    const combinedContainerStyle = useMemo(() => {
-        const res = [styles.container];
+        const res: StyleProp<ViewStyle> = [styles.container];
        if (multiline) {
            res.push({height: 100 + (2 * BORDER_DEFAULT_WIDTH)});
        }
--- a/app/components/formatted_markdown_text/index.tsx
+++ b/app/components/formatted_markdown_text/index.tsx
@@ -5,7 +5,7 @@ import {Parser} from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
 import React, {ReactElement, useRef} from 'react';
 import {useIntl} from 'react-intl';
-import {GestureResponderEvent, StyleProp, Text, TextStyle} from 'react-native';
+import {GestureResponderEvent, StyleProp, Text, TextStyle, ViewStyle} from 'react-native';

 import AtMention from '@components/markdown/at_mention';
 import MarkdownLink from '@components/markdown/markdown_link';
@@ -24,9 +24,6 @@ type Props = {
    location: string;
    onPostPress?: (e: GestureResponderEvent) => void;
    style?: StyleProp<TextStyle>;
-    textStyles: {
-        [key: string]: TextStyle;
-    };
    values?: Record<string, PrimitiveType>;
 };

@@ -50,7 +47,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
    };
 });

-const FormattedMarkdownText = ({baseTextStyle, channelId, defaultMessage, id, location, onPostPress, style, textStyles, values}: Props) => {
+const FormattedMarkdownText = ({baseTextStyle, channelId, defaultMessage, id, location, onPostPress, style, values}: Props) => {
    const intl = useIntl();
    const theme = useTheme();
    const styles = getStyleSheet(theme);
@@ -81,14 +78,14 @@ const FormattedMarkdownText = ({baseTextStyle, channelId, defaultMessage, id, lo
    };

    const computeTextStyle = (base: StyleProp<TextStyle>, context: string[]) => {
-        return concatStyles(base, context.map((type) => txtStyles[type]));
+        return concatStyles(base, context.map((type) => (txtStyles as {[s: string]: TextStyle})[type]));
    };

    const renderAtMention = ({context, mentionName}: {context: string[]; mentionName: string}) => {
        return (
            <AtMention
                channelId={channelId}
-                mentionStyle={textStyles.mention}
+                mentionStyle={txtStyles.mention}
                mentionName={mentionName}
                location={location}
                onPostPress={onPostPress}
@@ -117,7 +114,7 @@ const FormattedMarkdownText = ({baseTextStyle, channelId, defaultMessage, id, lo
    };

    const renderParagraph = ({children, first}: {children: ReactElement; first: boolean}) => {
-        const blockStyle = [styles.block];
+        const blockStyle: StyleProp<ViewStyle> = [styles.block];
        if (!first) {
            const blockS = getMarkdownBlockStyles(theme);
            blockStyle.push(blockS.adjacentParagraph);
--- a/app/components/formatted_text/index.tsx
+++ b/app/components/formatted_text/index.tsx
@@ -3,14 +3,14 @@

 import {createElement, isValidElement} from 'react';
 import {useIntl} from 'react-intl';
-import {StyleProp, Text, TextProps, TextStyle, ViewStyle} from 'react-native';
+import {StyleProp, Text, TextProps, TextStyle} from 'react-native';

 type FormattedTextProps = TextProps & {
    id: string;
    defaultMessage?: string;
    values?: Record<string, any>;
    testID?: string;
-    style?: StyleProp<ViewStyle> | StyleProp<TextStyle>;
+    style?: StyleProp<TextStyle>;
 }

 const FormattedText = (props: FormattedTextProps) => {
--- a/app/components/friendly_date/index.tsx
+++ b/app/components/friendly_date/index.tsx
@@ -3,7 +3,7 @@

 import React from 'react';
 import {IntlShape, useIntl} from 'react-intl';
-import {StyleProp, Text, ViewStyle} from 'react-native';
+import {StyleProp, Text, TextStyle} from 'react-native';

 import {DateTime} from '@constants';
 import {isYesterday} from '@utils/datetime';
@@ -11,7 +11,7 @@ import {isYesterday} from '@utils/datetime';
 const {SECONDS} = DateTime;

 type Props = {
-    style?: StyleProp<ViewStyle>;
+    style?: StyleProp<TextStyle>;
    sourceDate?: number | Date;
    value: number | Date;
 };
--- a/app/components/markdown/markdown.tsx
+++ b/app/components/markdown/markdown.tsx
@@ -4,7 +4,7 @@
 import {Parser, Node} from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
 import React, {ReactElement, useMemo, useRef} from 'react';
-import {Dimensions, GestureResponderEvent, Platform, StyleProp, Text, TextStyle, View} from 'react-native';
+import {Dimensions, GestureResponderEvent, Platform, StyleProp, Text, TextStyle, View, ViewStyle} from 'react-native';

 import CompassIcon from '@components/compass_icon';
 import Emoji from '@components/emoji';
@@ -431,7 +431,7 @@ const Markdown = ({
            return null;
        }

-        const blockStyle = [style.block];
+        const blockStyle: StyleProp<ViewStyle> = [style.block];
        if (!first) {
            blockStyle.push(blockStyles?.adjacentParagraph);
        }
--- a/app/components/markdown/markdown_table/index.tsx
+++ b/app/components/markdown/markdown_table/index.tsx
@@ -3,7 +3,7 @@

 import React, {PureComponent, ReactNode} from 'react';
 import {injectIntl, IntlShape} from 'react-intl';
-import {Dimensions, EventSubscription, LayoutChangeEvent, Platform, ScaledSize, ScrollView, TouchableOpacity, View} from 'react-native';
+import {Dimensions, EventSubscription, LayoutChangeEvent, Platform, ScaledSize, ScrollView, StyleProp, TouchableOpacity, View, ViewStyle} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';

 import CompassIcon from '@components/compass_icon';
@@ -203,7 +203,7 @@ class MarkdownTable extends PureComponent<MarkdownTableProps, MarkdownTableState
    getTableStyle = (isFullView: boolean) => {
        const {theme} = this.props;
        const style = getStyleSheet(theme);
-        const tableStyle = [style.table];
+        const tableStyle: StyleProp<ViewStyle> = [style.table];

        const renderAsFlex = this.shouldRenderAsFlex(isFullView);
        if (renderAsFlex) {
--- a/app/components/markdown/markdown_table_cell/index.tsx
+++ b/app/components/markdown/markdown_table_cell/index.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.

 import React, {ReactNode} from 'react';
-import {View} from 'react-native';
+import {StyleProp, View, ViewStyle} from 'react-native';

 import {useTheme} from '@context/theme';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
@@ -40,7 +40,7 @@ const MarkdownTableCell = ({isLastCell, align, children}: MarkdownTableCellProps
    const theme = useTheme();
    const style = getStyleSheet(theme);

-    const cellStyle = [style.cell];
+    const cellStyle: StyleProp<ViewStyle> = [style.cell];
    if (!isLastCell) {
        cellStyle.push(style.cellRightBorder);
    }
--- a/app/components/markdown/markdown_table_row/index.tsx
+++ b/app/components/markdown/markdown_table_row/index.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.

 import React, {ReactElement, ReactNode} from 'react';
-import {View} from 'react-native';
+import {StyleProp, View, ViewStyle} from 'react-native';

 import {useTheme} from '@context/theme';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
@@ -33,7 +33,7 @@ const MarkdownTableRow = ({isFirstRow, isLastRow, children}: MarkdownTableRowPro
    const theme = useTheme();
    const style = getStyleSheet(theme);

-    const rowStyle = [style.row];
+    const rowStyle: StyleProp<ViewStyle> = [style.row];
    if (!isLastRow) {
        rowStyle.push(style.rowBottomBorder);
    }
--- a/app/components/post_draft/archived/index.tsx
+++ b/app/components/post_draft/archived/index.tsx
@@ -14,6 +14,7 @@ import {useIsTablet} from '@hooks/device';
 import {t} from '@i18n';
 import {popToRoot} from '@screens/navigation';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';

 type Props = {
    testID?: string;
@@ -28,6 +29,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => ({
        backgroundColor: theme.centerChannelBg,
        borderTopColor: changeOpacity(theme.centerChannelColor, 0.20),
    },
+    baseTextStyle: {
+        ...typography('Body', 200, 'Regular'),
+        color: theme.centerChannelColor,
+    },
    archivedText: {
        textAlign: 'center',
        color: theme.centerChannelColor,
@@ -89,7 +94,6 @@ export default function Archived({
                {...message}
                style={style.archivedText}
                baseTextStyle={style.baseTextStyle}
-                textStyles={style.textStyles}
                location=''
            />
            <Button
--- a/app/components/post_draft/quick_actions/quick_actions.tsx
+++ b/app/components/post_draft/quick_actions/quick_actions.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.

 import React from 'react';
-import {Platform, StyleSheet, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';

 import CameraAction from './camera_quick_action';
 import FileAction from './file_quick_action';
@@ -28,16 +28,6 @@ type Props = {
 }

 const style = StyleSheet.create({
-    container: {
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingBottom: Platform.select({
-            ios: 1,
-            android: 2,
-        }),
-    },
    quickActionsContainer: {
        display: 'flex',
        flexDirection: 'row',
--- a/app/components/post_draft/uploads/upload_item/upload_remove.tsx
+++ b/app/components/post_draft/uploads/upload_item/upload_remove.tsx
@@ -67,7 +67,6 @@ export default function UploadRemove({
                    name='close-circle'
                    color={changeOpacity(theme.centerChannelColor, 0.64)}
                    size={24}
-                    style={style.removeIcon}
                />
            </View>
        </TouchableWithFeedback>
--- a/app/components/post_list/combined_user_activity/last_users.tsx
+++ b/app/components/post_list/combined_user_activity/last_users.tsx
@@ -82,7 +82,6 @@ const LastUsers = ({actor, channelId, location, postType, theme, usernames}: Las
                values={{firstUser}}
                baseTextStyle={style.baseText}
                style={style.baseText}
-                textStyles={textStyles}
            />
            <Text>{' '}</Text>
            <Text
@@ -103,7 +102,6 @@ const LastUsers = ({actor, channelId, location, postType, theme, usernames}: Las
                values={{actor}}
                baseTextStyle={style.baseText}
                style={style.baseText}
-                textStyles={textStyles}
            />
        </Text>
    );
--- a/app/components/post_list/post/body/add_members/add_members.tsx
+++ b/app/components/post_list/post/body/add_members/add_members.tsx
@@ -97,7 +97,6 @@ const AddMembers = ({channelType, currentUser, location, post, theme}: AddMember
                        key={key}
                        id={'post_body.check_for_out_of_channel_mentions.link.and'}
                        defaultMessage={' and '}
-                        style={textStyles}
                    />
                );
            }
--- a/app/components/post_list/post/body/content/opengraph/opengraph.tsx
+++ b/app/components/post_list/post/body/content/opengraph/opengraph.tsx
@@ -111,7 +111,7 @@ const Opengraph = ({isReplyPost, layoutWidth, location, metadata, postId, showLi
    let siteTitle;
    if (title) {
        siteTitle = (
-            <View style={style.wrapper}>
+            <View>
                <TouchableOpacity
                    style={style.flex}
                    onPress={goToLink}
--- a/app/components/post_list/post/body/index.tsx
+++ b/app/components/post_list/post/body/index.tsx
@@ -95,7 +95,7 @@ const Body = ({
            return undefined;
        }

-        const barStyle = [style.replyBar];
+        const barStyle: StyleProp<ViewStyle> = [style.replyBar];

        if (isFirstReply) {
            barStyle.push(style.replyBarFirst);
--- a/app/components/post_list/post/footer/footer.tsx
+++ b/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} from 'react-native';
+import {TouchableOpacity, View, ViewStyle} from 'react-native';

 import {updateThreadFollowing} from '@actions/remote/thread';
 import CompassIcon from '@components/compass_icon';
@@ -26,7 +26,7 @@ type Props = {
 };

 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
-    const followingButtonContainerBase = {
+    const followingButtonContainerBase: ViewStyle = {
        justifyContent: 'center',
        height: 32,
        paddingHorizontal: 12,
--- a/app/components/post_list/post/post.tsx
+++ b/app/components/post_list/post/post.tsx
@@ -209,7 +209,7 @@ const Post = ({
    const highlightSaved = isSaved && !skipSavedHeader;
    const hightlightPinned = post.isPinned && !skipPinnedHeader;
    const itemTestID = `${testID}.${post.id}`;
-    const rightColumnStyle = [styles.rightColumn, (post.rootId && isLastReply && styles.rightColumnPadding)];
+    const rightColumnStyle: StyleProp<ViewStyle> = [styles.rightColumn, (Boolean(post.rootId) && isLastReply && styles.rightColumnPadding)];
    const pendingPostStyle: StyleProp<ViewStyle> | undefined = isPendingOrFailed ? styles.pendingPost : undefined;

    let highlightedStyle: StyleProp<ViewStyle>;
@@ -230,7 +230,7 @@ const Post = ({

    const sameSequence = hasReplies ? (hasReplies && post.rootId) : !post.rootId;
    if (!showPostPriority && hasSameRoot && isConsecutivePost && sameSequence) {
-        consecutiveStyle = styles.consective;
+        consecutiveStyle = styles.consecutive;
        postAvatar = <View style={styles.consecutivePostContainer}/>;
    } else {
        postAvatar = (
--- a/app/components/post_list/post/system_message/system_message.tsx
+++ b/app/components/post_list/post/system_message/system_message.tsx
@@ -27,7 +27,7 @@ type RenderersProps = SystemMessageProps & {
    intl: IntlShape;
    styles: {
        containerStyle: StyleProp<ViewStyle>;
-        messageStyle: StyleProp<ViewStyle>;
+        messageStyle: StyleProp<TextStyle>;
        textStyles: {
            [key: string]: TextStyle;
        };
--- a/app/components/post_list/thread_overview/thread_overview.tsx
+++ b/app/components/post_list/thread_overview/thread_overview.tsx
@@ -86,7 +86,7 @@ const ThreadOverview = ({isSaved, repliesCount, rootPost, style, testID}: Props)
    }), [rootPost]);

    const containerStyle = useMemo(() => {
-        const container = [styles.container];
+        const container: StyleProp<ViewStyle> = [styles.container];
        if (repliesCount === 0) {
            container.push({
                borderBottomWidth: 0,
--- a/app/components/profile_picture/index.tsx
+++ b/app/components/profile_picture/index.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.

 import React, {useEffect, useMemo} from 'react';
-import {Platform, StyleProp, View, ViewProps} from 'react-native';
+import {Platform, StyleProp, View, ViewStyle} from 'react-native';

 import {fetchStatusInBatch} from '@actions/remote/user';
 import {useServerUrl} from '@context/server';
@@ -27,7 +27,7 @@ type ProfilePictureProps = {
    showStatus?: boolean;
    size: number;
    statusSize?: number;
-    statusStyle?: StyleProp<ViewProps>;
+    statusStyle?: StyleProp<ViewStyle>;
    testID?: string;
    source?: Source | string;
    url?: string;
--- a/app/components/profile_picture/status.tsx
+++ b/app/components/profile_picture/status.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.

 import React, {useMemo} from 'react';
-import {StyleProp, View, ViewProps} from 'react-native';
+import {StyleProp, View, ViewStyle} from 'react-native';

 import UserStatus from '@components/user_status';
 import {makeStyleSheetFromTheme} from '@utils/theme';
@@ -12,7 +12,7 @@ import type UserModel from '@typings/database/models/servers/user';
 type Props = {
    author?: UserModel | UserProfile;
    statusSize: number;
-    statusStyle?: StyleProp<ViewProps>;
+    statusStyle?: StyleProp<ViewStyle>;
    theme: Theme;
 }

--- a/app/components/settings/radio_setting/radio_entry.tsx
+++ b/app/components/settings/radio_setting/radio_entry.tsx
@@ -27,7 +27,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
            height: 1,
            marginLeft: 15,
        },
-        checkMark: {
+        checkmark: {
            fontSize: 12,
            color: theme.linkColor,
        },
--- a/app/components/slide_up_panel_item/index.tsx
+++ b/app/components/slide_up_panel_item/index.tsx
@@ -16,7 +16,8 @@ type SlideUpPanelProps = {
    destructive?: boolean;
    icon?: string | Source;
    rightIcon?: boolean;
-    imageStyles?: StyleProp<TextStyle>;
+    imageStyles?: StyleProp<ImageStyle>;
+    iconStyles?: StyleProp<TextStyle>;
    onPress: () => void;
    textStyles?: TextStyle;
    testID?: string;
@@ -64,7 +65,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
    };
 });

-const SlideUpPanelItem = ({destructive, icon, imageStyles, onPress, testID, text, textStyles, rightIcon = false}: SlideUpPanelProps) => {
+const SlideUpPanelItem = ({destructive, icon, imageStyles, onPress, testID, text, textStyles, iconStyles, rightIcon = false}: SlideUpPanelProps) => {
    const theme = useTheme();
    const handleOnPress = useCallback(preventDoubleTap(onPress, 500), []);
    const style = getStyleSheet(theme);
@@ -72,12 +73,9 @@ const SlideUpPanelItem = ({destructive, icon, imageStyles, onPress, testID, text
    let image;
    let iconStyle: StyleProp<ViewStyle> = [style.iconContainer];
    if (icon) {
-        const imageStyle: StyleProp<ImageStyle> = [style.icon, imageStyles];
-        if (destructive) {
-            imageStyle.push(style.destructive);
-        }
        if (typeof icon === 'object') {
            if (icon.uri && isValidUrl(icon.uri)) {
+                const imageStyle: StyleProp<ImageStyle> = [imageStyles];
                imageStyle.push({width: 24, height: 24});
                image = (
                    <FastImage
@@ -89,11 +87,15 @@ const SlideUpPanelItem = ({destructive, icon, imageStyles, onPress, testID, text
                iconStyle = [style.noIconContainer];
            }
        } else {
+            const compassIconStyle = [style.icon, iconStyles];
+            if (destructive) {
+                compassIconStyle.push(style.destructive);
+            }
            image = (
                <CompassIcon
                    name={icon}
                    size={24}
-                    style={imageStyle}
+                    style={compassIconStyle}
                />
            );
        }
--- a/app/components/team_sidebar/add_team/team_list_item/team_list_item.tsx
+++ b/app/components/team_sidebar/add_team/team_list_item/team_list_item.tsx
@@ -80,7 +80,7 @@ export default function TeamListItem({team, textColor, iconTextColor, iconBackgr
                />
            </View>
            <Text
-                style={[styles.text, textColor && {color: textColor}]}
+                style={[styles.text, Boolean(textColor) && {color: textColor}]}
                numberOfLines={1}
                testID={`${teamListItemTestId}.team_display_name`}
            >
--- a/app/components/team_sidebar/team_list/team_item/team_icon.tsx
+++ b/app/components/team_sidebar/team_list/team_item/team_icon.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.

 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {View, Text} from 'react-native';
+import {View, Text, StyleProp, TextStyle} from 'react-native';
 import FastImage from 'react-native-fast-image';

 import {useServerUrl} from '@context/server';
@@ -106,10 +106,10 @@ export default function TeamIcon({

    let teamIconContent;
    if (nameOnly) {
-        const textStyle = [
+        const textStyle: StyleProp<TextStyle> = [
            styles.text,
            textTypography,
-            textColor && {color: textColor},
+            Boolean(textColor) && {color: textColor},
        ];

        teamIconContent = (
--- a/app/products/calls/screens/call_screen/call_screen.tsx
+++ b/app/products/calls/screens/call_screen/call_screen.tsx
@@ -376,7 +376,7 @@ const CallScreen = ({
    const showOtherActions = useCallback(async () => {
        const renderContent = () => {
            return (
-                <View style={style.bottomSheet}>
+                <View>
                    {
                        isHost && EnableRecordings && !(waitingForRecording || recording) &&
                        <SlideUpPanelItem
@@ -389,7 +389,6 @@ const CallScreen = ({
                        isHost && EnableRecordings && (waitingForRecording || recording) &&
                        <SlideUpPanelItem
                            icon={'record-square-outline'}
-                            imageStyles={style.denimDND}
                            onPress={stopRecording}
                            text={stopRecordingOptionTitle}
                            textStyles={style.denimDND}
@@ -466,7 +465,7 @@ const CallScreen = ({
            <ScrollView
                alwaysBounceVertical={false}
                horizontal={currentCall.screenOn !== ''}
-                contentContainerStyle={[isLandscape && currentCall.screenOn && style.usersScrollLandscapeScreenOn]}
+                contentContainerStyle={[isLandscape && Boolean(currentCall.screenOn) && style.usersScrollLandscapeScreenOn]}
            >
                <Pressable
                    testID='users-list'
@@ -476,7 +475,7 @@ const CallScreen = ({
                    {participants.map((user) => {
                        return (
                            <View
-                                style={[style.user, currentCall.screenOn && style.userScreenOn]}
+                                style={[style.user, Boolean(currentCall.screenOn) && style.userScreenOn]}
                                key={user.id}
                            >
                                <CallAvatar
--- a/app/screens/apps_form/apps_form_component.tsx
+++ b/app/screens/apps_form/apps_form_component.tsx
@@ -48,13 +48,11 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
            textAlign: 'left',
            color: (theme.errorTextColor || '#DA4A4A'),
        },
-        button: buttonBackgroundStyle(theme, 'lg', 'primary', 'default'),
        buttonContainer: {
            paddingTop: 20,
            paddingLeft: 50,
            paddingRight: 50,
        },
-        buttonText: buttonTextStyle(theme, 'lg', 'primary', 'default'),
    };
 });

@@ -377,6 +375,9 @@ function AppsFormComponent({
    useNavButtonPressed(CLOSE_BUTTON_ID, componentId, close, [close]);
    useNavButtonPressed(SUBMIT_BUTTON_ID, componentId, handleSubmit, [handleSubmit]);

+    const submitButtonStyle = useMemo(() => buttonBackgroundStyle(theme, 'lg', 'primary', 'default'), [theme]);
+    const submitButtonTextStyle = useMemo(() => buttonTextStyle(theme, 'lg', 'primary', 'default'), [theme]);
+
    return (
        <SafeAreaView
            testID='interactive_dialog.screen'
@@ -427,9 +428,9 @@ function AppsFormComponent({
                        >
                            <Button
                                onPress={() => handleSubmit(o.value)}
-                                containerStyle={style.button}
+                                containerStyle={submitButtonStyle}
                            >
-                                <Text style={style.buttonText}>{o.label}</Text>
+                                <Text style={submitButtonTextStyle}>{o.label}</Text>
                            </Button>
                        </View>
                    ))}
--- a/app/screens/browse_channels/dropdown_slideup.tsx
+++ b/app/screens/browse_channels/dropdown_slideup.tsx
@@ -44,7 +44,7 @@ export default function DropdownSlideup({

    const commonProps = {
        rightIcon: true,
-        imageStyles: style.checkIcon,
+        iconStyles: style.checkIcon,
    };

    const handlePublicPress = useCallback(() => {
--- a/app/screens/channel_info/channel_info.tsx
+++ b/app/screens/channel_info/channel_info.tsx
@@ -5,9 +5,9 @@ import React, {useCallback} from 'react';
 import {ScrollView, View} from 'react-native';
 import {Edge, SafeAreaView} from 'react-native-safe-area-context';

-import {useServerUrl} from '@app/context/server';
 import ChannelInfoEnableCalls from '@calls/components/channel_info_enable_calls';
 import ChannelActions from '@components/channel_actions';
+import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import useNavButtonPressed from '@hooks/navigation_button_pressed';
 import {dismissModal} from '@screens/navigation';
--- a/app/screens/edit_profile/components/field.tsx
+++ b/app/screens/edit_profile/components/field.tsx
@@ -3,7 +3,7 @@

 import React, {memo, RefObject, useCallback} from 'react';
 import {useIntl} from 'react-intl';
-import {Platform, StyleSheet, TextInputProps, View} from 'react-native';
+import {Platform, TextInputProps, View} from 'react-native';

 import FloatingTextInput, {FloatingTextInputRef} from '@components/floating_text_input_label';
 import {useTheme} from '@context/theme';
@@ -24,7 +24,7 @@ export type FieldProps = TextInputProps & {
 };

 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
-    return StyleSheet.create({
+    return {
        viewContainer: {
            marginVertical: 8,
            alignItems: 'center',
@@ -33,7 +33,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
        disabledStyle: {
            backgroundColor: changeOpacity(theme.centerChannelColor, 0.04),
        },
-    });
+    };
 });

 const Field = ({
--- a/app/screens/find_channels/filtered_list/filtered_list.tsx
+++ b/app/screens/find_channels/filtered_list/filtered_list.tsx
@@ -55,11 +55,6 @@ type Props = {

 const style = StyleSheet.create({
    flex: {flex: 1},
-    loading: {
-        height: 32,
-        width: 32,
-        justifyContent: 'center',
-    },
    noResultContainer: {
        flexGrow: 1,
        alignItems: 'center',
--- a/app/screens/find_channels/filtered_list/remote_channel_item/remote_channel_item.tsx
+++ b/app/screens/find_channels/filtered_list/remote_channel_item/remote_channel_item.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.

 import React, {useCallback, useMemo} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {Text, TouchableOpacity, View} from 'react-native';

 import ChannelIcon from '@components/channel_icon';
 import {useTheme} from '@context/theme';
@@ -51,11 +51,6 @@ export const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
    },
 }));

-export const textStyle = StyleSheet.create({
-    bright: typography('Body', 200, 'SemiBold'),
-    regular: typography('Body', 200, 'Regular'),
-});
-
 const RemoteChannelItem = ({onPress, channel, teamDisplayName, testID}: Props) => {
    const theme = useTheme();
    const isTablet = useIsTablet();
--- a/app/screens/forgot_password/index.tsx
+++ b/app/screens/forgot_password/index.tsx
@@ -215,7 +215,6 @@ const ForgotPassword = ({serverUrl, theme}: Props) => {
                            autoCorrect={false}
                            autoCapitalize={'none'}
                            blurOnSubmit={true}
-                            containerStyle={styles.inputBoxEmail}
                            disableFullscreenUI={true}
                            enablesReturnKeyAutomatically={true}
                            error={error}
--- a/app/screens/gallery/footer/footer.tsx
+++ b/app/screens/gallery/footer/footer.tsx
@@ -9,7 +9,6 @@ import {SafeAreaView, Edge, useSafeAreaInsets} from 'react-native-safe-area-cont
 import {Events} from '@constants';
 import {GALLERY_FOOTER_HEIGHT} from '@constants/gallery';
 import {changeOpacity} from '@utils/theme';
-import {typography} from '@utils/typography';
 import {displayUsername} from '@utils/user';

 import Actions from './actions';
@@ -53,15 +52,6 @@ const styles = StyleSheet.create({
        paddingHorizontal: 20,
    },
    details: {flex: 3, flexDirection: 'row'},
-    icon: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100%',
-    },
-    title: {
-        ...typography('Heading', 300),
-        color: 'white',
-    },
 });

 const Footer = ({
--- a/app/screens/gallery/pager/index.tsx
+++ b/app/screens/gallery/pager/index.tsx
@@ -39,9 +39,6 @@ const MIN_VELOCITY = 700;
 const MAX_VELOCITY = 3000;

 const styles = StyleSheet.create({
-    backdrop: {
-        flex: 1,
-    },
    pager: {
        flex: 1,
        flexDirection: 'row',
--- a/app/screens/home/account/components/options/user_presence/index.tsx
+++ b/app/screens/home/account/components/options/user_presence/index.tsx
@@ -58,7 +58,7 @@ const UserStatus = ({currentUser}: Props) => {
                <>
                    <SlideUpPanelItem
                        icon='check-circle'
-                        imageStyles={{color: theme.onlineIndicator}}
+                        iconStyles={{color: theme.onlineIndicator}}
                        onPress={() => setUserStatus(ONLINE)}
                        testID='user_status.online.option'
                        text={intl.formatMessage({
@@ -69,7 +69,7 @@ const UserStatus = ({currentUser}: Props) => {
                    />
                    <SlideUpPanelItem
                        icon='clock'
-                        imageStyles={{color: theme.awayIndicator}}
+                        iconStyles={{color: theme.awayIndicator}}
                        onPress={() => setUserStatus(AWAY)}
                        testID='user_status.away.option'
                        text={intl.formatMessage({
@@ -80,7 +80,7 @@ const UserStatus = ({currentUser}: Props) => {
                    />
                    <SlideUpPanelItem
                        icon='minus-circle'
-                        imageStyles={{color: theme.dndIndicator}}
+                        iconStyles={{color: theme.dndIndicator}}
                        onPress={() => setUserStatus(DND)}
                        testID='user_status.dnd.option'
                        text={intl.formatMessage({
@@ -91,7 +91,7 @@ const UserStatus = ({currentUser}: Props) => {
                    />
                    <SlideUpPanelItem
                        icon='circle-outline'
-                        imageStyles={{color: changeOpacity('#B8B8B8', 0.64)}}
+                        iconStyles={{color: changeOpacity('#B8B8B8', 0.64)}}
                        onPress={() => setUserStatus(OFFLINE)}
                        testID='user_status.offline.option'
                        text={intl.formatMessage({
--- a/app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx
+++ b/app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx
@@ -3,7 +3,7 @@

 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {Animated, DeviceEventEmitter, Platform, Text, View} from 'react-native';
+import {Animated, DeviceEventEmitter, Platform, StyleProp, Text, View, ViewStyle} from 'react-native';
 import {RectButton} from 'react-native-gesture-handler';
 import Swipeable from 'react-native-gesture-handler/Swipeable';

@@ -210,7 +210,7 @@ const ServerItem = ({
    };

    const containerStyle = useMemo(() => {
-        const style = [styles.container];
+        const style: StyleProp<ViewStyle> = [styles.container];
        if (isActive) {
            style.push(styles.active);
        }
@@ -219,7 +219,7 @@ const ServerItem = ({
    }, [isActive]);

    const serverStyle = useMemo(() => {
-        const style = [styles.row];
+        const style: StyleProp<ViewStyle> = [styles.row];
        if (!server.lastActiveAt) {
            style.push(styles.offline);
        }
--- a/app/screens/home/search/results/filter.tsx
+++ b/app/screens/home/search/results/filter.tsx
@@ -112,11 +112,10 @@ const Filter = ({initialFilter, setFilter, title}: FilterProps) => {
            title={title}
            titleSeparator={true}
        >
-            <View style={style.container}>
+            <View>
                <FlatList
                    data={data}
                    renderItem={renderFilterItem}
-                    contentContainerStyle={style.contentContainer}
                    ItemSeparatorComponent={separator}
                />
            </View>
--- a/app/screens/integration_selector/channel_list_row/index.tsx
+++ b/app/screens/integration_selector/channel_list_row/index.tsx
@@ -15,7 +15,7 @@ import CustomListRow, {Props as CustomListRowProps} from '../custom_list_row';

 type ChannelListRowProps = {
    id: string;
-    theme: object;
+    theme: Theme;
    channel: Channel;
    onPress: (item: Channel) => void;
 };
--- a/app/screens/integration_selector/custom_list/index.tsx
+++ b/app/screens/integration_selector/custom_list/index.tsx
@@ -32,7 +32,7 @@ type Props = {
    onRowPress: (item: Channel | DialogOption) => void;
    renderItem: (props: ListItemProps) => JSX.Element;
    selectable?: boolean;
-    theme?: object;
+    theme: Theme;
    shouldRenderSeparator?: boolean;
    testID?: string;
 }
--- a/app/screens/integration_selector/custom_list_row/index.tsx
+++ b/app/screens/integration_selector/custom_list_row/index.tsx
@@ -22,10 +22,6 @@ export type Props = {
 };

 const style = StyleSheet.create({
-    touchable: {
-        flex: 1,
-        overflow: 'hidden',
-    },
    container: {
        flexDirection: 'row',
        height: 65,
--- a/app/screens/integration_selector/integration_selector.tsx
+++ b/app/screens/integration_selector/integration_selector.tsx
@@ -7,15 +7,15 @@ import {View} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';

 import {fetchChannels, searchChannels} from '@actions/remote/channel';
-import ServerUserList from '@app/components/server_user_list';
-import {t} from '@app/i18n';
 import FormattedText from '@components/formatted_text';
 import SearchBar from '@components/search';
+import ServerUserList from '@components/server_user_list';
 import {General, View as ViewConstants} from '@constants';
 import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import {debounce} from '@helpers/api/general';
 import useNavButtonPressed from '@hooks/navigation_button_pressed';
+import {t} from '@i18n';
 import {
    buildNavigationButton,
    popTopScreen, setButtons,
--- a/app/screens/integration_selector/option_list_row/index.tsx
+++ b/app/screens/integration_selector/option_list_row/index.tsx
@@ -14,7 +14,7 @@ import CustomListRow, {Props as CustomListRowProps} from '../custom_list_row';

 type OptionListRowProps = {
    id: string;
-    theme: object;
+    theme: Theme;
    item: { text: string; value: string };
    onPress: (item: DialogOption) => void;
 }
--- a/app/screens/integration_selector/selected_options/index.tsx
+++ b/app/screens/integration_selector/selected_options/index.tsx
@@ -67,7 +67,6 @@ const SelectedOptions = ({
    return (
        <ScrollView
            style={style.container}
-            contentContainerStyle={style.scrollViewContent}
        >
            <View style={style.users}>
                {options}
--- a/app/screens/mfa/index.tsx
+++ b/app/screens/mfa/index.tsx
@@ -221,7 +221,6 @@ const MFA = ({config, goToHome, license, loginId, password, serverDisplayName, s
                                autoCorrect={false}
                                autoCapitalize={'none'}
                                blurOnSubmit={true}
-                                containerStyle={styles.inputBoxEmail}
                                disableFullscreenUI={true}
                                enablesReturnKeyAutomatically={true}
                                error={error}
--- a/app/screens/permalink/permalink.tsx
+++ b/app/screens/permalink/permalink.tsx
@@ -392,7 +392,7 @@ function Permalink({
                    </View>
                </View>
                {showHeaderDivider && (
-                    <View style={style.dividerContainer}>
+                    <View>
                        <View style={style.divider}/>
                    </View>
                )}
--- a/app/screens/pinned_messages/pinned_messages.tsx
+++ b/app/screens/pinned_messages/pinned_messages.tsx
@@ -44,11 +44,6 @@ const styles = StyleSheet.create({
    list: {
        paddingVertical: 8,
    },
-    loading: {
-        height: 40,
-        width: 40,
-        justifyContent: 'center' as const,
-    },
 });

 function SavedMessages({
--- a/app/screens/select_team/team_list.tsx
+++ b/app/screens/select_team/team_list.tsx
@@ -55,7 +55,7 @@ function TeamList({
    };

    const containerStyle = useMemo(() => {
-        return isTablet ? [styles.container, {maxWidth: 600, alignItems: 'center'}] : styles.container;
+        return isTablet ? [styles.container, {maxWidth: 600, alignItems: 'center' as const}] : styles.container;
    }, [isTablet, styles]);

    return (
--- a/app/screens/settings/about/about.tsx
+++ b/app/screens/settings/about/about.tsx
@@ -304,7 +304,7 @@ const About = ({config, license}: AboutProps) => {
                    />
                </View>
                <View style={styles.hashContainer}>
-                    <View style={styles.footerGroup}>
+                    <View>
                        <FormattedText
                            defaultMessage='Build Hash:'
                            id={t('about.hash')}
@@ -318,7 +318,7 @@ const About = ({config, license}: AboutProps) => {
                            {config.BuildHash}
                        </Text>
                    </View>
-                    <View style={styles.footerGroup}>
+                    <View>
                        <FormattedText
                            defaultMessage='EE Build Hash:'
                            id={t('about.hashee')}
@@ -333,7 +333,7 @@ const About = ({config, license}: AboutProps) => {
                        </Text>
                    </View>
                </View>
-                <View style={[styles.footerGroup, {marginBottom: 20}]}>
+                <View style={{marginBottom: 20}}>
                    <FormattedText
                        defaultMessage='Build Date:'
                        id={t('about.date')}
--- a/app/screens/settings/setting_option.tsx
+++ b/app/screens/settings/setting_option.tsx
@@ -36,7 +36,7 @@ const SettingOption = ({...props}: OptionItemProps) => {
        <OptionItem
            optionDescriptionTextStyle={styles.optionDescriptionTextStyle}
            optionLabelTextStyle={styles.optionLabelTextStyle}
-            containerStyle={[styles.container, props.description && {marginVertical: 12}]}
+            containerStyle={[styles.container, Boolean(props.description) && {marginVertical: 12}]}
            {...props}
            type={useRadioButton ? 'radio' : props.type}
        />
--- a/app/screens/settings/settings_separator.tsx
+++ b/app/screens/settings/settings_separator.tsx
@@ -8,7 +8,7 @@ import {useTheme} from '@context/theme';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';

 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
-    const groupSeparator = {
+    const groupSeparator: ViewStyle = {
        backgroundColor: changeOpacity(theme.centerChannelColor, 0.12),
        width: '91%',
        alignSelf: 'center',
--- a/app/screens/sso/sso_with_webview.tsx
+++ b/app/screens/sso/sso_with_webview.tsx
@@ -26,7 +26,7 @@ interface SSOWithWebViewProps {
    loginUrl: string;
    serverUrl: string;
    ssoType: string;
-    theme: Partial<Theme>;
+    theme: Theme;
 }

 const HEADERS = {
--- a/app/screens/thread/thread_follow_button/thread_follow_button.tsx
+++ b/app/screens/thread/thread_follow_button/thread_follow_button.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.

 import React from 'react';
-import {Platform, StyleSheet, TouchableOpacity, View} from 'react-native';
+import {Platform, StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle} from 'react-native';

 import {updateThreadFollowing} from '@actions/remote/thread';
 import FormattedText from '@components/formatted_text';
@@ -59,7 +59,7 @@ function ThreadFollow({isFollowing, teamId, threadId}: Props) {
        updateThreadFollowing(serverUrl, teamId, threadId, !isFollowing);
    });

-    const containerStyle = [styles.container];
+    const containerStyle: StyleProp<ViewStyle> = [styles.container];
    let followTextProps = {
        id: t('threads.follow'),
        defaultMessage: 'Follow',
--- a/app/utils/theme/index.ts
+++ b/app/utils/theme/index.ts
@@ -9,6 +9,7 @@ import {Preferences} from '@constants';
 import {MODAL_SCREENS_WITHOUT_BACK, SCREENS_WITH_TRANSPARENT_BACKGROUND} from '@constants/screens';
 import EphemeralStore from '@store/ephemeral_store';
 import NavigationStore from '@store/navigation_store';
+import {NamedStyles} from '@typings/global/styles';
 import {appearanceControlledScreens, mergeNavigationOptions} from '@utils/navigation';

 import type {Options} from 'react-native-navigation';
@@ -51,10 +52,10 @@ export function getComponents(inColor: string): {red: number; green: number; blu
    };
 }

-export function makeStyleSheetFromTheme(getStyleFromTheme: (a: any) => any): (a: any) => any {
-    let lastTheme: any;
-    let style: any;
-    return (theme: any) => {
+export function makeStyleSheetFromTheme<T extends NamedStyles<T>>(getStyleFromTheme: (a: Theme) => T): (a: Theme) => T {
+    let lastTheme: Theme;
+    let style: T;
+    return (theme: Theme) => {
        if (!style || theme !== lastTheme) {
            style = StyleSheet.create(getStyleFromTheme(theme));
            lastTheme = theme;
--- a/share_extension/components/channel_item/avatar/avatar.tsx
+++ b/share_extension/components/channel_item/avatar/avatar.tsx
@@ -5,8 +5,8 @@ import React from 'react';
 import {View} from 'react-native';
 import FastImage from 'react-native-fast-image';

-import {ACCOUNT_OUTLINE_IMAGE} from '@app/constants/profile';
 import CompassIcon from '@components/compass_icon';
+import {ACCOUNT_OUTLINE_IMAGE} from '@constants/profile';
 import NetworkManager from '@managers/network_manager';
 import {useShareExtensionServerUrl} from '@share/state';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
--- a/share_extension/components/content_view/attachments/multiple.tsx
+++ b/share_extension/components/content_view/attachments/multiple.tsx
@@ -4,7 +4,7 @@
 import React, {useCallback, useMemo} from 'react';
 import {FlatList, ListRenderItemInfo, StyleProp, View, ViewStyle} from 'react-native';

-import FormattedText from '@app/components/formatted_text';
+import FormattedText from '@components/formatted_text';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';

--- a/share_extension/components/servers_list/index.ts
+++ b/share_extension/components/servers_list/index.ts
@@ -3,7 +3,7 @@

 import withObservables from '@nozbe/with-observables';

-import {observeAllActiveServers} from '@app/queries/app/servers';
+import {observeAllActiveServers} from '@queries/app/servers';

 import ServersList from './servers_list';

--- a/types/global/styles.ts
+++ b/types/global/styles.ts
@@ -0,0 +1,5 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import {ImageStyle, TextStyle, ViewStyle} from 'react-native';
+
+export type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };