Tweaks and optimization

app/containers/EmojiPicker/EmojiCategory.tsx

@@ -13,25 +13,20 @@ import { isIOS } from '../../lib/methods/helpers';
 const MAX_EMOJI_SIZE = 50;
 
 interface IEmojiProps {
-	emoji: IEmoji;
+	emoji: string | IEmoji;
 	size: number;
 	baseUrl: string;
 }
 
 const Emoji = React.memo(({ emoji, size, baseUrl }: IEmojiProps) => {
-	if (emoji?.isCustom || emoji?.name) {
+	if (typeof emoji === 'string')
 		return (
-			<CustomEmoji
+			<Text style={[styles.categoryEmoji, { height: size, width: size, fontSize: size - 14 }]}>
-				style={[styles.customCategoryEmoji, { height: size - 16, width: size - 16 }]}
+				{shortnameToUnicode(`:${emoji}:`)}
-				emoji={emoji}
+			</Text>
-				baseUrl={baseUrl}
-			/>
 		);
-	}
 	return (
-		<Text style={[styles.categoryEmoji, { height: size, width: size, fontSize: size - 14 }]}>
+		<CustomEmoji style={[styles.customCategoryEmoji, { height: size - 16, width: size - 16 }]} emoji={emoji} baseUrl={baseUrl} />
-			{shortnameToUnicode(`:${emoji}:`)}
-		</Text>
 	);
 });
 
@@ -64,7 +59,7 @@ const EmojiCategory = ({ baseUrl, onEmojiSelected, emojis, width, tabsCount }: I
 			// rerender FlatList in case of width changes
 			key={`emoji-category-${width}`}
 			// @ts-ignore
-			keyExtractor={item => (item && item.isCustom && item.content) || item}
+			keyExtractor={item => (item?.isCustom && item.content) || item}
 			data={emojis}
 			extraData={{ baseUrl, width }}
 			renderItem={({ item }) => renderItem(item)}

app/containers/EmojiPicker/frequentlyUsedEmojis.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import orderBy from 'lodash/orderBy';
+
+import database from '../../lib/database';
+import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
+import { IEmoji } from '../../definitions';
+
+const useFrequentlyUsedEmoji = (): {
+	frequentlyUsed: (string | IEmoji)[];
+	loaded: boolean;
+} => {
+	const [frequentlyUsed, setFrequentlyUsed] = useState<(string | IEmoji)[]>([]);
+	const [loaded, setLoaded] = useState(false);
+	const getFrequentlyUsedEmojis = async () => {
+		const db = database.active;
+		const frequentlyUsedRecords = await db.get('frequently_used_emojis').query().fetch();
+		const frequentlyUsedOrdered = orderBy(frequentlyUsedRecords, ['count'], ['desc']);
+		const frequentlyUsedEmojis = frequentlyUsedOrdered.map(item => {
+			if (item.isCustom) {
+				return { content: item.content, extension: item.extension, isCustom: item.isCustom };
+			}
+			return shortnameToUnicode(`${item.content}`);
+		}) as (string | IEmoji)[];
+		setFrequentlyUsed(frequentlyUsedEmojis);
+		setLoaded(true);
+	};
+	useEffect(() => {
+		getFrequentlyUsedEmojis();
+	}, []);
+	return { frequentlyUsed, loaded };
+};
+
+export default useFrequentlyUsedEmoji;

app/containers/EmojiPicker/index.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { View } from 'react-native';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
-import orderBy from 'lodash/orderBy';
 import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord';
 
 import TabBar from './TabBar';
@@ -18,28 +17,7 @@ import { useTheme } from '../../theme';
 import { IEmoji, ICustomEmojis, TFrequentlyUsedEmojiModel } from '../../definitions';
 import { useAppSelector } from '../../lib/hooks';
 import { IEmojiPickerProps, EventTypes } from './interfaces';
-
+import useFrequentlyUsedEmoji from './frequentlyUsedEmojis';
-export const useFrequentlyUsedEmoji = () => {
-	const [frequentlyUsed, setFrequentlyUsed] = useState<(string | IEmoji)[]>([]);
-	const [loaded, setLoaded] = useState(false);
-	const getFrequentlyUsedEmojis = async () => {
-		const db = database.active;
-		const frequentlyUsedRecords = await db.get('frequently_used_emojis').query().fetch();
-		const frequentlyUsedOrdered = orderBy(frequentlyUsedRecords, ['count'], ['desc']);
-		const frequentlyUsedEmojis = frequentlyUsedOrdered.map(item => {
-			if (item.isCustom) {
-				return { content: item.content, extension: item.extension, isCustom: item.isCustom };
-			}
-			return shortnameToUnicode(`${item.content}`);
-		}) as (string | IEmoji)[];
-		setFrequentlyUsed(frequentlyUsedEmojis);
-		setLoaded(true);
-	};
-	useEffect(() => {
-		getFrequentlyUsedEmojis();
-	}, []);
-	return { frequentlyUsed, loaded };
-};
 
 const EmojiPicker = ({
 	onItemClicked,
@@ -66,26 +44,6 @@ const EmojiPicker = ({
 		[allCustomEmojis]
 	);
 
-	const handleEmojiSelect = (emoji: IEmoji) => {
-		try {
-			if (emoji.isCustom) {
-				_addFrequentlyUsed({
-					content: emoji.content,
-					extension: emoji.extension,
-					isCustom: true
-				});
-				onItemClicked(EventTypes.EMOJI_PRESSED, `:${emoji.content}:`);
-			} else {
-				const content = emoji;
-				_addFrequentlyUsed({ content, isCustom: false });
-				const shortname = `:${emoji}:`;
-				onItemClicked(EventTypes.EMOJI_PRESSED, shortnameToUnicode(shortname), shortname);
-			}
-		} catch (e) {
-			log(e);
-		}
-	};
-
 	const _addFrequentlyUsed = protectedFunction(async (emoji: IEmoji) => {
 		const db = database.active;
 		const freqEmojiCollection = db.get('frequently_used_emojis');
@@ -113,6 +71,25 @@ const EmojiPicker = ({
 		});
 	});
 
+	const handleEmojiSelect = (emoji: IEmoji) => {
+		try {
+			if (emoji.isCustom) {
+				_addFrequentlyUsed({
+					content: emoji.content,
+					extension: emoji.extension,
+					isCustom: true
+				});
+				onItemClicked(EventTypes.EMOJI_PRESSED, `:${emoji.content}:`);
+			} else {
+				_addFrequentlyUsed({ content: emoji, isCustom: false });
+				const shortname = `:${emoji}:`;
+				onItemClicked(EventTypes.EMOJI_PRESSED, shortnameToUnicode(shortname), shortname);
+			}
+		} catch (e) {
+			log(e);
+		}
+	};
+
 	const onLayout = ({
 		nativeEvent: {
 			layout: { width }

app/containers/MessageBox/EmojiSearchbar.tsx

@@ -9,12 +9,12 @@ import { IEmoji } from '../../definitions';
 import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
 import styles from './styles';
-import { useFrequentlyUsedEmoji } from '../EmojiPicker';
+import useFrequentlyUsedEmoji from '../EmojiPicker/frequentlyUsedEmojis';
 
 const BUTTON_HIT_SLOP = { top: 15, right: 15, bottom: 15, left: 15 };
 const EMOJI_SIZE = 30;
 const DEFAULT_EMOJIS = ['clap', '+1', 'heart_eyes', 'grinning', 'thinking_face', 'smiley'];
-interface IEmojiSearchbarProps {
+interface IEmojiSearchBarProps {
 	openEmoji: () => void;
 	onChangeText: (value: string) => void;
 	emojis: IEmoji[];
@@ -39,7 +39,7 @@ const Emoji = React.memo(({ emoji, baseUrl }: { emoji: IEmoji; baseUrl: string }
 	);
 });
 
-const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
+const EmojiSearchBar = React.forwardRef<TextInput, IEmojiSearchBarProps>(
 	({ openEmoji, onChangeText, emojis, onEmojiSelected, baseUrl }, ref) => {
 		const { colors } = useTheme();
 		const [searchText, setSearchText] = useState<string>('');
@@ -63,13 +63,14 @@ const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
 			onChangeText(text);
 		};
 
-		const renderItem = (emoji: IEmoji) => (
+		const renderItem = React.memo((emoji: IEmoji) => (
 			<View style={[styles.emojiContainer]}>
 				<Pressable onPress={() => onEmojiSelected(emoji)}>
 					<Emoji emoji={emoji} baseUrl={baseUrl} />
 				</Pressable>
 			</View>
-		);
+		));
+
 		return (
 			<View style={{ borderTopWidth: 1, borderTopColor: colors.borderColor, backgroundColor: colors.backgroundColor }}>
 				<FlatList
@@ -117,4 +118,4 @@ const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
 	}
 );
 
-export default EmojiSearchbar;
+export default EmojiSearchBar;

app/views/RoomView/ReactionPicker.tsx

@@ -25,7 +25,7 @@ interface IReactionPickerProps {
 
 const MAX_EMOJIS_TO_DISPLAY = 20;
 
-const ReactionPicker = React.memo(({ onEmojiSelected, message, reactionClose }: IReactionPickerProps) => {
+const ReactionPicker = ({ onEmojiSelected, message, reactionClose }: IReactionPickerProps): React.ReactElement => {
 	const { colors } = useTheme();
 	const [searchText, setSearchText] = React.useState<string>('');
 	const [searchedEmojis, setSearchedEmojis] = React.useState<(string | IEmoji)[]>([]);
@@ -92,6 +92,6 @@ const ReactionPicker = React.memo(({ onEmojiSelected, message, reactionClose }:
 			<EmojiPicker onItemClicked={handleEmojiSelect} searching={searching} searchedEmojis={searchedEmojis} />
 		</View>
 	);
-});
+};
 
 export default ReactionPicker;