[IMPROVE] Redesign emoji picker

[try-catch-stack]

Proposed changes

• Migrated EmojiPicker to hooks.
• Revamped EmojiPicker component. Added functionality to search and delete emojis.

Issue(s)

How to test or reproduce

Note: We have a default emojis list on some places and they are composed of ['clap', 'thumbsup', 'heart_eyes', 'grinning', 'thinking', 'smiley']

Once the user starts selecting emojis, the app starts to replace this default list with this frequently used emojis.

Add emoji to message composer from emoji keyboard

• Tap on emoji button on left side of message composer to open emoji picker
  • select an emoji from custom emojis tab (rocket icon)
  • select an emoji from frequently used tab (clock icon) (it's based on emojis you previously selected)
  • select a normal emoji from any other tab

Add emoji to message composer from emoji keyboard's search (clear cache before running this test)

• With emoji keyboard open, tap on search on bottom left
  • search should display default emojis at first. Select one of them and they should appear on the composer.
  • Close the search, open it again and the emoji you selected should appear first on the list (now as a frequently used)
  • Search for a custom emoji and select it
  • Search for a normal emoji and select it
  • Close the search, open it again and the list should be based on the emojis you selected

Add emoji to message composer from autocomplete

• Focus on message composer and type : to open emoji autocomplete
• Select a normal and a custom one

React a message from message actions (clear cache before this one)

• Long press on a message and it should show default emojis on the header of the bottom sheet
• Select one of them and the message should be reacted with it
• Open it again and the emoji should now appear first on the list

React a message from reaction picker

• Long press on a message and tap on the "smile emoji +" on the top right of the bottom sheet. It should open the reaction picker. Then select an emoji to react.
  
• On the right side of the reaction, the same icon above should appear to add another reaction. Tap on it to open the reaction picker.
• Same drill as the other tests. Try frequently used, custom emojis and the normal ones.
• Also try the search.

Remove reaction

• Remove a reaction of a custom emoji
• Remove a reaction of a normal emoji

Others

• Run these tests on tablets
• Check for any visual regression on avatars and markdowns

Screenshots

Before	After

• Searching emojis:

new.emoji-picker.mp4

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• Improvement (non-breaking change which improves a current function)
• New feature (non-breaking change which adds functionality)
• Documentation update (if none of the other choices apply)

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• I have added necessary documentation (if applicable)
• Any dependent changes have been merged and published in downstream modules

Further comments

NATIVE-109

[diegolmello]

• Review your React.memo usage
• Make sure Detox tests are passing on Android

[dnlsilva]

errors:
When you send an emoji the keyboard does not close automatically.
When clicking directly on the emoji without clicking on the keyboard, when I switch to keyboard it doesn't work, the keyboard is black.

[try-catch-stack]

errors: When you send an emoji the keyboard does not close automatically. When clicking directly on the emoji without clicking on the keyboard, when I switch to keyboard it doesn't work, the keyboard is black.

I believe, this issue should now be fixed.

[diegolmello]

Missing detox tests

[dnlsilva]

When I didn't send any emoji the most used emojis tab is showing empty (It shouldn't appear I think)