Denser layout for emoji-reaction picker

[vaibhavs2]

For now it has a column and we can scroll or search emojis, maybe users don't know the name of emojis and so he will have to long scroll to find out what's his need,

I am suggesting to arrange it like matrix elements (rows and columns) so users can quickly pick and on small scroll they can choose from more. And also more emojies are accessible at a time.

[AlaaElden98]

I think I figured out how to do this, working on it!

[vaibhavs2]

I have done it but got a problem , as we have to change number of emojis in a row whenever screen Orientation changes, I figured it out but in doing so we have a variable that have what number of emojis should be in a row( something like screenwidth/(size of emoji+padding). Flatlist getting trouble when I am passing this variable to numColumns props, Let me push , @AlaaElden98 can you help me with this . I also added a library which shows name of emojis in tool tips

[AlaaElden98]

@vaibhavs2 :

I have done it

ooh, I saw your comment and figured you still working on the other issue

can you help me with this

I'm happy to help, push your work and I will look at the code to discuss it together, until you do, I have a few questions :

• Are you passing a fixed number to numColumns? maybe the variable is a double value .

  Flatlist getting trouble when I am passing this variable to numColumns props

• Can you be more specific? is there is an error or the UI is just missed up?

  I also added a library which shows name of emojis in tool tips

• Did you try to uninstall this library and test your work?

[vaibhavs2]

I'm happy to help, push your work

Let me reach home :)

Are you passing a fixed number to numColumns? maybe the variable is a double value .

If I am passing integer then all good, no problem but It would not be good to have constant number of emojis, what if user is using tablet, or phone with different screen width ,sometime emojis seems congested in small screen , sometime with lots of padding that's why i thought to do so (and also considering screen rotation) . if your double value means object (dictionary), well, not 100% confirm but no its single value

Can you be more specific? is there is an error or the UI is just missed up?

I got trouble through console, console(terminal overflows on every item rendering) and in UI flatlist starts lagging while rendering rows, you can find on google, lots of issues are there "dynamically change numColumn in Flatlist"

Did you try to uninstall this library and test your work?

if issue depend on this, it would not work if I pass constant(Integer) to flatlist.

toolTip I added purposely as we currently have emojis and their name in single column, I thought It would be better for user to get the name of emojis on longPress and can search with that later, and also previous state emoji and their name retained in UI.

[vaibhavs2]

hey @AlaaElden98 , created a pull request look at that, and sorry I am late. You will see in gif how "Loading..." is behaving, it should be smooth.

[AlaaElden98]

I will try to debug, if i found something, i will leave a comment