RocketChat · diegolmello · Jul 7, 2026 · Jul 7, 2026 · Jul 7, 2026 · Jul 7, 2026
diff --git a/app/containers/Avatar/Avatar.stories.tsx b/app/containers/Avatar/Avatar.stories.tsx
@@ -1,9 +1,13 @@
 import { StyleSheet } from 'react-native';
 
+import { setCustomEmojis } from '../../actions/customEmojis';
+import { mockedStore } from '../../reducers/mockedStore';
 import Status from '../Status/Status';
 import sharedStyles from '../../views/Styles';
 import Avatar from './Avatar';
 
+mockedStore.dispatch(setCustomEmojis({ troll: { name: 'troll', extension: 'jpg' } }));
+
 const styles = StyleSheet.create({
 	custom: {
 		padding: 16
@@ -40,9 +44,7 @@ export const WithETag = () => (
 
 export const WithoutETag = () => <Avatar type='d' text='djorkaeff.alexandre' server={server} size={56} />;
 
-export const Emoji = () => (
-	<Avatar emoji='troll' getCustomEmoji={() => ({ name: 'troll', extension: 'jpg' })} server={server} size={56} />
-);
+export const Emoji = () => <Avatar emoji='troll' server={server} size={56} />;
 
 export const Direct = () => <Avatar text='diego.mello' server={server} type='d' size={56} />;
 

diff --git a/app/containers/Avatar/Avatar.tsx b/app/containers/Avatar/Avatar.tsx
@@ -7,7 +7,6 @@ import Emoji from '../markdown/components/emoji/Emoji';
 import { getAvatarURL } from '../../lib/methods/helpers/getAvatarUrl';
 import { SubscriptionType } from '../../definitions';
 import { type IAvatar } from './interfaces';
-import MarkdownContext from '../markdown/contexts/MarkdownContext';
 import I18n from '../../i18n';
 import Touch from '../Touch';
 
@@ -21,7 +20,6 @@ const Avatar = memo(
 		token,
 		onPress,
 		emoji,
-		getCustomEmoji,
 		avatarETag,
 		isStatic,
 		rid,
@@ -51,16 +49,11 @@ const Avatar = memo(
 		let image;
 		if (emoji) {
 			image = (
-				<MarkdownContext.Provider
-					value={{
-						getCustomEmoji
-					}}>
-					<Emoji
-						block={{ type: 'EMOJI', value: { type: 'PLAIN_TEXT', value: emoji }, shortCode: emoji }}
-						style={avatarStyle}
-						isAvatar={true}
-					/>
-				</MarkdownContext.Provider>
+				<Emoji
+					block={{ type: 'EMOJI', value: { type: 'PLAIN_TEXT', value: emoji }, shortCode: emoji }}
+					style={avatarStyle}
+					isAvatar={true}
+				/>
 			);
 		} else {
 			let uri = avatar;

diff --git a/app/containers/Avatar/AvatarContainer.tsx b/app/containers/Avatar/AvatarContainer.tsx
@@ -17,7 +17,6 @@ const AvatarContainer = ({
 	type,
 	children,
 	onPress,
-	getCustomEmoji,
 	isStatic,
 	rid,
 	accessibilityLabel,
@@ -61,7 +60,6 @@ const AvatarContainer = ({
 			userId={id}
 			token={token}
 			onPress={onPress}
-			getCustomEmoji={getCustomEmoji}
 			isStatic={isStatic}
 			rid={rid}
 			blockUnauthenticatedAccess={blockUnauthenticatedAccess}

diff --git a/app/containers/Avatar/AvatarWithEdit.tsx b/app/containers/Avatar/AvatarWithEdit.tsx
@@ -39,7 +39,6 @@ const AvatarWithEdit = ({
 	type,
 	children,
 	onPress,
-	getCustomEmoji,
 	isStatic,
 	rid,
 	handleEdit,
@@ -62,7 +61,6 @@ const AvatarWithEdit = ({
 				borderRadius={borderRadius}
 				type={type}
 				onPress={onPress}
-				getCustomEmoji={getCustomEmoji}
 				isStatic={isStatic}
 				rid={rid}>
 				{children}

diff --git a/app/containers/Avatar/interfaces.ts b/app/containers/Avatar/interfaces.ts
@@ -1,8 +1,6 @@
 import { type ReactElement } from 'react';
 import { type ViewStyle } from 'react-native';
 
-import { type TGetCustomEmoji } from '../../definitions/IEmoji';
-
 export interface IAvatar {
 	server?: string;
 	style?: ViewStyle;
@@ -16,7 +14,6 @@ export interface IAvatar {
 	userId?: string;
 	token?: string;
 	onPress?: () => void;
-	getCustomEmoji?: TGetCustomEmoji;
 	avatarETag?: string;
 	isStatic?: boolean | string;
 	rid?: string;

diff --git a/app/containers/ReactionsList/AllTab.tsx b/app/containers/ReactionsList/AllTab.tsx
@@ -4,22 +4,19 @@ import { Text, View, FlatList } from 'react-native';
 import Emoji from '../message/Emoji';
 import { useTheme } from '../../theme';
 import { type IReaction } from '../../definitions';
-import { type TGetCustomEmoji } from '../../definitions/IEmoji';
 import I18n from '../../i18n';
 import styles from './styles';
 import { useAppSelector } from '../../lib/hooks/useAppSelector';
 
 interface IAllReactionsListItemProps {
-	getCustomEmoji: TGetCustomEmoji;
 	item: IReaction;
 }
 
 interface IAllTabProps {
-	getCustomEmoji: TGetCustomEmoji;
 	reactions?: IReaction[];
 }
 
-const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemProps) => {
+const AllReactionsListItem = ({ item }: IAllReactionsListItemProps) => {
 	const { colors } = useTheme();
 	const useRealName = useAppSelector(state => state.settings.UI_Use_Real_Name);
 	const username = useAppSelector(state => state.login.user.username);
@@ -48,7 +45,6 @@ const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemPro
 				content={item.emoji}
 				standardEmojiStyle={styles.allTabStandardEmojiStyle}
 				customEmojiStyle={styles.allTabCustomEmojiStyle}
-				getCustomEmoji={getCustomEmoji}
 			/>
 			<View style={styles.textContainer}>
 				<Text style={[styles.allListNPeopleReacted, { color: colors.fontDefault }]}>
@@ -60,12 +56,12 @@ const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemPro
 	);
 };
 
-const AllTab = ({ reactions, getCustomEmoji }: IAllTabProps): ReactElement => (
+const AllTab = ({ reactions }: IAllTabProps): ReactElement => (
 	<View style={styles.allTabContainer} testID='reactionsListAllTab'>
 		<FlatList
 			data={reactions}
 			contentContainerStyle={styles.listContainer}
-			renderItem={({ item }) => <AllReactionsListItem item={item} getCustomEmoji={getCustomEmoji} />}
+			renderItem={({ item }) => <AllReactionsListItem item={item} />}
 			keyExtractor={item => item.emoji}
 		/>
 	</View>

diff --git a/app/containers/ReactionsList/ReactionsList.stories.tsx b/app/containers/ReactionsList/ReactionsList.stories.tsx
@@ -1,18 +1,17 @@
 import { View } from 'react-native';
 
-import { type TGetCustomEmoji, type ICustomEmoji } from '../../definitions';
 import ReactionsList from '.';
 import { mockedStore as store } from '../../reducers/mockedStore';
 import { updateSettings } from '../../actions/settings';
+import { setCustomEmojis } from '../../actions/customEmojis';
 
-const getCustomEmoji: TGetCustomEmoji = content => {
-	const customEmoji = {
-		marioparty: { name: content, extension: 'gif' },
-		react_rocket: { name: content, extension: 'png' },
-		nyan_rocket: { name: content, extension: 'png' }
-	}[content] as ICustomEmoji;
-	return customEmoji;
-};
+store.dispatch(
+	setCustomEmojis({
+		marioparty: { name: 'marioparty', extension: 'gif' },
+		react_rocket: { name: 'react_rocket', extension: 'png' },
+		nyan_rocket: { name: 'nyan_rocket', extension: 'png' }
+	})
+);
 
 const reactions = [
 	{
@@ -51,7 +50,7 @@ export const ReactionsListStory = () => {
 	store.dispatch(updateSettings('UI_Use_Real_Name', false));
 	return (
 		<View style={{ paddingVertical: 10, flex: 1 }}>
-			<ReactionsList getCustomEmoji={getCustomEmoji} reactions={reactions} />
+			<ReactionsList reactions={reactions} />
 		</View>
 	);
 };
@@ -60,7 +59,7 @@ export const ReactionsListFullName = () => {
 	store.dispatch(updateSettings('UI_Use_Real_Name', true));
 	return (
 		<View style={{ paddingVertical: 10, flex: 1 }}>
-			<ReactionsList getCustomEmoji={getCustomEmoji} reactions={reactions} />
+			<ReactionsList reactions={reactions} />
 		</View>
 	);
 };

diff --git a/app/containers/ReactionsList/ReactionsList.test.tsx b/app/containers/ReactionsList/ReactionsList.test.tsx
@@ -105,16 +105,12 @@ const mockStore = createStore(
 			server: {
 				server: 'https://open.rocket.chat',
 				version: '6.0.0'
-			}
+			},
+			customEmojis: {}
 		}
 	) => state
 );
 
-const mockGetCustomEmoji = (emoji: string) => ({
-	name: emoji,
-	extension: 'png'
-});
-
 const mockReactions: IReaction[] = [
 	{
 		_id: 'reaction1',
@@ -138,13 +134,13 @@ describe('ReactionsList Integration Tests', () => {
 	});
 
 	it('renders empty ReactionsList when no reactions', () => {
-		renderWithRedux(<ReactionsList getCustomEmoji={mockGetCustomEmoji} reactions={[]} />);
+		renderWithRedux(<ReactionsList reactions={[]} />);
 		expect(screen.getByTestId('reactionsList')).toBeOnTheScreen();
 		expect(screen.getByTestId('reactionsListAllTab')).toBeOnTheScreen();
 	});
 
 	it('renders ReactionsList with reactions and allows navigation between tabs', () => {
-		renderWithRedux(<ReactionsList getCustomEmoji={mockGetCustomEmoji} reactions={mockReactions} />);
+		renderWithRedux(<ReactionsList reactions={mockReactions} />);
 
 		// Verify All tab content
 		expect(screen.getByText('4 people reacted')).toBeOnTheScreen();
@@ -185,14 +181,15 @@ describe('ReactionsList Integration Tests', () => {
 					server: {
 						server: 'https://open.rocket.chat',
 						version: '6.0.0'
-					}
+					},
+					customEmojis: {}
 				}
 			) => state
 		);
 
 		render(
 			<Provider store={storeWithoutRealNames}>
-				<ReactionsList getCustomEmoji={mockGetCustomEmoji} reactions={mockReactions} />
+				<ReactionsList reactions={mockReactions} />
 			</Provider>
 		);
 
@@ -227,7 +224,7 @@ describe('ReactionsList Integration Tests', () => {
 			}
 		];
 
-		renderWithRedux(<ReactionsList getCustomEmoji={mockGetCustomEmoji} reactions={customReactions} />);
+		renderWithRedux(<ReactionsList reactions={customReactions} />);
 
 		// Verify custom emoji is rendered
 		expect(screen.getByTestId('tab-:custom_emoji:')).toBeOnTheScreen();

diff --git a/app/containers/ReactionsList/index.tsx b/app/containers/ReactionsList/index.tsx
@@ -1,6 +1,5 @@
 import { Text, View } from 'react-native';
 
-import { type TGetCustomEmoji } from '../../definitions/IEmoji';
 import { type IReaction } from '../../definitions';
 import I18n from '../../i18n';
 import styles from './styles';
@@ -10,7 +9,6 @@ import { TabView } from '../TabView';
 import Emoji from '../message/Emoji';
 
 interface IReactionsListProps {
-	getCustomEmoji: TGetCustomEmoji;
 	reactions?: IReaction[];
 }
 
@@ -50,12 +48,12 @@ const useRoutes = (reactions: IReaction[] | undefined) => {
 	};
 };
 
-const ReactionsList = ({ reactions, getCustomEmoji }: IReactionsListProps) => {
+const ReactionsList = ({ reactions }: IReactionsListProps) => {
 	const { routes, sortedReactions } = useRoutes(reactions);
 
 	const renderScene = ({ route }: { route: IRoute }) => {
 		if (route.key === 'all') {
-			return <AllTab reactions={sortedReactions} getCustomEmoji={getCustomEmoji} />;
+			return <AllTab reactions={sortedReactions} />;
 		}
 		if (route.emoji && route.usernames && route.names) {
 			return <UsersList emoji={route.emoji} usernames={route.usernames} names={route.names} />;
@@ -74,12 +72,7 @@ const ReactionsList = ({ reactions, getCustomEmoji }: IReactionsListProps) => {
 		if (tab.emoji) {
 			return (
 				<View style={styles.tabBarItem}>
-					<Emoji
-						content={tab.emoji}
-						standardEmojiStyle={styles.standardEmojiStyle}
-						customEmojiStyle={styles.customEmojiStyle}
-						getCustomEmoji={getCustomEmoji}
-					/>
+					<Emoji content={tab.emoji} standardEmojiStyle={styles.standardEmojiStyle} customEmojiStyle={styles.customEmojiStyle} />
 					<Text style={[styles.reactionCount, { color }]}>{tab.usernames?.length}</Text>
 				</View>
 			);

diff --git a/app/containers/markdown/Markdown.stories.tsx b/app/containers/markdown/Markdown.stories.tsx
@@ -2,8 +2,9 @@ import { ScrollView, StyleSheet, View } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 
 import Markdown, { MarkdownPreview } from '.';
+import { setCustomEmojis } from '../../actions/customEmojis';
+import { mockedStore } from '../../reducers/mockedStore';
 import { themes } from '../../lib/constants/colors';
-import { type TGetCustomEmoji, type ICustomEmoji } from '../../definitions/IEmoji';
 
 const theme = 'light';
 
@@ -27,14 +28,12 @@ d
 e`;
 const sequentialEmptySpacesText = 'a       b                                                                             c';
 
-const getCustomEmoji: TGetCustomEmoji = content => {
-	const customEmoji = {
-		marioparty: { name: content, extension: 'gif' },
-		react_rocket: { name: content, extension: 'png' },
-		nyan_rocket: { name: content, extension: 'png' }
-	}[content] as ICustomEmoji;
-	return customEmoji;
+const customEmojis = {
+	marioparty: { name: 'marioparty', extension: 'gif' },
+	react_rocket: { name: 'react_rocket', extension: 'png' },
+	nyan_rocket: { name: 'nyan_rocket', extension: 'png' }
 };
+mockedStore.dispatch(setCustomEmojis(customEmojis));
 
 export default {
 	title: 'Markdown',
@@ -94,8 +93,8 @@ export const Emoji = () => (
 	<View style={styles.container}>
 		<Markdown msg='Unicode: 😃😇👍' />
 		<Markdown msg='Shortnames: :joy: :+1:' />
-		<Markdown msg='Custom emojis: :react_rocket: :nyan_rocket: :marioparty:' getCustomEmoji={getCustomEmoji} />
-		<Markdown msg='😃 :+1: :marioparty:' getCustomEmoji={getCustomEmoji} />
+		<Markdown msg='Custom emojis: :react_rocket: :nyan_rocket: :marioparty:' />
+		<Markdown msg='😃 :+1: :marioparty:' />
 	</View>
 );
 

diff --git a/app/containers/markdown/components/emoji/Emoji.tsx b/app/containers/markdown/components/emoji/Emoji.tsx
@@ -1,4 +1,3 @@
-import { useContext } from 'react';
 import { Text, View, useWindowDimensions } from 'react-native';
 import { type Emoji as EmojiProps } from '@rocket.chat/message-parser';
 
@@ -7,8 +6,8 @@ import useShortnameToUnicode from '../../../../lib/hooks/useShortnameToUnicode';
 import { useTheme } from '../../../../theme';
 import styles from '../../styles';
 import CustomEmoji from '../../../EmojiPicker/CustomEmoji';
-import MarkdownContext from '../../contexts/MarkdownContext';
 import { useAppSelector } from '../../../../lib/hooks/useAppSelector';
+import { useCustomEmoji } from '../../../../lib/hooks/useCustomEmoji';
 import { getUserSelector } from '../../../../selectors/login';
 import { useResponsiveLayout } from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
@@ -34,7 +33,7 @@ function getEmojiToken(block: EmojiProps, isAvatar: boolean) {
 
 const Emoji = ({ block, isBigEmoji, style = {}, index, isAvatar = false }: IEmojiProps) => {
 	const { colors } = useTheme();
-	const { getCustomEmoji } = useContext(MarkdownContext);
+	const getCustomEmoji = useCustomEmoji();
 	const { fontScale } = useWindowDimensions();
 	const { fontScaleLimited } = useResponsiveLayout();
 	const { formatShortnameToUnicode } = useShortnameToUnicode();

diff --git a/app/containers/markdown/contexts/MarkdownContext.ts b/app/containers/markdown/contexts/MarkdownContext.ts
@@ -9,7 +9,6 @@ interface IMarkdownContext {
 	useRealName?: boolean;
 	username?: string;
 	navToRoomInfo?: Function;
-	getCustomEmoji?: Function;
 	onLinkPress?: Function;
 	textStyle?: StyleProp<TextStyle>;
 }