From 9cae202fec631e82fb8fdfe8c661047cb3fccdce Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 19 Sep 2024 17:04:39 +0700 Subject: [PATCH 1/2] fix category selector button not working --- .../EmojiPicker/EmojiPickerMenu/index.native.tsx | 7 +------ src/components/EmojiPicker/EmojiPickerMenu/index.tsx | 6 ++---- .../EmojiPicker/EmojiPickerMenu/useEmojiPickerMenu.ts | 5 ++--- 3 files changed, 5 insertions(+), 13 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx index b5b4c2d7e71c..3ca4d3bb5545 100644 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx @@ -3,7 +3,6 @@ import lodashDebounce from 'lodash/debounce'; import React, {useCallback} from 'react'; import type {ForwardedRef} from 'react'; import {View} from 'react-native'; -import {runOnUI, scrollTo} from 'react-native-reanimated'; import EmojiPickerMenuItem from '@components/EmojiPicker/EmojiPickerMenuItem'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; @@ -67,11 +66,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r const scrollToHeader = (headerIndex: number) => { const calculatedOffset = Math.floor(headerIndex / CONST.EMOJI_NUM_PER_ROW) * CONST.EMOJI_PICKER_HEADER_HEIGHT; - runOnUI(() => { - 'worklet'; - - scrollTo(emojiListRef, 0, calculatedOffset, true); - })(); + emojiListRef.current?.scrollToOffset({offset: calculatedOffset, animated: true}); }; /** diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx index 92c35d7c7685..a1c1888286ff 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx @@ -114,9 +114,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r const filterEmojis = throttle((searchTerm: string) => { const [normalizedSearchTerm, newFilteredEmojiList] = suggestEmojis(searchTerm); - if (emojiListRef.current) { - scrollTo(emojiListRef, 0, 0, false); - } + emojiListRef.current?.scrollToOffset({offset: 0, animated: false}); if (normalizedSearchTerm === '') { // There are no headers when searching, so we need to re-make them sticky when there is no search term setFilteredEmojis(allEmojis); @@ -241,7 +239,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r } const calculatedOffset = Math.floor(headerIndex / CONST.EMOJI_NUM_PER_ROW) * CONST.EMOJI_PICKER_HEADER_HEIGHT; - scrollTo(emojiListRef, 0, calculatedOffset, true); + emojiListRef.current?.scrollToOffset({offset: calculatedOffset, animated: true}); }, [emojiListRef], ); diff --git a/src/components/EmojiPicker/EmojiPickerMenu/useEmojiPickerMenu.ts b/src/components/EmojiPicker/EmojiPickerMenu/useEmojiPickerMenu.ts index 9b60d15b3833..0d8acd5eef38 100644 --- a/src/components/EmojiPicker/EmojiPickerMenu/useEmojiPickerMenu.ts +++ b/src/components/EmojiPicker/EmojiPickerMenu/useEmojiPickerMenu.ts @@ -1,6 +1,5 @@ import type {FlashList} from '@shopify/flash-list'; -import {useCallback, useEffect, useMemo, useState} from 'react'; -import {useAnimatedRef} from 'react-native-reanimated'; +import {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import emojis from '@assets/emojis'; import {useFrequentlyUsedEmojis} from '@components/OnyxProvider'; import useLocalize from '@hooks/useLocalize'; @@ -10,7 +9,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions'; import * as EmojiUtils from '@libs/EmojiUtils'; const useEmojiPickerMenu = () => { - const emojiListRef = useAnimatedRef>(); + const emojiListRef = useRef>(null); const frequentlyUsedEmojis = useFrequentlyUsedEmojis(); // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps const allEmojis = useMemo(() => EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis), [frequentlyUsedEmojis]); From 76f856e61e46a409ae26f4f4679757bb91f63d2f Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 19 Sep 2024 17:12:41 +0700 Subject: [PATCH 2/2] lint --- src/components/EmojiPicker/EmojiPickerMenu/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx index a1c1888286ff..d6c1e1f92551 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx @@ -3,7 +3,6 @@ import throttle from 'lodash/throttle'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {ForwardedRef} from 'react'; import {View} from 'react-native'; -import {scrollTo} from 'react-native-reanimated'; import EmojiPickerMenuItem from '@components/EmojiPicker/EmojiPickerMenuItem'; import Text from '@components/Text'; import TextInput from '@components/TextInput';