From a96417b2bc1c21f572f3aca795706a8483aa63b4 Mon Sep 17 00:00:00 2001 From: Novikov Denis Yurevich Date: Mon, 28 Oct 2024 19:31:53 +0300 Subject: [PATCH 1/4] fix: empty emojis list in picker on second time and in rare cases on first open --- src/components/EmojiCategory.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/EmojiCategory.tsx b/src/components/EmojiCategory.tsx index 6869a04..687545f 100644 --- a/src/components/EmojiCategory.tsx +++ b/src/components/EmojiCategory.tsx @@ -147,13 +147,15 @@ export const EmojiCategory = React.memo( const [maxIndex, setMaxIndex] = React.useState(0) - // with InteractionManager we can show emojis after interaction is finished - // It helps with delay during category change animation - InteractionManager.runAfterInteractions(() => { - if (maxIndex === 0 && data.length) { - setMaxIndex(minimalEmojisAmountToDisplay) - } - }) + React.useEffect(() => { + const task = requestAnimationFrame(() => { + if (maxIndex === 0 && data.length) { + console.log('### setMaxIndex#1', maxIndex, data.length) + setMaxIndex(minimalEmojisAmountToDisplay) + } + }) + return () => cancelAnimationFrame(task) + }, []) const onEndReached = () => { if (maxIndex <= data.length) { From cb1e6947eb1c05ecef71c877c74eec5139d04f24 Mon Sep 17 00:00:00 2001 From: Novikov Denis Yurevich Date: Mon, 28 Oct 2024 19:31:53 +0300 Subject: [PATCH 2/4] fix: empty emojis list in picker on second time and in rare cases on first open --- src/components/EmojiCategory.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/EmojiCategory.tsx b/src/components/EmojiCategory.tsx index 6869a04..fc15285 100644 --- a/src/components/EmojiCategory.tsx +++ b/src/components/EmojiCategory.tsx @@ -147,13 +147,14 @@ export const EmojiCategory = React.memo( const [maxIndex, setMaxIndex] = React.useState(0) - // with InteractionManager we can show emojis after interaction is finished - // It helps with delay during category change animation - InteractionManager.runAfterInteractions(() => { - if (maxIndex === 0 && data.length) { - setMaxIndex(minimalEmojisAmountToDisplay) - } - }) + React.useEffect(() => { + const task = requestAnimationFrame(() => { + if (maxIndex === 0 && data.length) { + setMaxIndex(minimalEmojisAmountToDisplay) + } + }) + return () => cancelAnimationFrame(task) + }, []) const onEndReached = () => { if (maxIndex <= data.length) { From 4b18d2be943d6eeb6366c3a0655c67ffa572a36c Mon Sep 17 00:00:00 2001 From: Novikov Denis Yurevich Date: Mon, 28 Oct 2024 19:45:04 +0300 Subject: [PATCH 3/4] refactor: bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 84d461a..54cf515 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rn-emoji-keyboard", - "version": "1.7.0", + "version": "1.7.1", "description": "Super performant, lightweight, fully customizable emoji picker. Designated to be user and developer friendly! 💖", "main": "lib/commonjs/index", "module": "lib/module/index", From 5b0c4c7cdbd415431d82e46d6ddcbb98dc39e86b Mon Sep 17 00:00:00 2001 From: Novikov Denis Yurevich Date: Mon, 28 Oct 2024 20:09:53 +0300 Subject: [PATCH 4/4] fix: return back runAfterInteractions because it needed for displaying of selected category emojis --- src/components/EmojiCategory.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/EmojiCategory.tsx b/src/components/EmojiCategory.tsx index fc15285..0034dab 100644 --- a/src/components/EmojiCategory.tsx +++ b/src/components/EmojiCategory.tsx @@ -147,6 +147,15 @@ export const EmojiCategory = React.memo( const [maxIndex, setMaxIndex] = React.useState(0) + // with InteractionManager we can show emojis after interaction is finished + // It helps with delay during category change animation + InteractionManager.runAfterInteractions(() => { + if (maxIndex === 0 && data.length) { + setMaxIndex(minimalEmojisAmountToDisplay) + } + }) + + // To prevent situation with zero maxIndex on next picker openings React.useEffect(() => { const task = requestAnimationFrame(() => { if (maxIndex === 0 && data.length) {