Revert "Chore: Migration to Hooks - Markdown (#4264)" (#4338)

This reverts commit 4fd0084bc1.

app/containers/Avatar/Avatar.tsx

@@ -44,14 +44,7 @@ const Avatar = React.memo(
 		let image;
 		if (emoji) {
 			image = (
-				<Emoji
+				<Emoji baseUrl={server} getCustomEmoji={getCustomEmoji} isMessageContainsOnlyEmoji literal={emoji} style={avatarStyle} />
-					baseUrl={server}
-					getCustomEmoji={getCustomEmoji}
-					isMessageContainsOnlyEmoji
-					literal={emoji}
-					style={avatarStyle}
-					testID='avatar'
-				/>
 			);
 		} else {
 			let uri = avatar;

app/containers/EmojiPicker/CustomEmoji.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import FastImage from 'react-native-fast-image';
 
-import { ICustomEmoji } from '../../definitions';
+import { ICustomEmoji } from '../../definitions/IEmoji';
 
 const CustomEmoji = React.memo(
-	({ baseUrl, emoji, style, testID }: ICustomEmoji) => (
+	({ baseUrl, emoji, style }: ICustomEmoji) => (
 		<FastImage
 			style={style}
 			source={{
@@ -12,7 +12,6 @@ const CustomEmoji = React.memo(
 				priority: FastImage.priority.high
 			}}
 			resizeMode={FastImage.resizeMode.contain}
-			testID={testID}
 		/>
 	),
 	(prevProps, nextProps) => {

app/containers/UIKit/index.tsx

@@ -76,7 +76,7 @@ class MessageParser extends UiKitParserMessage<React.ReactElement> {
 				<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].auxiliaryText }]} numberOfLines={0} />
 			);
 		}
-		return <Markdown msg={element.text} style={[isContext && { color: themes[theme].auxiliaryText }]} />;
+		return <Markdown msg={element.text} theme={theme} style={[isContext && { color: themes[theme].auxiliaryText }]} />;
 	}
 
 	button(element: IButton, context: BlockContext) {

app/containers/markdown/AtMention.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { StyleProp, Text, TextStyle } from 'react-native';
 
 import { useTheme } from '../../theme';
+import { themes } from '../../lib/constants';
 import styles from './styles';
 import { events, logEvent } from '../../lib/methods/helpers/log';
 import { IUserMention } from './interfaces';
@@ -13,22 +14,20 @@ interface IAtMention {
 	style?: StyleProp<TextStyle>[];
 	useRealName?: boolean;
 	mentions?: IUserMention[];
-	testID: string;
 }
 
-const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, style = [], useRealName, testID }: IAtMention) => {
+const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, style = [], useRealName }: IAtMention) => {
-	const { colors } = useTheme();
+	const { theme } = useTheme();
 	if (mention === 'all' || mention === 'here') {
 		return (
 			<Text
 				style={[
 					styles.mention,
 					{
-						color: colors.mentionGroupColor
+						color: themes[theme].mentionGroupColor
 					},
 					...style
-				]}
+				]}>
-				testID={`${testID}-mention-all-here`}>
 				{mention}
 			</Text>
 		);
@@ -37,11 +36,11 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 	let mentionStyle = {};
 	if (mention === username) {
 		mentionStyle = {
-			color: colors.mentionMeColor
+			color: themes[theme].mentionMeColor
 		};
 	} else {
 		mentionStyle = {
-			color: colors.mentionOtherColor
+			color: themes[theme].mentionOtherColor
 		};
 	}
 
@@ -60,15 +59,13 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 
 	if (user) {
 		return (
-			<Text style={[styles.mention, mentionStyle, ...style]} onPress={handlePress} testID={`${testID}-mention-users`}>
+			<Text style={[styles.mention, mentionStyle, ...style]} onPress={handlePress}>
 				{useRealName && user.name ? user.name : user.username}
 			</Text>
 		);
 	}
 
-	return (
+	return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`@${mention}`}</Text>;
-		<Text style={[styles.text, { color: colors.bodyText }, ...style]} testID={`${testID}-mention-unknown`}>{`@${mention}`}</Text>
-	);
 });
 
 export default AtMention;

app/containers/markdown/BlockQuote.tsx

@@ -1,21 +1,20 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { useTheme } from '../../theme';
+import { TSupportedThemes } from '../../theme';
+import { themes } from '../../lib/constants';
 import styles from './styles';
 
 interface IBlockQuote {
 	children: React.ReactElement | null;
+	theme: TSupportedThemes;
 }
 
-const BlockQuote = React.memo(({ children }: IBlockQuote) => {
+const BlockQuote = React.memo(({ children, theme }: IBlockQuote) => (
-	const { colors } = useTheme();
+	<View style={styles.container}>
-	return (
+		<View style={[styles.quote, { backgroundColor: themes[theme].borderColor }]} />
-		<View style={styles.container} testID='markdown-block-quote'>
-			<View style={[styles.quote, { backgroundColor: colors.borderColor }]} />
 		<View style={styles.childContainer}>{children}</View>
 	</View>
-	);
+));
-});
 
 export default BlockQuote;

app/containers/markdown/Emoji.tsx

@@ -15,11 +15,10 @@ interface IEmoji {
 	style?: object;
 	onEmojiSelected?: Function;
 	tabEmojiStyle?: object;
-	testID: string;
 }
 
 const Emoji = React.memo(
-	({ literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl, testID, customEmojis = true, style = {} }: IEmoji) => {
+	({ literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl, customEmojis = true, style = {} }: IEmoji) => {
 		const { colors } = useTheme();
 		const emojiUnicode = shortnameToUnicode(literal);
 		const emoji: any = getCustomEmoji && getCustomEmoji(literal.replace(/:/g, ''));
@@ -29,14 +28,11 @@ const Emoji = React.memo(
 					baseUrl={baseUrl}
 					style={[isMessageContainsOnlyEmoji ? styles.customEmojiBig : styles.customEmoji, style]}
 					emoji={emoji}
-					testID={`${testID}-custom-emoji`}
 				/>
 			);
 		}
 		return (
-			<Text
+			<Text style={[{ color: colors.bodyText }, isMessageContainsOnlyEmoji ? styles.textBig : styles.text, style]}>
-				style={[{ color: colors.bodyText }, isMessageContainsOnlyEmoji ? styles.textBig : styles.text, style]}
-				testID={`${testID}-unicode-emoji`}>
 				{emojiUnicode}
 			</Text>
 		);

app/containers/markdown/Hashtag.tsx

@@ -3,6 +3,7 @@ import { StyleProp, Text, TextStyle } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 
+import { themes } from '../../lib/constants';
 import { useTheme } from '../../theme';
 import { IUserChannel } from './interfaces';
 import styles from './styles';
@@ -16,11 +17,10 @@ interface IHashtag {
 	navToRoomInfo?: Function;
 	style?: StyleProp<TextStyle>[];
 	channels?: IUserChannel[];
-	testID: string;
 }
 
-const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, testID, style = [] }: IHashtag) => {
+const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IHashtag) => {
-	const { colors } = useTheme();
+	const { theme } = useTheme();
 	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
 	const navigation = useNavigation<StackNavigationProp<ChatsStackParamList, 'RoomView'>>();
 
@@ -46,21 +46,16 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, testID, style =
 				style={[
 					styles.mention,
 					{
-						color: colors.mentionOtherColor
+						color: themes[theme].mentionOtherColor
 					},
 					...style
 				]}
-				onPress={handlePress}
+				onPress={handlePress}>
-				testID={`${testID}-hashtag-channels`}>
 				{`#${hashtag}`}
 			</Text>
 		);
 	}
-	return (
+	return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`#${hashtag}`}</Text>;
-		<Text
-			style={[styles.text, { color: colors.bodyText }, ...style]}
-			testID={`${testID}-hashtag-without-channels`}>{`#${hashtag}`}</Text>
-	);
 });
 
 export default Hashtag;

app/containers/markdown/Link.tsx

@@ -3,23 +3,22 @@ import { Text } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 
 import styles from './styles';
+import { themes } from '../../lib/constants';
 import { LISTENER } from '../Toast';
 import EventEmitter from '../../lib/methods/helpers/events';
 import I18n from '../../i18n';
 import openLink from '../../lib/methods/helpers/openLink';
 import { TOnLinkPress } from './interfaces';
-import { useTheme } from '../../theme';
+import { TSupportedThemes } from '../../theme';
 
 interface ILink {
 	children: React.ReactElement | null;
 	link: string;
+	theme: TSupportedThemes;
 	onLinkPress?: TOnLinkPress;
-	testID: string;
 }
 
-const Link = React.memo(({ children, link, onLinkPress, testID }: ILink) => {
+const Link = React.memo(({ children, link, theme, onLinkPress }: ILink) => {
-	const { colors, theme } = useTheme();
-
 	const handlePress = () => {
 		if (!link) {
 			return;
@@ -38,11 +37,7 @@ const Link = React.memo(({ children, link, onLinkPress, testID }: ILink) => {
 
 	// if you have a [](https://rocket.chat) render https://rocket.chat
 	return (
-		<Text
+		<Text onPress={handlePress} onLongPress={onLongPress} style={{ ...styles.link, color: themes[theme].actionTintColor }}>
-			onPress={handlePress}
-			onLongPress={onLongPress}
-			style={{ ...styles.link, color: colors.actionTintColor }}
-			testID={`${testID}-link`}>
 			{childLength !== 0 ? children : link}
 		</Text>
 	);

app/containers/markdown/ListItem.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { useTheme } from '../../theme';
+import { TSupportedThemes } from '../../theme';
+import { themes } from '../../lib/constants';
 
 const style = StyleSheet.create({
 	container: {
@@ -23,13 +24,11 @@ interface IListItem {
 	level: number;
 	ordered: boolean;
 	continue: boolean;
+	theme: TSupportedThemes;
 	index: number;
-	testID: string;
 }
 
-const ListItem = React.memo(({ children, level, bulletWidth, continue: _continue, ordered, index, testID }: IListItem) => {
+const ListItem = React.memo(({ children, level, bulletWidth, continue: _continue, ordered, index, theme }: IListItem) => {
-	const { colors } = useTheme();
-
 	let bullet;
 	if (_continue) {
 		bullet = '';
@@ -42,9 +41,9 @@ const ListItem = React.memo(({ children, level, bulletWidth, continue: _continue
 	}
 
 	return (
-		<View style={style.container} testID={`${testID}-list`}>
+		<View style={style.container}>
 			<View style={[{ width: bulletWidth }, style.bullet]}>
-				<Text style={{ color: colors.bodyText }}>{bullet}</Text>
+				<Text style={{ color: themes[theme].bodyText }}>{bullet}</Text>
 			</View>
 			<View style={style.contents}>{children}</View>
 		</View>

app/containers/markdown/Table.tsx

@@ -5,25 +5,24 @@ import { CELL_WIDTH } from './TableCell';
 import Navigation from '../../lib/navigation/appNavigation';
 import styles from './styles';
 import I18n from '../../i18n';
-import { useTheme } from '../../theme';
+import { TSupportedThemes } from '../../theme';
+import { themes } from '../../lib/constants';
 import { useAppSelector } from '../../lib/hooks';
 
 interface ITable {
 	children: React.ReactElement | null;
 	numColumns: number;
-	testID: string;
+	theme: TSupportedThemes;
 }
 
 const MAX_HEIGHT = 300;
 
-const Table = React.memo(({ children, numColumns, testID }: ITable) => {
+const Table = React.memo(({ children, numColumns, theme }: ITable) => {
-	const { colors } = useTheme();
-
 	const getTableWidth = () => numColumns * CELL_WIDTH;
 	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
 
 	const renderRows = (drawExtraBorders = true) => {
-		const tableStyle: ViewStyle[] = [styles.table, { borderColor: colors.borderColor }];
+		const tableStyle: ViewStyle[] = [styles.table, { borderColor: themes[theme].borderColor }];
 		if (drawExtraBorders) {
 			tableStyle.push(styles.tableExtraBorders);
 		}
@@ -48,15 +47,18 @@ const Table = React.memo(({ children, numColumns, testID }: ITable) => {
 	};
 
 	return (
-		<TouchableOpacity onPress={onPress} testID={`${testID}-table`}>
+		<TouchableOpacity onPress={onPress}>
 			<ScrollView
 				contentContainerStyle={{ width: getTableWidth() }}
 				scrollEnabled={false}
 				showsVerticalScrollIndicator={false}
-				style={[styles.containerTable, { maxWidth: getTableWidth(), maxHeight: MAX_HEIGHT, borderColor: colors.borderColor }]}>
+				style={[
+					styles.containerTable,
+					{ maxWidth: getTableWidth(), maxHeight: MAX_HEIGHT, borderColor: themes[theme].borderColor }
+				]}>
 				{renderRows(false)}
 			</ScrollView>
-			<Text style={[styles.textInfo, { color: colors.auxiliaryText }]}>{I18n.t('Full_table')}</Text>
+			<Text style={[styles.textInfo, { color: themes[theme].auxiliaryText }]}>{I18n.t('Full_table')}</Text>
 		</TouchableOpacity>
 	);
 });

app/containers/markdown/TableCell.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
 import { Text, View, ViewStyle } from 'react-native';
 
-import { useTheme } from '../../theme';
+import { TSupportedThemes } from '../../theme';
+import { themes } from '../../lib/constants';
 import styles from './styles';
 
-export interface ITableCell {
+interface ITableCell {
 	align: '' | 'left' | 'center' | 'right';
 	children: React.ReactElement | null;
 	isLastCell: boolean;
+	theme: TSupportedThemes;
 }
 
 export const CELL_WIDTH = 100;
 
-const TableCell = React.memo(({ isLastCell, align, children }: ITableCell) => {
+const TableCell = React.memo(({ isLastCell, align, children, theme }: ITableCell) => {
-	const { colors } = useTheme();
+	const cellStyle: ViewStyle[] = [styles.cell, { borderColor: themes[theme].borderColor }];
-
-	const cellStyle: ViewStyle[] = [styles.cell, { borderColor: colors.borderColor }];
 	if (!isLastCell) {
 		cellStyle.push(styles.cellRightBorder);
 	}
@@ -29,7 +29,7 @@ const TableCell = React.memo(({ isLastCell, align, children }: ITableCell) => {
 
 	return (
 		<View style={[...cellStyle, { width: CELL_WIDTH }]}>
-			<Text style={[textStyle, { color: colors.bodyText }]}>{children}</Text>
+			<Text style={[textStyle, { color: themes[theme].bodyText }]}>{children}</Text>
 		</View>
 	);
 });

app/containers/markdown/TableRow.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import { View, ViewStyle } from 'react-native';
 
-import { useTheme } from '../../theme';
+import { TSupportedThemes } from '../../theme';
+import { themes } from '../../lib/constants';
 import styles from './styles';
 
-export interface ITableRow {
+interface ITableRow {
 	children: React.ReactElement | null;
 	isLastRow: boolean;
+	theme: TSupportedThemes;
 }
 
-const TableRow = React.memo(({ isLastRow, children: _children }: ITableRow) => {
+const TableRow = React.memo(({ isLastRow, children: _children, theme }: ITableRow) => {
-	const { colors } = useTheme();
+	const rowStyle: ViewStyle[] = [styles.row, { borderColor: themes[theme].borderColor }];
-
-	const rowStyle: ViewStyle[] = [styles.row, { borderColor: colors.borderColor }];
 	if (!isLastRow) {
 		rowStyle.push(styles.rowBottomBorder);
 	}

app/containers/markdown/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useReducer, useRef } from 'react';
+import React, { PureComponent } from 'react';
 import { Image, StyleProp, Text, TextStyle } from 'react-native';
 import { Parser } from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
@@ -12,23 +12,24 @@ import MarkdownHashtag from './Hashtag';
 import MarkdownBlockQuote from './BlockQuote';
 import MarkdownEmoji from './Emoji';
 import MarkdownTable from './Table';
-import MarkdownTableRow, { ITableRow } from './TableRow';
+import MarkdownTableRow from './TableRow';
-import MarkdownTableCell, { ITableCell } from './TableCell';
+import MarkdownTableCell from './TableCell';
 import mergeTextNodes from './mergeTextNodes';
 import styles from './styles';
-import { isValidURL } from '../../lib/methods/helpers';
+import { isValidURL } from '../../lib/methods/helpers/url';
 import NewMarkdown from './new';
 import { formatText } from './formatText';
 import { IUserMention, IUserChannel, TOnLinkPress } from './interfaces';
-import { TGetCustomEmoji } from '../../definitions';
+import { TGetCustomEmoji } from '../../definitions/IEmoji';
 import { formatHyperlink } from './formatHyperlink';
-import { useTheme } from '../../theme';
+import { TSupportedThemes } from '../../theme';
-import { IRoomInfoParam } from '../../views/SearchMessagesView';
+import { themes } from '../../lib/constants';
 
 export { default as MarkdownPreview } from './Preview';
 
-export interface IMarkdownProps {
+interface IMarkdownProps {
 	msg?: string | null;
+	theme: TSupportedThemes;
 	md?: MarkdownAST;
 	mentions?: IUserMention[];
 	getCustomEmoji?: TGetCustomEmoji;
@@ -40,7 +41,8 @@ export interface IMarkdownProps {
 	useRealName?: boolean;
 	channels?: IUserChannel[];
 	enableMessageParser?: boolean;
-	navToRoomInfo?: (params: IRoomInfoParam) => void;
+	// TODO: Refactor when migrate Room
+	navToRoomInfo?: Function;
 	testID?: string;
 	style?: StyleProp<TextStyle>[];
 	onLinkPress?: TOnLinkPress;
@@ -84,147 +86,141 @@ const emojiCount = (str: string) => {
 };
 
 const parser = new Parser();
-export const markdownTestID = 'markdown';
 
-const Markdown = ({
+class Markdown extends PureComponent<IMarkdownProps, any> {
-	msg,
+	private renderer: any;
-	md,
-	mentions,
-	getCustomEmoji,
-	baseUrl,
-	username,
-	tmid,
-	numberOfLines,
-	customEmojis,
-	useRealName,
-	channels,
-	enableMessageParser,
-	navToRoomInfo,
-	style,
-	onLinkPress
-}: IMarkdownProps) => {
-	const { colors } = useTheme();
-	const renderer = useRef<any>();
-	const isMessageContainsOnlyEmoji = useRef(false);
-	const [, forceUpdate] = useReducer(x => x + 1, 0);
 
-	const isNewMarkdown = useCallback(() => !!enableMessageParser && !!md, [enableMessageParser, md]);
+	private isMessageContainsOnlyEmoji!: boolean;
-	const createRenderer = useCallback(
+
-		() =>
+	constructor(props: IMarkdownProps) {
+		super(props);
+		if (!this.isNewMarkdown) {
+			this.renderer = this.createRenderer();
+		}
+	}
+
+	createRenderer = () =>
 		new Renderer({
 			renderers: {
-					text: renderText,
+				text: this.renderText,
 
 				emph: Renderer.forwardChildren,
 				strong: Renderer.forwardChildren,
 				del: Renderer.forwardChildren,
-					code: renderCodeInline,
+				code: this.renderCodeInline,
-					link: renderLink,
+				link: this.renderLink,
-					image: renderImage,
+				image: this.renderImage,
-					atMention: renderAtMention,
+				atMention: this.renderAtMention,
-					emoji: renderEmoji,
+				emoji: this.renderEmoji,
-					hashtag: renderHashtag,
+				hashtag: this.renderHashtag,
 
-					paragraph: renderParagraph,
+				paragraph: this.renderParagraph,
-					heading: renderHeading,
+				heading: this.renderHeading,
-					codeBlock: renderCodeBlock,
+				codeBlock: this.renderCodeBlock,
-					blockQuote: renderBlockQuote,
+				blockQuote: this.renderBlockQuote,
 
-					list: renderList,
+				list: this.renderList,
-					item: renderListItem,
+				item: this.renderListItem,
 
-					hardBreak: renderBreak,
+				hardBreak: this.renderBreak,
-					thematicBreak: renderBreak,
+				thematicBreak: this.renderBreak,
-					softBreak: renderBreak,
+				softBreak: this.renderBreak,
 
-					htmlBlock: renderText,
+				htmlBlock: this.renderText,
-					htmlInline: renderText,
+				htmlInline: this.renderText,
 
-					table: renderTable,
+				table: this.renderTable,
-					table_row: renderTableRow,
+				table_row: this.renderTableRow,
-					table_cell: renderTableCell
+				table_cell: this.renderTableCell
 			},
 			renderParagraphsInLists: true
-			}),
+		});
-		[]
-	);
 
-	useEffect(() => {
+	get isNewMarkdown(): boolean {
-		if (!isNewMarkdown() && msg) {
+		const { md, enableMessageParser } = this.props;
-			renderer.current = createRenderer();
+		return !!enableMessageParser && !!md;
-			forceUpdate();
-		}
-	}, [createRenderer, isNewMarkdown, msg]);
-
-	if (!msg) {
-		return null;
 	}
 
-	const renderText = ({ context, literal }: { context: []; literal: string }) => {
+	renderText = ({ context, literal }: { context: []; literal: string }) => {
-		const defaultStyle = [isMessageContainsOnlyEmoji.current ? styles.textBig : {}, ...context.map(type => styles[type])];
+		const { numberOfLines, style = [] } = this.props;
+		const defaultStyle = [this.isMessageContainsOnlyEmoji ? styles.textBig : {}, ...context.map(type => styles[type])];
 		return (
-			<Text accessibilityLabel={literal} style={[styles.text, defaultStyle, ...(style || [])]} numberOfLines={numberOfLines}>
+			<Text accessibilityLabel={literal} style={[styles.text, defaultStyle, ...style]} numberOfLines={numberOfLines}>
 				{literal}
 			</Text>
 		);
 	};
 
-	const renderCodeInline = ({ literal }: TLiteral) => (
+	renderCodeInline = ({ literal }: TLiteral) => {
+		const { theme, style = [] } = this.props;
+		return (
 			<Text
-			testID={`${markdownTestID}-code-in-line`}
 				style={[
 					{
 						...styles.codeInline,
-					color: colors.bodyText,
+						color: themes[theme].bodyText,
-					backgroundColor: colors.bannerBackground,
+						backgroundColor: themes[theme].bannerBackground,
-					borderColor: colors.bannerBackground
+						borderColor: themes[theme].bannerBackground
 					},
-				...(style || [])
+					...style
 				]}>
 				{literal}
 			</Text>
 		);
+	};
 
-	const renderCodeBlock = ({ literal }: TLiteral) => (
+	renderCodeBlock = ({ literal }: TLiteral) => {
+		const { theme, style = [] } = this.props;
+		return (
 			<Text
-			testID={`${markdownTestID}-code-block`}
 				style={[
 					{
 						...styles.codeBlock,
-					color: colors.bodyText,
+						color: themes[theme].bodyText,
-					backgroundColor: colors.bannerBackground,
+						backgroundColor: themes[theme].bannerBackground,
-					borderColor: colors.bannerBackground
+						borderColor: themes[theme].bannerBackground
 					},
-				...(style || [])
+					...style
 				]}>
 				{literal}
 			</Text>
 		);
+	};
 
-	const renderBreak = () => <Text>{tmid ? ' ' : '\n'}</Text>;
+	renderBreak = () => {
+		const { tmid } = this.props;
+		return <Text>{tmid ? ' ' : '\n'}</Text>;
+	};
 
-	const renderParagraph = ({ children }: { children: React.ReactElement[] }) => {
+	renderParagraph = ({ children }: any) => {
+		const { numberOfLines, style, theme } = this.props;
 		if (!children || children.length === 0) {
 			return null;
 		}
 		return (
-			<Text style={[styles.text, style, { color: colors.bodyText }]} numberOfLines={numberOfLines}>
+			<Text style={[styles.text, style, { color: themes[theme].bodyText }]} numberOfLines={numberOfLines}>
 				{children}
 			</Text>
 		);
 	};
 
-	const renderLink = ({ children, href }: { children: React.ReactElement | null; href: string }) => (
+	renderLink = ({ children, href }: any) => {
-		<MarkdownLink link={href} onLinkPress={onLinkPress} testID={markdownTestID}>
+		const { theme, onLinkPress } = this.props;
+		return (
+			<MarkdownLink link={href} theme={theme} onLinkPress={onLinkPress}>
 				{children}
 			</MarkdownLink>
 		);
+	};
 
-	const renderHashtag = ({ hashtag }: { hashtag: string }) => (
+	renderHashtag = ({ hashtag }: { hashtag: string }) => {
-		<MarkdownHashtag hashtag={hashtag} channels={channels} navToRoomInfo={navToRoomInfo} style={style} testID={markdownTestID} />
+		const { channels, navToRoomInfo, style } = this.props;
-	);
+		return <MarkdownHashtag hashtag={hashtag} channels={channels} navToRoomInfo={navToRoomInfo} style={style} />;
+	};
 
-	const renderAtMention = ({ mentionName }: { mentionName: string }) => (
+	renderAtMention = ({ mentionName }: { mentionName: string }) => {
+		const { username = '', mentions, navToRoomInfo, useRealName, style } = this.props;
+		return (
 			<MarkdownAtMention
 				mentions={mentions}
 				mention={mentionName}
@@ -232,81 +228,110 @@ const Markdown = ({
 				username={username}
 				navToRoomInfo={navToRoomInfo}
 				style={style}
-			testID={markdownTestID}
 			/>
 		);
+	};
 
-	const renderEmoji = ({ literal }: TLiteral) => (
+	renderEmoji = ({ literal }: TLiteral) => {
+		const { getCustomEmoji, baseUrl = '', customEmojis, style } = this.props;
+		return (
 			<MarkdownEmoji
 				literal={literal}
-			isMessageContainsOnlyEmoji={isMessageContainsOnlyEmoji.current}
+				isMessageContainsOnlyEmoji={this.isMessageContainsOnlyEmoji}
 				getCustomEmoji={getCustomEmoji}
-			baseUrl={baseUrl || ''}
+				baseUrl={baseUrl}
 				customEmojis={customEmojis}
 				style={style}
-			testID={markdownTestID}
 			/>
 		);
+	};
 
-	const renderImage = ({ src }: { src: string }) => {
+	renderImage = ({ src }: { src: string }) => {
 		if (!isValidURL(src)) {
 			return null;
 		}
 
-		return <Image style={styles.inlineImage} source={{ uri: encodeURI(src) }} testID={`${markdownTestID}-image`} />;
+		return <Image style={styles.inlineImage} source={{ uri: encodeURI(src) }} />;
 	};
 
-	const renderHeading = ({ children, level }: { children: React.ReactElement; level: string }) => {
+	renderHeading = ({ children, level }: any) => {
+		const { numberOfLines, theme } = this.props;
 		// @ts-ignore
 		const textStyle = styles[`heading${level}Text`];
 		return (
-			<Text testID={`${markdownTestID}-header`} numberOfLines={numberOfLines} style={[textStyle, { color: colors.bodyText }]}>
+			<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme].bodyText }]}>
 				{children}
 			</Text>
 		);
 	};
 
-	const renderList = ({ children, start, tight, type }: any) => (
+	renderList = ({ children, start, tight, type }: any) => {
+		const { numberOfLines } = this.props;
+		return (
 			<MarkdownList ordered={type !== 'bullet'} start={start} tight={tight} numberOfLines={numberOfLines}>
 				{children}
 			</MarkdownList>
 		);
+	};
 
-	const renderListItem = ({ children, context, ...otherProps }: any) => {
+	renderListItem = ({ children, context, ...otherProps }: any) => {
+		const { theme } = this.props;
 		const level = context.filter((type: string) => type === 'list').length;
 
 		return (
-			<MarkdownListItem level={level} {...otherProps}>
+			<MarkdownListItem level={level} theme={theme} {...otherProps}>
 				{children}
 			</MarkdownListItem>
 		);
 	};
 
-	const renderBlockQuote = ({ children }: { children: React.ReactElement }) => (
+	renderBlockQuote = ({ children }: { children: JSX.Element }) => {
-		<MarkdownBlockQuote>{children}</MarkdownBlockQuote>
+		const { theme } = this.props;
-	);
+		return <MarkdownBlockQuote theme={theme}>{children}</MarkdownBlockQuote>;
+	};
 
-	const renderTable = ({ children, numColumns }: { children: React.ReactElement; numColumns: number }) => (
+	renderTable = ({ children, numColumns }: { children: JSX.Element; numColumns: number }) => {
-		<MarkdownTable numColumns={numColumns} testID={markdownTestID}>
+		const { theme } = this.props;
+		return (
+			<MarkdownTable numColumns={numColumns} theme={theme}>
 				{children}
 			</MarkdownTable>
 		);
+	};
 
-	const renderTableRow = ({ children, isLastRow }: ITableRow) => (
+	renderTableRow = (args: any) => {
-		<MarkdownTableRow isLastRow={isLastRow}>{children}</MarkdownTableRow>
+		const { theme } = this.props;
-	);
+		return <MarkdownTableRow {...args} theme={theme} />;
+	};
 
-	const renderTableCell = ({ align, children, isLastCell }: ITableCell) => (
+	renderTableCell = (args: any) => {
-		<MarkdownTableCell align={align} isLastCell={isLastCell}>
+		const { theme } = this.props;
-			{children}
+		return <MarkdownTableCell {...args} theme={theme} />;
-		</MarkdownTableCell>
+	};
-	);
 
-	if (isNewMarkdown()) {
+	render() {
+		const {
+			msg,
+			md,
+			mentions,
+			channels,
+			navToRoomInfo,
+			useRealName,
+			username = '',
+			getCustomEmoji,
+			baseUrl = '',
+			onLinkPress
+		} = this.props;
+
+		if (!msg) {
+			return null;
+		}
+
+		if (this.isNewMarkdown) {
 			return (
 				<NewMarkdown
-				username={username || ''}
+					username={username}
-				baseUrl={baseUrl || ''}
+					baseUrl={baseUrl}
 					getCustomEmoji={getCustomEmoji}
 					useRealName={useRealName}
 					tokens={md}
@@ -318,9 +343,13 @@ const Markdown = ({
 			);
 		}
 
-	const formattedMessage = formatHyperlink(formatText(msg));
+		let m = formatText(msg);
-	const ast = mergeTextNodes(parser.parse(formattedMessage));
+		m = formatHyperlink(m);
-	isMessageContainsOnlyEmoji.current = isOnlyEmoji(formattedMessage) && emojiCount(formattedMessage) <= 3;
+		let ast = parser.parse(m);
-	return renderer?.current?.render(ast) || null;
+		ast = mergeTextNodes(ast);
-};
+		this.isMessageContainsOnlyEmoji = isOnlyEmoji(m) && emojiCount(m) <= 3;
+		return this.renderer.render(ast);
+	}
+}
+
 export default Markdown;

app/containers/markdown/markdown.test.tsx

@@ -1,140 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
-import { Provider } from 'react-redux';
-import { combineReducers, createStore } from 'redux';
-
-import Markdown, { IMarkdownProps, markdownTestID } from './index';
-import { IEmoji, TGetCustomEmoji } from '../../definitions';
-
-const getCustomEmoji: TGetCustomEmoji = content =>
-	({
-		marioparty: { name: content, extension: 'gif' },
-		react_rocket: { name: content, extension: 'png' },
-		nyan_rocket: { name: content, extension: 'png' }
-	}[content] as IEmoji);
-
-const Render = ({ msg, baseUrl, getCustomEmoji, mentions, username }: IMarkdownProps) => {
-	const reducers = combineReducers({
-		app: () => ({ isMasterDetail: false })
-	});
-	const store = createStore(reducers);
-	return (
-		<Provider store={store}>
-			<Markdown msg={msg} baseUrl={baseUrl} getCustomEmoji={getCustomEmoji} mentions={mentions} username={username} />
-		</Provider>
-	);
-};
-
-describe('Markdown', () => {
-	test('should render header', () => {
-		const header1 = render(<Render msg='# Header 1' />);
-		const header2 = render(<Render msg='## Header 2' />);
-		const header3 = render(<Render msg='### Header 3' />);
-		const header4 = render(<Render msg='#### Header 4' />);
-		const header5 = render(<Render msg='##### Header 5' />);
-		const header6 = render(<Render msg='###### Header 6' />);
-
-		expect(header1.findByTestId(`${markdownTestID}-header`)).toBeTruthy();
-		expect(header2.findByTestId(`${markdownTestID}-header`)).toBeTruthy();
-		expect(header3.findByTestId(`${markdownTestID}-header`)).toBeTruthy();
-		expect(header4.findByTestId(`${markdownTestID}-header`)).toBeTruthy();
-		expect(header5.findByTestId(`${markdownTestID}-header`)).toBeTruthy();
-		expect(header6.findByTestId(`${markdownTestID}-header`)).toBeTruthy();
-	});
-
-	test('should render code in line', async () => {
-		const { findByTestId } = render(<Render msg='This is `inline code`' />);
-		const component = await findByTestId(`${markdownTestID}-code-in-line`);
-		expect(component).toBeTruthy();
-	});
-
-	test('should render code block', async () => {
-		const { findByTestId } = render(
-			<Render
-				msg='
-```
-Code block
-```'
-			/>
-		);
-		const component = await findByTestId(`${markdownTestID}-code-block`);
-		expect(component).toBeTruthy();
-	});
-
-	test('should render image', async () => {
-		const { findByTestId } = render(<Render msg='![alt text](https://play.google.com/intl/en_us/badges/images/badge_new.png)' />);
-		const component = await findByTestId(`${markdownTestID}-image`);
-		expect(component).toBeTruthy();
-	});
-
-	test('should render link', () => {
-		const markdownLink = render(<Render msg='[Markdown link](https://rocket.chat): `[description](url)`' />);
-		const link = render(<Render msg='<https://rocket.chat|Formatted Link>: `<url|description>`' />);
-		expect(markdownLink.findByTestId(`${markdownTestID}-link`)).toBeTruthy();
-		expect(link.findByTestId(`${markdownTestID}-link`)).toBeTruthy();
-	});
-
-	test('should render block quote', async () => {
-		const { findByTestId } = render(
-			<Render
-				msg={`> This is block quote
-this is a normal line`}
-			/>
-		);
-		const component = await findByTestId(`${markdownTestID}-block-quote`);
-		expect(component).toBeTruthy();
-	});
-
-	test('should render list', () => {
-		const markdownList = render(<Render msg={'* Open Source\n* Rocket.Chat\n  - nodejs\n  - ReactNative'} />);
-		const markdownNumberList = render(<Render msg={'1. Open Source\n2. Rocket.Chat'} />);
-		expect(markdownList.findByTestId(`${markdownTestID}-list`)).toBeTruthy();
-		expect(markdownNumberList.findByTestId(`${markdownTestID}-list`)).toBeTruthy();
-	});
-
-	test('should render emojis', () => {
-		const markdownCustomEmoji = render(
-			<Render msg='😃 :+1: :marioparty:' getCustomEmoji={getCustomEmoji} baseUrl='https://open.rocket.chat' />
-		);
-
-		const markdownUnicodeEmoji = render(<Render msg='Unicode: 😃😇👍' />);
-
-		expect(markdownCustomEmoji.findByTestId(`${markdownTestID}-custom-emoji`)).toBeTruthy();
-		expect(markdownUnicodeEmoji.findByTestId(`${markdownTestID}-unicode-emoji`)).toBeTruthy();
-	});
-
-	test('should render hashtags', () => {
-		const markdownHashtagChannels = render(<Render msg='#test-channel' channels={[{ _id: '123', name: 'test-channel' }]} />);
-		const markdownHashtagWithoutChannels = render(<Render msg='#unknown' />);
-		expect(markdownHashtagChannels.findByTestId(`${markdownTestID}-hashtag-channels`)).toBeTruthy();
-		expect(markdownHashtagWithoutChannels.findByTestId(`${markdownTestID}-hashtag-without-channels`)).toBeTruthy();
-	});
-
-	test('should render mentions', async () => {
-		const markdownMentionsAllAndHere = render(<Render msg='@all @here' username='rocket.cat' />);
-		const markdownMentionsUnknown = render(<Render msg='@unknown' username='rocket.cat' />);
-		const markdownMentionsUsers = render(
-			<Render
-				msg='@rocket.cat '
-				mentions={[{ _id: 'random', name: 'Rocket Cat', username: 'rocket.cat' }]}
-				username='rocket.cat'
-			/>
-		);
-		expect(await markdownMentionsAllAndHere.findAllByTestId(`${markdownTestID}-mention-all-here`)).toBeTruthy();
-		expect(await markdownMentionsUnknown.findByTestId(`${markdownTestID}-mention-unknown`)).toBeTruthy();
-		expect(await markdownMentionsUsers.findByTestId(`${markdownTestID}-mention-users`)).toBeTruthy();
-	});
-
-	test('should render table', async () => {
-		const { findByTestId } = render(
-			<Render
-				msg='First Header | Second Header
------------- | -------------
-Content from cell 1 | Content from cell 2
-Content in the first column | Content in the second column'
-			/>
-		);
-		const component = await findByTestId(`${markdownTestID}-table`);
-		expect(component).toBeTruthy();
-	});
-});

app/containers/markdown/new/Code.tsx

@@ -3,6 +3,7 @@ import { Text } from 'react-native';
 import { Code as CodeProps } from '@rocket.chat/message-parser';
 
 import styles from '../styles';
+import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 import CodeLine from './CodeLine';
 
@@ -11,16 +12,16 @@ interface ICodeProps {
 }
 
 const Code = ({ value }: ICodeProps) => {
-	const { colors } = useTheme();
+	const { theme } = useTheme();
 
 	return (
 		<Text
 			style={[
 				styles.codeBlock,
 				{
-					color: colors.bodyText,
+					color: themes[theme].bodyText,
-					backgroundColor: colors.bannerBackground,
+					backgroundColor: themes[theme].bannerBackground,
-					borderColor: colors.borderColor
+					borderColor: themes[theme].borderColor
 				}
 			]}>
 			{value.map(block => {

app/containers/markdown/new/Emoji.tsx

@@ -3,6 +3,7 @@ import { Text } from 'react-native';
 import { Emoji as EmojiProps } from '@rocket.chat/message-parser';
 
 import shortnameToUnicode from '../../../lib/methods/helpers/shortnameToUnicode';
+import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 import styles from '../styles';
 import CustomEmoji from '../../EmojiPicker/CustomEmoji';
@@ -14,7 +15,7 @@ interface IEmojiProps {
 }
 
 const Emoji = ({ value, isBigEmoji }: IEmojiProps) => {
-	const { colors } = useTheme();
+	const { theme } = useTheme();
 	const { baseUrl, getCustomEmoji } = useContext(MarkdownContext);
 	const emojiUnicode = shortnameToUnicode(`:${value.value}:`);
 	const emoji = getCustomEmoji?.(value.value);
@@ -22,7 +23,7 @@ const Emoji = ({ value, isBigEmoji }: IEmojiProps) => {
 	if (emoji) {
 		return <CustomEmoji baseUrl={baseUrl} style={[isBigEmoji ? styles.customEmojiBig : styles.customEmoji]} emoji={emoji} />;
 	}
-	return <Text style={[{ color: colors.bodyText }, isBigEmoji ? styles.textBig : styles.text]}>{emojiUnicode}</Text>;
+	return <Text style={[{ color: themes[theme].bodyText }, isBigEmoji ? styles.textBig : styles.text]}>{emojiUnicode}</Text>;
 };
 
 export default Emoji;

app/containers/markdown/new/Heading.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Text } from 'react-native';
 import { Heading as HeadingProps } from '@rocket.chat/message-parser';
 
+import { themes } from '../../../lib/constants';
 import styles from '../styles';
 import { useTheme } from '../../../theme';
 
@@ -11,11 +12,11 @@ interface IHeadingProps {
 }
 
 const Heading = ({ value, level }: IHeadingProps) => {
-	const { colors } = useTheme();
+	const { theme } = useTheme();
 	const textStyle = styles[`heading${level}`];
 
 	return (
-		<Text style={[textStyle, { color: colors.bodyText }]}>
+		<Text style={[textStyle, { color: themes[theme].bodyText }]}>
 			{value.map(block => {
 				switch (block.type) {
 					case 'PLAIN_TEXT':

app/containers/markdown/new/Image.tsx

@@ -4,30 +4,38 @@ import { createImageProgress } from 'react-native-image-progress';
 import * as Progress from 'react-native-progress';
 import FastImage from 'react-native-fast-image';
 
-import { useTheme } from '../../../theme';
+import { TSupportedThemes, useTheme } from '../../../theme';
+import { themes } from '../../../lib/constants';
 import styles from '../../message/styles';
 
+interface IImageProps {
+	value: ImageProps['value'];
+}
+
+type TMessageImage = {
+	img: string;
+	theme: TSupportedThemes;
+};
+
 const ImageProgress = createImageProgress(FastImage);
 
-const MessageImage = ({ img }: { img: string }) => {
+const MessageImage = ({ img, theme }: TMessageImage) => (
-	const { colors } = useTheme();
-	return (
 	<ImageProgress
-			style={[styles.inlineImage, { borderColor: colors.borderColor }]}
+		style={[styles.inlineImage, { borderColor: themes[theme].borderColor }]}
 		source={{ uri: encodeURI(img) }}
 		resizeMode={FastImage.resizeMode.cover}
 		indicator={Progress.Pie}
 		indicatorProps={{
-				color: colors.actionTintColor
+			color: themes[theme].actionTintColor
 		}}
 	/>
-	);
+);
-};
 
-const Image = ({ value }: { value: ImageProps['value'] }) => {
+const Image = ({ value }: IImageProps) => {
+	const { theme } = useTheme();
 	const { src } = value;
 
-	return <MessageImage img={src.value} />;
+	return <MessageImage img={src.value} theme={theme} />;
 };
 
 export default Image;

app/containers/markdown/new/Inline.tsx

@@ -45,15 +45,12 @@ const Inline = ({ value }: IParagraphProps) => {
 								username={username}
 								navToRoomInfo={navToRoomInfo}
 								mentions={mentions}
-								testID='new-markdown'
 							/>
 						);
 					case 'EMOJI':
 						return <Emoji value={block.value} />;
 					case 'MENTION_CHANNEL':
-						return (
+						return <Hashtag hashtag={block.value.value} navToRoomInfo={navToRoomInfo} channels={channels} />;
-							<Hashtag hashtag={block.value.value} navToRoomInfo={navToRoomInfo} channels={channels} testID='new-markdown' />
-						);
 					case 'INLINE_CODE':
 						return <InlineCode value={block.value} />;
 					default:

app/containers/markdown/new/InlineCode.tsx

@@ -3,6 +3,7 @@ import { Text } from 'react-native';
 import { InlineCode as InlineCodeProps } from '@rocket.chat/message-parser';
 
 import styles from '../styles';
+import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 
 interface IInlineCodeProps {
@@ -10,16 +11,16 @@ interface IInlineCodeProps {
 }
 
 const InlineCode = ({ value }: IInlineCodeProps) => {
-	const { colors } = useTheme();
+	const { theme } = useTheme();
 
 	return (
 		<Text
 			style={[
 				styles.codeInline,
 				{
-					color: colors.bodyText,
+					color: themes[theme].bodyText,
-					backgroundColor: colors.bannerBackground,
+					backgroundColor: themes[theme].bannerBackground,
-					borderColor: colors.borderColor
+					borderColor: themes[theme].borderColor
 				}
 			]}>
 			{(block => {

app/containers/markdown/new/Link.tsx

@@ -9,6 +9,7 @@ import { LISTENER } from '../../Toast';
 import { useTheme } from '../../../theme';
 import openLink from '../../../lib/methods/helpers/openLink';
 import EventEmitter from '../../../lib/methods/helpers/events';
+import { themes } from '../../../lib/constants';
 import Strike from './Strike';
 import Italic from './Italic';
 import Bold from './Bold';
@@ -19,7 +20,7 @@ interface ILinkProps {
 }
 
 const Link = ({ value }: ILinkProps) => {
-	const { theme, colors } = useTheme();
+	const { theme } = useTheme();
 	const { onLinkPress } = useContext(MarkdownContext);
 	const { src, label } = value;
 	const handlePress = () => {
@@ -38,7 +39,7 @@ const Link = ({ value }: ILinkProps) => {
 	};
 
 	return (
-		<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: colors.actionTintColor }]}>
+		<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme].actionTintColor }]}>
 			{(block => {
 				switch (block.type) {
 					case 'PLAIN_TEXT':

app/containers/markdown/new/OrderedList.tsx

@@ -4,6 +4,7 @@ import { OrderedList as OrderedListProps } from '@rocket.chat/message-parser';
 
 import Inline from './Inline';
 import styles from '../styles';
+import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 
 interface IOrderedListProps {
@@ -11,12 +12,12 @@ interface IOrderedListProps {
 }
 
 const OrderedList = ({ value }: IOrderedListProps) => {
-	const { colors } = useTheme();
+	const { theme } = useTheme();
 	return (
 		<View>
 			{value.map((item, index) => (
 				<View style={styles.row}>
-					<Text style={[styles.text, { color: colors.bodyText }]}>{index + 1}. </Text>
+					<Text style={[styles.text, { color: themes[theme].bodyText }]}>{index + 1}. </Text>
 					<Inline value={item.value} />
 				</View>
 			))}

app/containers/markdown/new/Paragraph.tsx

@@ -5,15 +5,16 @@ import { Paragraph as ParagraphProps } from '@rocket.chat/message-parser';
 import Inline from './Inline';
 import styles from '../styles';
 import { useTheme } from '../../../theme';
+import { themes } from '../../../lib/constants';
 
 interface IParagraphProps {
 	value: ParagraphProps['value'];
 }
 
 const Paragraph = ({ value }: IParagraphProps) => {
-	const { colors } = useTheme();
+	const { theme } = useTheme();
 	return (
-		<Text style={[styles.text, { color: colors.bodyText }]}>
+		<Text style={[styles.text, { color: themes[theme].bodyText }]}>
 			<Inline value={value} />
 		</Text>
 	);

app/containers/markdown/new/Plain.tsx

@@ -4,15 +4,16 @@ import { Plain as PlainProps } from '@rocket.chat/message-parser';
 
 import styles from '../styles';
 import { useTheme } from '../../../theme';
+import { themes } from '../../../lib/constants';
 
 interface IPlainProps {
 	value: PlainProps['value'];
 }
 
 const Plain = ({ value }: IPlainProps) => {
-	const { colors } = useTheme();
+	const { theme } = useTheme();
 	return (
-		<Text accessibilityLabel={value} style={[styles.plainText, { color: colors.bodyText }]}>
+		<Text accessibilityLabel={value} style={[styles.plainText, { color: themes[theme].bodyText }]}>
 			{value}
 		</Text>
 	);

app/containers/markdown/new/Quote.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { Quote as QuoteProps } from '@rocket.chat/message-parser';
 
+import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 import styles from '../styles';
 import Paragraph from './Paragraph';
@@ -11,10 +12,10 @@ interface IQuoteProps {
 }
 
 const Quote = ({ value }: IQuoteProps) => {
-	const { colors } = useTheme();
+	const { theme } = useTheme();
 	return (
 		<View style={styles.container}>
-			<View style={[styles.quote, { backgroundColor: colors.borderColor }]} />
+			<View style={[styles.quote, { backgroundColor: themes[theme].borderColor }]} />
 			<View style={styles.childContainer}>
 				{value.map(item => (
 					<Paragraph value={item.value} />

app/containers/markdown/new/TaskList.tsx

@@ -4,6 +4,7 @@ import { Tasks as TasksProps } from '@rocket.chat/message-parser';
 
 import Inline from './Inline';
 import styles from '../styles';
+import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 
 interface ITasksProps {
@@ -11,12 +12,12 @@ interface ITasksProps {
 }
 
 const TaskList = ({ value = [] }: ITasksProps) => {
-	const { colors } = useTheme();
+	const { theme } = useTheme();
 	return (
 		<View>
 			{value.map(item => (
 				<View style={styles.row}>
-					<Text style={[styles.text, { color: colors.bodyText }]}>{item.status ? '- [x] ' : '- [ ] '}</Text>
+					<Text style={[styles.text, { color: themes[theme].bodyText }]}>{item.status ? '- [x] ' : '- [ ] '}</Text>
 					<Inline value={item.value} />
 				</View>
 			))}

app/containers/markdown/new/UnorderedList.tsx

@@ -4,6 +4,7 @@ import { View, Text } from 'react-native';
 
 import Inline from './Inline';
 import styles from '../styles';
+import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 
 interface IUnorderedListProps {
@@ -11,12 +12,12 @@ interface IUnorderedListProps {
 }
 
 const UnorderedList = ({ value }: IUnorderedListProps) => {
-	const { colors } = useTheme();
+	const { theme } = useTheme();
 	return (
 		<View>
 			{value.map(item => (
 				<View style={styles.row}>
-					<Text style={[styles.text, { color: colors.bodyText }]}>- </Text>
+					<Text style={[styles.text, { color: themes[theme].bodyText }]}>- </Text>
 					<Inline value={item.value} />
 				</View>
 			))}

app/containers/message/Audio.tsx

@@ -280,6 +280,7 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 					baseUrl={baseUrl}
 					username={user.username}
 					getCustomEmoji={getCustomEmoji}
+					theme={theme}
 				/>
 				<View
 					style={[

app/containers/message/Components/CollapsibleQuote/index.tsx

@@ -100,6 +100,7 @@ const Fields = React.memo(
 							baseUrl={baseUrl}
 							username={user.username}
 							getCustomEmoji={getCustomEmoji}
+							theme={theme}
 							style={[styles.markdownFontSize]}
 						/>
 					</View>

app/containers/message/Content.tsx

@@ -63,6 +63,7 @@ const Content = React.memo(
 					navToRoomInfo={props.navToRoomInfo}
 					tmid={props.tmid}
 					useRealName={props.useRealName}
+					theme={theme}
 					onLinkPress={onLinkPress}
 				/>
 			);

app/containers/message/Image.tsx

@@ -83,6 +83,7 @@ const ImageContainer = React.memo(
 							baseUrl={baseUrl}
 							username={user.username}
 							getCustomEmoji={getCustomEmoji}
+							theme={theme}
 						/>
 						<MessageImage imgUri={img} theme={theme} />
 					</View>

app/containers/message/Reply.tsx

@@ -131,6 +131,7 @@ const Description = React.memo(
 				baseUrl={baseUrl}
 				username={user.username}
 				getCustomEmoji={getCustomEmoji}
+				theme={theme}
 			/>
 		);
 	},
@@ -183,7 +184,13 @@ const Fields = React.memo(
 				{attachment.fields.map(field => (
 					<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
 						<Text style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>{field.title}</Text>
-						<Markdown msg={field?.value || ''} baseUrl={baseUrl} username={user.username} getCustomEmoji={getCustomEmoji} />
+						<Markdown
+							msg={field?.value || ''}
+							baseUrl={baseUrl}
+							username={user.username}
+							getCustomEmoji={getCustomEmoji}
+							theme={theme}
+						/>
 					</View>
 				))}
 			</View>
@@ -264,7 +271,13 @@ const Reply = React.memo(
 						) : null}
 					</View>
 				</Touchable>
-				<Markdown msg={attachment.description} baseUrl={baseUrl} username={user.username} getCustomEmoji={getCustomEmoji} />
+				<Markdown
+					msg={attachment.description}
+					baseUrl={baseUrl}
+					username={user.username}
+					getCustomEmoji={getCustomEmoji}
+					theme={theme}
+				/>
 			</>
 		);
 	},

app/containers/message/Video.tsx

@@ -83,6 +83,7 @@ const Video = React.memo(
 					username={user.username}
 					getCustomEmoji={getCustomEmoji}
 					style={[isReply && style]}
+					theme={theme}
 				/>
 				<Touchable
 					disabled={isReply}

app/definitions/IEmoji.ts

@@ -18,7 +18,6 @@ export interface ICustomEmoji {
 	baseUrl?: string;
 	emoji: IEmoji;
 	style: StyleProp<ImageStyle>;
-	testID?: string;
 }
 
 export interface ICustomEmojiModel {

app/views/CannedResponseDetail.tsx

@@ -84,7 +84,7 @@ const Item = ({ label, content, theme, testID }: IItem) =>
 			<Text accessibilityLabel={label} style={[styles.itemLabel, { color: themes[theme].titleText }]}>
 				{label}
 			</Text>
-			<Markdown style={[styles.itemContent, { color: themes[theme].auxiliaryText }]} msg={content} />
+			<Markdown style={[styles.itemContent, { color: themes[theme].auxiliaryText }]} msg={content} theme={theme} />
 		</View>
 	) : null;
 

app/views/E2EHowItWorksView.tsx

@@ -40,10 +40,10 @@ class E2EHowItWorksView extends React.Component<TE2EHowItWorksViewProps, any> {
 
 		return (
 			<SafeAreaView style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]} testID='e2e-how-it-works-view'>
-				<Markdown msg={I18n.t('E2E_How_It_Works_info1')} style={infoStyle} />
+				<Markdown msg={I18n.t('E2E_How_It_Works_info1')} style={infoStyle} theme={theme} />
-				<Markdown msg={I18n.t('E2E_How_It_Works_info2')} style={infoStyle} />
+				<Markdown msg={I18n.t('E2E_How_It_Works_info2')} style={infoStyle} theme={theme} />
-				<Markdown msg={I18n.t('E2E_How_It_Works_info3')} style={infoStyle} />
+				<Markdown msg={I18n.t('E2E_How_It_Works_info3')} style={infoStyle} theme={theme} />
-				<Markdown msg={I18n.t('E2E_How_It_Works_info4')} style={infoStyle} />
+				<Markdown msg={I18n.t('E2E_How_It_Works_info4')} style={infoStyle} theme={theme} />
 			</SafeAreaView>
 		);
 	}

app/views/InviteUsersView/index.tsx

@@ -23,7 +23,7 @@ const InviteUsersView = ({ route, navigation }: IInviteUsersViewProps): React.Re
 	const rid = route.params?.rid;
 	const timeDateFormat = useSelector((state: IApplicationState) => state.settings.Message_TimeAndDateFormat as string);
 	const invite = useSelector((state: IApplicationState) => state.inviteLinks.invite);
-	const { colors } = useTheme();
+	const { colors, theme } = useTheme();
 	const dispatch = useDispatch();
 
 	useEffect(() => {
@@ -81,7 +81,7 @@ const InviteUsersView = ({ route, navigation }: IInviteUsersViewProps): React.Re
 
 	const renderExpiration = () => {
 		const expirationMessage = linkExpirationText();
-		return <Markdown msg={expirationMessage} />;
+		return <Markdown msg={expirationMessage} theme={theme} />;
 	};
 
 	return (

app/views/RoomInfoView/Item.tsx

@@ -24,7 +24,7 @@ const Item = ({ label, content, testID }: IItem) => {
 			<Text accessibilityLabel={label} style={[styles.itemLabel, { color: themes[theme].titleText }]}>
 				{label}
 			</Text>
-			<Markdown style={[styles.itemContent, { color: themes[theme].auxiliaryText }]} msg={content} />
+			<Markdown style={[styles.itemContent, { color: themes[theme].auxiliaryText }]} msg={content} theme={theme} />
 		</View>
 	);
 };

app/views/RoomView/Banner.tsx

@@ -45,7 +45,7 @@ const Banner = React.memo(
 						<View style={[styles.modalView, { backgroundColor: themes[theme].bannerBackground }]}>
 							<Text style={[styles.bannerModalTitle, { color: themes[theme].auxiliaryText }]}>{title}</Text>
 							<ScrollView style={styles.modalScrollView}>
-								<Markdown msg={text} />
+								<Markdown msg={text} theme={theme} />
 							</ScrollView>
 						</View>
 					</Modal>

app/views/RoomView/LoadMore/LoadMore.stories.js

@@ -6,7 +6,7 @@ import { storiesOf } from '@storybook/react-native';
 import { longText } from '../../../../storybook/utils';
 import { ThemeContext } from '../../../theme';
 import { Message, MessageDecorator, StoryProvider } from '../../../../storybook/stories/Message';
-import { colors, MessageTypeLoad, themes } from '../../../lib/constants';
+import { MessageTypeLoad, themes } from '../../../lib/constants';
 import LoadMore from './index';
 
 const stories = storiesOf('LoadMore', module);
@@ -24,7 +24,7 @@ stories.add('basic', () => (
 ));
 
 const ThemeStory = ({ theme }) => (
-	<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
+	<ThemeContext.Provider value={{ theme }}>
 		<ScrollView style={{ backgroundColor: themes[theme].backgroundColor }}>
 			<LoadMore load={load} type={MessageTypeLoad.PREVIOUS_CHUNK} />
 			<Message msg='Hey!' theme={theme} />

app/views/SearchMessagesView/index.tsx

@@ -334,7 +334,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 						placeholder={I18n.t('Search_Messages')}
 						testID='search-message-view-input'
 					/>
-					<Markdown msg={I18n.t('You_can_search_using_RegExp_eg')} />
+					<Markdown msg={I18n.t('You_can_search_using_RegExp_eg')} theme={theme} />
 					<View style={[styles.divider, { backgroundColor: themes[theme].separatorColor }]} />
 				</View>
 				{this.renderList()}

storybook/stories/Markdown.tsx

@@ -48,11 +48,11 @@ const stories = storiesOf('Markdown', module).addDecorator(story => <Provider st
 
 stories.add('Text', () => (
 	<View style={styles.container}>
-		<Markdown msg='This is Rocket.Chat' />
+		<Markdown msg='This is Rocket.Chat' theme={theme} />
-		<Markdown msg={longText} />
+		<Markdown msg={longText} theme={theme} />
-		<Markdown msg={lineBreakText} />
+		<Markdown msg={lineBreakText} theme={theme} />
-		<Markdown msg={sequentialEmptySpacesText} />
+		<Markdown msg={sequentialEmptySpacesText} theme={theme} />
-		<Markdown msg='Strong emphasis, aka bold, with **asterisks** or __underscores__' />
+		<Markdown msg='Strong emphasis, aka bold, with **asterisks** or __underscores__' theme={theme} />
 	</View>
 ));
 
@@ -71,6 +71,7 @@ stories.add('Mentions', () => (
 	<ScrollView style={styles.container}>
 		<Markdown
 			msg='@rocket.cat @name1 @all @here @unknown'
+			theme={theme}
 			mentions={[
 				{ _id: 'random', name: 'Rocket Cat', username: 'rocket.cat' },
 				{ _id: 'random2', name: 'Name', username: 'name1' },
@@ -81,6 +82,7 @@ stories.add('Mentions', () => (
 		/>
 		<Markdown
 			msg='@rocket.cat @name1 @all @here @unknown'
+			theme={theme}
 			mentions={[
 				{ _id: 'random', name: 'Rocket Cat', username: 'rocket.cat' },
 				{ _id: 'random2', name: 'Name', username: 'name1' },
@@ -95,16 +97,21 @@ stories.add('Mentions', () => (
 
 stories.add('Hashtag', () => (
 	<View style={styles.container}>
-		<Markdown msg='#test-channel #unknown' channels={[{ _id: '123', name: 'test-channel' }]} />
+		<Markdown msg='#test-channel #unknown' theme={theme} channels={[{ _id: '123', name: 'test-channel' }]} />
 	</View>
 ));
 
 stories.add('Emoji', () => (
 	<View style={styles.container}>
-		<Markdown msg='Unicode: 😃😇👍' />
+		<Markdown msg='Unicode: 😃😇👍' theme={theme} />
-		<Markdown msg='Shortnames: :joy::+1:' />
+		<Markdown msg='Shortnames: :joy::+1:' theme={theme} />
-		<Markdown msg='Custom emojis: :react_rocket: :nyan_rocket: :marioparty:' getCustomEmoji={getCustomEmoji} baseUrl={baseUrl} />
+		<Markdown
-		<Markdown msg='😃 :+1: :marioparty:' getCustomEmoji={getCustomEmoji} baseUrl={baseUrl} />
+			msg='Custom emojis: :react_rocket: :nyan_rocket: :marioparty:'
+			theme={theme}
+			getCustomEmoji={getCustomEmoji}
+			baseUrl={baseUrl}
+		/>
+		<Markdown msg='😃 :+1: :marioparty:' theme={theme} getCustomEmoji={getCustomEmoji} baseUrl={baseUrl} />
 	</View>
 ));
 
@@ -113,50 +120,52 @@ stories.add('Block quote', () => (
 		<Markdown
 			msg={`> This is block quote
 this is a normal line`}
+			theme={theme}
 		/>
 	</View>
 ));
 
 stories.add('Links', () => (
 	<View style={styles.container}>
-		<Markdown msg='[Markdown link](https://rocket.chat): `[description](url)`' />
+		<Markdown msg='[Markdown link](https://rocket.chat): `[description](url)`' theme={theme} />
-		<Markdown msg='<https://rocket.chat|Formatted Link>: `<url|description>`' />
+		<Markdown msg='<https://rocket.chat|Formatted Link>: `<url|description>`' theme={theme} />
 	</View>
 ));
 
 stories.add('Image', () => (
 	<View style={styles.container}>
-		<Markdown msg='![alt text](https://play.google.com/intl/en_us/badges/images/badge_new.png)' />
+		<Markdown msg='![alt text](https://play.google.com/intl/en_us/badges/images/badge_new.png)' theme={theme} />
 	</View>
 ));
 
 stories.add('Headers', () => (
 	<View style={styles.container}>
-		<Markdown msg='# Header 1' />
+		<Markdown msg='# Header 1' theme={theme} />
-		<Markdown msg='## Header 2' />
+		<Markdown msg='## Header 2' theme={theme} />
-		<Markdown msg='### Header 3' />
+		<Markdown msg='### Header 3' theme={theme} />
-		<Markdown msg='#### Header 4' />
+		<Markdown msg='#### Header 4' theme={theme} />
-		<Markdown msg='##### Header 5' />
+		<Markdown msg='##### Header 5' theme={theme} />
-		<Markdown msg='###### Header 6' />
+		<Markdown msg='###### Header 6' theme={theme} />
 	</View>
 ));
 
 stories.add('Code', () => (
 	<View style={styles.container}>
-		<Markdown msg='This is `inline code`' />
+		<Markdown msg='This is `inline code`' theme={theme} />
 		<Markdown
 			msg='Inline `code` has `back-ticks around` it.
 ```
 Code block
 ```'
+			theme={theme}
 		/>
 	</View>
 ));
 
 stories.add('Lists', () => (
 	<View style={styles.container}>
-		<Markdown msg={'* Open Source\n* Rocket.Chat\n  - nodejs\n  - ReactNative'} />
+		<Markdown msg={'* Open Source\n* Rocket.Chat\n  - nodejs\n  - ReactNative'} theme={theme} />
-		<Markdown msg={'1. Open Source\n2. Rocket.Chat'} />
+		<Markdown msg={'1. Open Source\n2. Rocket.Chat'} theme={theme} />
 	</View>
 ));
 
@@ -167,6 +176,7 @@ stories.add('Table', () => (
 ------------ | -------------
 Content from cell 1 | Content from cell 2
 Content in the first column | Content in the second column'
+			theme={theme}
 		/>
 	</View>
 ));

storybook/stories/__snapshots__/Avatar.storyshot

@@ -18,7 +18,7 @@ exports[`Storyshots Avatar Custom style 1`] = `"{\\"type\\":\\"View\\",\\"props\
 
 exports[`Storyshots Avatar Direct 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
 
-exports[`Storyshots Avatar Emoji 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":30,\\"height\\":30},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"testID\\":\\"avatar-custom-emoji\\",\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/troll.jpg\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]}]}"`;
+exports[`Storyshots Avatar Emoji 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":30,\\"height\\":30},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/troll.jpg\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]}]}"`;
 
 exports[`Storyshots Avatar Static 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;