fix: mount the emoji searchbar only when it's visible (#7405)

Author: diegolmello

app/containers/MessageComposer/MessageComposer.tsx

@@ -246,6 +246,7 @@ export const MessageComposer = ({
 			<MessageComposerContent
 				recordingAudio={recordingAudio}
 				action={action}
+				showEmojiSearchbar={showEmojiSearchbar}
 				composerInputComponentRef={composerInputComponentRef}
 				composerInputRef={composerInputRef}
 				onLayout={handleLayout}>

app/containers/MessageComposer/components/EmojiSearchbar.tsx

@@ -18,12 +18,12 @@ import { useEmojiKeyboard } from '../hooks/useEmojiKeyboard';
 
 const BUTTON_HIT_SLOP = { top: 4, right: 4, bottom: 4, left: 4 };
 
-export const EmojiSearchbar = (): ReactElement | null => {
+export const EmojiSearchbar = (): ReactElement => {
 	'use memo';
 
 	const { colors } = useTheme();
 	const [searchText, setSearchText] = useState<string>('');
-	const { showEmojiSearchbar, closeEmojiSearchbar } = useEmojiKeyboard();
+	const { closeEmojiSearchbar } = useEmojiKeyboard();
 	const { onEmojiSelected } = useContext(MessageInnerContext);
 	const { frequentlyUsed } = useFrequentlyUsedEmoji(true);
 	const [emojis, setEmojis] = useState<IEmoji[]>([]);
@@ -41,10 +41,6 @@ export const EmojiSearchbar = (): ReactElement | null => {
 
 	const renderItem = ({ item }: { item: IEmoji }) => <PressableEmoji emoji={item} onPress={handleEmojiSelected} />;
 
-	if (!showEmojiSearchbar) {
-		return null;
-	}
-
 	return (
 		<View style={{ backgroundColor: colors.surfaceLight }}>
 			<FlatList

app/containers/MessageComposer/components/MessageComposerContent.tsx

@@ -17,14 +17,15 @@ import { MESSAGE_COMPOSER_EXIT_FOCUS_NATIVE_ID } from '../../../lib/constants/ac
 interface MessageComposerContentProps {
 	recordingAudio: boolean;
 	action: TMessageAction | undefined;
+	showEmojiSearchbar: boolean;
 	composerInputComponentRef: RefObject<IComposerInput>;
 	composerInputRef: RefObject<any>;
 	children?: ReactElement | null;
 	onLayout: (event: LayoutChangeEvent) => void;
 }
 
 export const MessageComposerContent = memo<MessageComposerContentProps>(
-	({ recordingAudio, action, composerInputComponentRef, composerInputRef, children, onLayout }) => {
+	({ recordingAudio, action, showEmojiSearchbar, composerInputComponentRef, composerInputRef, children, onLayout }) => {
 		'use memo';
 
 		const { colors } = useTheme();
@@ -47,7 +48,7 @@ export const MessageComposerContent = memo<MessageComposerContentProps>(
 				</View>
 				<Quotes />
 				<Toolbar />
-				<EmojiSearchbar />
+				{showEmojiSearchbar ? <EmojiSearchbar /> : null}
 				<SendThreadToChannel />
 				{children}
 			</View>