Empty emojis

[dehimer]

Describe the bug I am using 1.7.0 version with 0.71.8 react native version. Repeatable on real iOS device (iPhone 12 mini) and in sumulator. Opened picker displaying non visible list of emojis. But categories bar is displayed and switching between categories changes nothing. Something at first open all fine - I see list of emojis. But next openings on other screens with problem.

To Reproduce Steps to reproduce the behavior:

1. Open picker as usual
2. No emojis in picker

Expected behavior Stable displaying of set of emojis

Screenshots

Smartphone (please complete the following information):

• iOS 17.2 on simulator (iPhone 12 mini)
• iOS 18.0.1 on real iPhone 12 mini

[dehimer]

I am tried next also without success:

1. Made single instance of component in Root component
2. Rendering of component only if state is open

[efstathiosntonas]

@dehimer this is probably an onLayout not working well

probably this line: https://github.com/TheWidlarzGroup/rn-emoji-keyboard/blob/afbc1ee871de0b32beb375bdc6675b971fb233ae/src/components/EmojiStaticKeyboard.tsx#L138

can you navigate to node_modules to that file and set a static width eg. 300?

[dehimer]

Found a string with problem 171: const flatListData = data.slice(0, maxIndex) in EmojiCategory.tsx file

Somehow maxIndex is 0

If I remove .slice part - all works fine. Will look further and prepare MR

[dehimer]

So, found a problem

// 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)
      }
    })

is not running next times

So locally replaced it by:

React.useEffect(() => {
      const task = requestAnimationFrame(() => {
        if (maxIndex === 0 && data.length) {
          console.log('### setMaxIndex#1', maxIndex, data.length)
          setMaxIndex(minimalEmojisAmountToDisplay)
        }
      })
      return () => cancelAnimationFrame(task)
    }, [])

Now working good

[dehimer]

Here a fix https://github.com/TheWidlarzGroup/rn-emoji-keyboard/pull/195

[dehimer]

@dehimer this is probably an onLayout not working well

probably this line:

https://github.com/TheWidlarzGroup/rn-emoji-keyboard/blob/afbc1ee871de0b32beb375bdc6675b971fb233ae/src/components/EmojiStaticKeyboard.tsx#L138

can you navigate to node_modules to that file and set a static width eg. 300?

Sorry, saw your message too late

[Abhinav-kk]

Hi, I am facing this issue that emojis are not appearing. Could you push a fix with an update?

[MarlonEnglemam]

as of december 5 this is still happening to me. It seems like the cause was found, right?

[vincentzierigen]

The fix works, can someone merge it please?

[vincentzierigen]

The only thing is that if you go to a category and then come back, they still appear as blank, the fix only works when you go forward to a new category not backwards

[hlus]

Solution is not working, I've made a patch file (I've also exported DeleteButton):

diff --git a/node_modules/rn-emoji-keyboard/lib/typescript/index.d.ts b/node_modules/rn-emoji-keyboard/lib/typescript/index.d.ts
index 889df90..277c8b4 100644
--- a/node_modules/rn-emoji-keyboard/lib/typescript/index.d.ts
+++ b/node_modules/rn-emoji-keyboard/lib/typescript/index.d.ts
@@ -1,5 +1,6 @@
 import { EmojiPicker } from './EmojiPicker';
 import { EmojiKeyboard } from './EmojiKeyboard';
+export { DeleteButton } from './components/DeleteButton';
 import { useRecentPicksPersistence } from './hooks/useRecentPicksPersistence';
 import en from './translation/en';
 import pl from './translation/pl';
diff --git a/node_modules/rn-emoji-keyboard/src/components/EmojiCategory.tsx b/node_modules/rn-emoji-keyboard/src/components/EmojiCategory.tsx
index 6869a04..1029295 100644
--- a/node_modules/rn-emoji-keyboard/src/components/EmojiCategory.tsx
+++ b/node_modules/rn-emoji-keyboard/src/components/EmojiCategory.tsx
@@ -145,7 +145,7 @@ export const EmojiCategory = React.memo(
 
     const keyExtractor = React.useCallback((item: JsonEmoji) => item.name, [])
 
-    const [maxIndex, setMaxIndex] = React.useState(0)
+    const [maxIndex, setMaxIndex] = React.useState(300)
 
     // with InteractionManager we can show emojis after interaction is finished
     // It helps with delay during category change animation
@@ -155,17 +155,27 @@ export const EmojiCategory = React.memo(
       }
     })
 
+    // To prevent situation with zero maxIndex on next picker openings
+    React.useEffect(() => {
+      const task = requestAnimationFrame(() => {
+        if (maxIndex === 0 && data.length) {
+          setMaxIndex(minimalEmojisAmountToDisplay)
+        }
+      })
+      return () => cancelAnimationFrame(task)
+    }, [])
+
     const onEndReached = () => {
       if (maxIndex <= data.length) {
         setMaxIndex(data.length)
       }
     }
 
-    React.useEffect(() => {
-      if (CATEGORIES[activeCategoryIndex] !== title) {
-        setMaxIndex(0)
-      }
-    }, [activeCategoryIndex, title])
+    // React.useEffect(() => {
+    //   if (CATEGORIES[activeCategoryIndex] !== title) {
+    //     setMaxIndex(0)
+    //   }
+    // }, [activeCategoryIndex, title])
 
     const flatListData = data.slice(0, maxIndex)
 
diff --git a/node_modules/rn-emoji-keyboard/src/index.tsx b/node_modules/rn-emoji-keyboard/src/index.tsx
index 1e49cd4..f46102c 100644
--- a/node_modules/rn-emoji-keyboard/src/index.tsx
+++ b/node_modules/rn-emoji-keyboard/src/index.tsx
@@ -1,5 +1,6 @@
 import { EmojiPicker } from './EmojiPicker'
 import { EmojiKeyboard } from './EmojiKeyboard'
+export { DeleteButton } from './components/DeleteButton';
 import { useRecentPicksPersistence } from './hooks/useRecentPicksPersistence'
 import en from './translation/en'
 import pl from './translation/pl'

[hlus]

Also if anyone know how to delete one by one emoji in string, I would be appreciated Now I have solution only with emoji-regex npm package

[cchampou]

Hey @hlus, do you think you can make a PR based on the diff you suggested so we could review and merge instead of #195, which appears to be incomplete? If you can't do it, do you agree anyone else uses your code to propose a PR and provide a long term solution for this package?

Another solution is that @dehimer could aggregate your fix in the #195 PR?

Thank you @dehimer and @hlus for your work on this one.

[hlus]

@cchampou I've prepared PR: #198

[cchampou]

@cchampou I've prepared PR: #198

Thank you that's amazing! I'll review and share my testing feedbacks asap on this PR.