Performance improvement idea (to be discussed)

[jan-kozinski]

Hi, we've been getting some performance issues reports lately, so I wanted to discuss a possible improvement regarding how we render the emojis.

Current solution

As of now, each category of emojis is built with a Flatlist component where each item is a single emoji.

Suggested solution

the renderItem callback of the flatlist could render whole rows of emojis at once, thus having less items to render, and less elements in the React DOM (since entire row will be kept in a single Text element). Then, the onClick callback of each row might check the X position of the touch gesture and determine which emoji the user tapped based on this X position value.

Possible problems

• various emojis have different widths. We would need to find a way to have a fixed width for emojis using text justification and/or letter spacing, which may come off as hard to accomplish.

• the performance improvement may be insignificant (I'm still getting onboarded with the repo so I don't know what the bottlenecks are)

  @mateki0 @jakex7 WDYT? (others are also more than welcome to enter the discussion :))

[jakex7]

Hi, unfortunately it will be quite hard, if not impossible to implement due to selectedEmojis feature and related to that indications

[jan-kozinski]

WDYM? What does the selectedEmojis indicate? Are the emojis growing wider when multi-selected or is there some sophisticated animation going on?

[shanoysinc]

I am currently using an iPhone 11 pro and the start-up for the emoji picker is quite slow the animation is really laggy. what animation/ bottom sheet library are you using? is the app loading all the emojis at once?

[jakex7]

WDYM? What does the selectedEmojis indicate? Are the emojis growing wider when multi-selected or is there some sophisticated animation going on?

@jan-kozinski As it is described in the documentation, dev can pass an array of selectedEmojis as props to indicate the emojis

https://thewidlarzgroup.github.io/rn-emoji-keyboard/docs/documentation/Examples/selected_emojis

[jakex7]

I am currently using an iPhone 11 pro and the start-up for the emoji picker is quite slow the animation is really laggy. what animation/ bottom sheet library are you using? is the app loading all the emojis at once?

@shanoysinc I am sorry to hear that. We are constantly working to improve performance. Does your issue also occur in the production build?

[shanoysinc]

yes in the production build but when I use the emoji picker in my own modal and not the bottom sheet modal the performance is great @jakex7

[jan-kozinski]

hmm @jakex7 My idea is that the list item component will be a single row component, that has selectedEmojisIndexes in its state, and renders the indications as absolutely positioned divs with zIndex lower than the \<Text> tag with emojis. The indications don't need a flatlist of their own and can use map function, since if a row is rendered than so are all the indications Would it solve the issue?