diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx index ee4858bb0be0..6b1546b87056 100644 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx @@ -2,7 +2,8 @@ import type {ListRenderItem} from '@shopify/flash-list'; import lodashDebounce from 'lodash/debounce'; import React, {useCallback} from 'react'; import type {ForwardedRef} from 'react'; -import {View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; +import type {Emoji} from '@assets/emojis/types'; import EmojiPickerMenuItem from '@components/EmojiPicker/EmojiPickerMenuItem'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; @@ -43,25 +44,28 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r } = useEmojiPickerMenu(); const StyleUtils = useStyleUtils(); + const updateEmojiList = (emojiData: EmojiUtils.EmojiPickerList | Emoji[], headerData: number[] = []) => { + setFilteredEmojis(emojiData); + setHeaderIndices(headerData); + + InteractionManager.runAfterInteractions(() => { + requestAnimationFrame(() => { + emojiListRef.current?.scrollToOffset({offset: 0, animated: false}); + }); + }); + }; + /** * Filter the entire list of emojis to only emojis that have the search term in their keywords */ const filterEmojis = lodashDebounce((searchTerm: string) => { const [normalizedSearchTerm, newFilteredEmojiList] = suggestEmojis(searchTerm); - if (emojiListRef.current) { - emojiListRef.current.scrollToOffset({offset: 0, animated: false}); - } - if (normalizedSearchTerm === '') { - setFilteredEmojis(allEmojis); - setHeaderIndices(headerRowIndices); - - return; + updateEmojiList(allEmojis, headerRowIndices); + } else { + updateEmojiList(newFilteredEmojiList ?? [], []); } - - setFilteredEmojis(newFilteredEmojiList ?? []); - setHeaderIndices([]); }, 300); const scrollToHeader = (headerIndex: number) => {