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:

rn-emoji-keyboard/src/components/EmojiStaticKeyboard.tsx

Line 138 in afbc1ee

onLayout={(e) => setWidth(e.nativeEvent.layout.width)}

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 #195

[dehimer]

@dehimer this is probably an onLayout not working well

probably this line:

rn-emoji-keyboard/src/components/EmojiStaticKeyboard.tsx

Line 138 in afbc1ee

onLayout={(e) => setWidth(e.nativeEvent.layout.width)}

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

Sorry, saw your message too late