Remove wrong use of memo and some requested changes

app/containers/EmojiPicker/Footer.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { View, Pressable } from 'react-native';
-import { BorderlessButton } from 'react-native-gesture-handler';
 
 import { useTheme } from '../../theme';
 import { CustomIcon } from '../CustomIcon';
@@ -9,19 +8,22 @@ import { IFooterProps } from './interfaces';
 
 const BUTTON_HIT_SLOP = { top: 15, right: 15, bottom: 15, left: 15 };
 
-const Footer = React.memo(({ onSearchPressed, onBackspacePressed }: IFooterProps) => {
+const Footer = ({ onSearchPressed, onBackspacePressed }: IFooterProps): React.ReactElement => {
 	const { colors } = useTheme();
 	return (
 		<View style={[styles.footerContainer, { backgroundColor: colors.bannerBackground }]}>
-			<BorderlessButton activeOpacity={0.7} onPress={onSearchPressed} style={styles.footerButtonsContainer}>
+			<Pressable
+				onPress={onSearchPressed}
+				hitSlop={BUTTON_HIT_SLOP}
+				style={({ pressed }) => [[styles.footerButtonsContainer, { opacity: pressed ? 0.7 : 1 }]]}>
 				<CustomIcon color={colors.auxiliaryTintColor} size={24} name='search' />
-			</BorderlessButton>
+			</Pressable>
 
 			<Pressable onPress={onBackspacePressed} hitSlop={BUTTON_HIT_SLOP} style={({ pressed }) => [{ opacity: pressed ? 0.7 : 1 }]}>
 				<CustomIcon color={colors.auxiliaryTintColor} size={24} name='backspace' />
 			</Pressable>
 		</View>
 	);
-});
+};
 
 export default Footer;

app/containers/EmojiPicker/TabBar.tsx

@@ -24,7 +24,7 @@ const TabBar = ({ activeTab, tabs, goToPage }: ITabBarProps): React.ReactElement
 							backgroundColor: isIOS && pressed ? colors.bannerBackground : 'transparent'
 						}
 					]}>
-					<CustomIcon name={tab} size={24} color={colors.titleText} />
+					<CustomIcon name={tab} size={24} color={activeTab === i ? colors.tintColor : colors.auxiliaryTintColor} />
 					<View style={activeTab === i ? [styles.activeTabLine, { backgroundColor: colors.tintColor }] : styles.tabLine} />
 				</Pressable>
 			))}

app/containers/EmojiPicker/index.tsx

@@ -19,7 +19,7 @@ import { IEmoji, ICustomEmojis, TFrequentlyUsedEmojiModel } from '../../definiti
 import { useAppSelector } from '../../lib/hooks';
 import { IEmojiPickerProps, EventTypes } from './interfaces';
 
-const useFrequentlyUsedEmoji = () => {
+export const useFrequentlyUsedEmoji = () => {
 	const [frequentlyUsed, setFrequentlyUsed] = useState<IEmoji[]>([]);
 	const [loaded, setLoaded] = useState(false);
 	const getFrequentlyUsedEmojis = async () => {
@@ -41,8 +41,13 @@ const useFrequentlyUsedEmoji = () => {
 	return { frequentlyUsed, loaded };
 };
 
-const EmojiPicker = React.memo(
-	({ onItemClicked, tabEmojiStyle, isEmojiKeyboard = false, searching = false, searchedEmojis = [] }: IEmojiPickerProps) => {
+const EmojiPicker = ({
+	onItemClicked,
+	tabEmojiStyle,
+	isEmojiKeyboard = false,
+	searching = false,
+	searchedEmojis = []
+}: IEmojiPickerProps): React.ReactElement | null => {
 	const [width, setWidth] = useState(null);
 	const { colors } = useTheme();
 	const { frequentlyUsed, loaded } = useFrequentlyUsedEmoji();
@@ -180,7 +185,6 @@ const EmojiPicker = React.memo(
 			)}
 		</View>
 	);
-	}
-);
+};
 
 export default EmojiPicker;

app/containers/MessageBox/EmojiSearchbar.tsx

@@ -13,6 +13,7 @@ import database from '../../lib/database';
 import styles from './styles';
 
 const BUTTON_HIT_SLOP = { top: 15, right: 15, bottom: 15, left: 15 };
+const EMOJI_SIZE = 30;
 
 interface IEmojiSearchbarProps {
 	openEmoji: () => void;
@@ -22,12 +23,17 @@ interface IEmojiSearchbarProps {
 	baseUrl: string;
 }
 
-const renderEmoji = (emoji: IEmoji, size: number, baseUrl: string) => {
+const Emoji = React.memo(({ emoji, baseUrl }: { emoji: IEmoji; baseUrl: string }) => {
+	const { colors } = useTheme();
 	if (emoji?.name) {
-		return <CustomEmoji style={{ height: size, width: size, margin: 4 }} emoji={emoji} baseUrl={baseUrl} />;
+		return <CustomEmoji style={{ height: EMOJI_SIZE, width: EMOJI_SIZE, margin: 4 }} emoji={emoji} baseUrl={baseUrl} />;
 	}
-	return <Text style={[styles.searchedEmoji, { fontSize: size }]}>{shortnameToUnicode(`:${emoji}:`)}</Text>;
-};
+	return (
+		<Text style={[styles.searchedEmoji, { fontSize: EMOJI_SIZE, color: colors.backdropColor }]}>
+			{shortnameToUnicode(`:${emoji}:`)}
+		</Text>
+	);
+});
 
 const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
 	({ openEmoji, onChangeText, emojis, onEmojiSelected, baseUrl }, ref) => {
@@ -59,14 +65,13 @@ const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
 			if (!text) getFrequentlyUsedEmojis();
 		};
 
-		const renderItem = (emoji: IEmoji) => {
-			const emojiSize = 30;
-			return (
+		const renderItem = (emoji: IEmoji) => (
 			<View style={[styles.emojiContainer]}>
-					<Pressable onPress={() => onEmojiSelected(emoji)}>{renderEmoji(emoji, emojiSize, baseUrl)}</Pressable>
+				<Pressable onPress={() => onEmojiSelected(emoji)}>
+					<Emoji emoji={emoji} baseUrl={baseUrl} />
+				</Pressable>
 			</View>
 		);
-		};
 		return (
 			<View style={{ borderTopWidth: 1, borderTopColor: colors.borderColor, backgroundColor: colors.backgroundColor }}>
 				<FlatList

app/containers/MessageBox/index.tsx

@@ -166,7 +166,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 
 	private typingTimeout: any;
 
-	private emojiSearchbarRef: any;
+	private emojiSearchbarRef: React.RefObject<RNTextInput>;
 
 	static defaultProps = {
 		message: {
@@ -627,7 +627,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 			case EventTypes.SEARCH_PRESSED:
 				this.setState({ showEmojiKeyboard: false, showEmojiSearchbar: true });
 				setTimeout(() => {
-					this.emojiSearchbarRef.current.focus();
+					this.emojiSearchbarRef.current?.focus();
 				}, 400);
 				break;
 			default:
@@ -930,6 +930,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 	openEmoji = () => {
 		logEvent(events.ROOM_OPEN_EMOJI);
 		this.setState({ showEmojiKeyboard: true, showEmojiSearchbar: false });
+		this.stopTrackingMention();
 	};
 
 	recordingCallback = (recording: any) => {

app/containers/MessageBox/styles.ts

@@ -159,8 +159,7 @@ export default StyleSheet.create({
 		...sharedStyles.textRegular
 	},
 	searchedEmoji: {
-		backgroundColor: 'transparent',
-		color: '#ffffff'
+		backgroundColor: 'transparent'
 	},
 	emojiContainer: { justifyContent: 'center', marginHorizontal: 2 },
 	emojiListContainer: { height: 50, paddingHorizontal: 5, marginVertical: 5, flexGrow: 1 },
@@ -172,7 +171,7 @@ export default StyleSheet.create({
 		alignItems: 'center'
 	},
 	openEmojiKeyboard: { marginHorizontal: 10, justifyContent: 'center' },
-	emojiSearchbar: { padding: 10, borderRadius: 5 },
+	emojiSearchbar: { paddingHorizontal: 20, borderRadius: 2, fontSize: 16 },
 	textInputContainer: { justifyContent: 'center', marginBottom: 0, marginRight: 15 },
 	listEmptyComponent: {
 		width: '100%',

app/views/RoomView/ReactionPicker.tsx

@@ -73,7 +73,7 @@ const ReactionPicker = React.memo(({ onEmojiSelected, message, reactionClose }:
 	};
 
 	return (
-		<View style={[styles.reactionPickerContainer]} testID='reaction-picker'>
+		<View style={styles.reactionPickerContainer} testID='reaction-picker'>
 			<View style={styles.searchbarContainer}>
 				<FormTextInput
 					autoCapitalize='none'

app/views/RoomView/index.tsx

@@ -831,7 +831,6 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 	showReactionPicker = () => {
 		const { showActionSheet, width, height } = this.props;
 		const { reacting, selectedMessage } = this.state;
-		showActionSheet &&
 		showActionSheet({
 			children: (
 				<ReactionPicker