Implement Emoji Picker #17195
Implement Emoji Picker #17195
Conversation
Jenkins BuildsClick to see older builds (35)
|
smohamedjavid
force-pushed
the
feature/emoji-picker
branch
3 times, most recently
from
1e8ed48 to
07e9d9e
Compare
smohamedjavid
requested review from
ilmotta,
flexsurfer,
briansztamfater,
J-Son89,
OmarBasem and
mmilad75
i believe @OmarBasem has implemented it with gesture lib |
Yes! Thanks @flexsurfer for noticing this @smohamedjavid we have a custom gesture section list. You can use it as |
|
@flexsurfer @OmarBasem - Thank you for the review. The Section List implemented in The Gesture FlatList which is used here inspired by that implementation to provide a few additions which help the emoji picker’s behaviour. |
@smohamedjavid I am not sure what you mean by this. What is the UI difference between using |
smohamedjavid
force-pushed
the
feature/emoji-picker
branch
from
07e9d9e to
4576d7e
Compare
I meant to say that the emoji picker design is a mix of having and not having a category/section header. 
The status-mobile/src/react_native/gesture.cljs Lines 91 to 106 in a05156c Apologies for making you infer my response in the wrong way. Should have been more clear earlier 👍 |
smohamedjavid
force-pushed
the
feature/emoji-picker
branch
from
4576d7e to
7c4bbd2
Compare
There was a problem hiding this comment.
Really nice work @smohamedjavid! Especially for putting in the effort to make the component perform well on Android and iOS.
In terms of performance, one open question remained from our pairing which I'm still curious, how can we leverage caching in future PRs? Would React's memo work in our favor? For example, could we cache the entire first emoji "page" in the flat list since that's always the same? Thus striking a decent balance between trading CPU for memory.
| {:ref set-scroll-ref | ||
| :scroll-enabled @scroll-enabled | ||
| :data data | ||
| :initial-num-to-render 15 |
There was a problem hiding this comment.
One thing I've noticed (on Android) is that the initial-num-to-render 15 is much lower than the number of emojis displayed on screen at any given time. This causes causes switching between categories to flash for longer while flat list asynchronously process the remaining items. By flash I mean the user perceives an intermediary blank state while switching between categories for a longer time.
If we could display half of the items on screen, more or less like Telegram and others, that could help us rip the best of both worlds.
There was a problem hiding this comment.
initial-num-to-render denotes the number of items to render when the list is mounted (initial batch). This should be the minimum number to fill the screen as it preserves these items for scroll to top action.
Due to the list size, the FlatList renders half of the list by default.
I have increased the amount of items to render at each batch, which in turn produces a better fill rate when scrolling through the list. 👍
There was a problem hiding this comment.
Thanks for the correction :)
smohamedjavid
force-pushed
the
feature/emoji-picker
branch
from
7c4bbd2 to
5501208
Compare
As far as I know, we can't cache React component render. Once the sheet is closed, the component is unmounted and It's cleared from the memory. I need to do a RnD on these improvements. Also, the React memo is not needed here as the items are static and we have a unique key for each emoji to prevent re-rendering. However, I have increased the initial batch number to have a good experience with scrolling to the top of the list. |
| @@ -45,7 +45,9 @@ | |||
| :type :grey | |||
| :background :photo | |||
| :icon-only? true | |||
| :on-press #(js/alert "pressed") | |||
| :on-press #(rf/dispatch [:emoji-picker/open | |||
77% of end-end tests have passedFailed tests (10)Click to expandClass TestActivityMultipleDevicePRTwo:
Class TestOneToOneChatMultipleSharedDevicesNewUiTwo:
Class TestOneToOneChatMultipleSharedDevicesNewUi:
Class TestCommunityOneDeviceMerged:
Class TestCommunityMultipleDeviceMerged:
Class TestCommunityMultipleDeviceMergedTwo:
Class TestGroupChatMultipleDeviceMergedNewUI:
Passed tests (33)Click to expandClass TestActivityCenterContactRequestMultipleDevicePR:
Class TestOneToOneChatMultipleSharedDevicesNewUiTwo:
Class TestOneToOneChatMultipleSharedDevicesNewUi:
Class TestCommunityOneDeviceMerged:
Class TestCommunityMultipleDeviceMerged:
Class TestActivityMultipleDevicePR:
Class TestCommunityMultipleDeviceMergedTwo:
Class TestGroupChatMultipleDeviceMergedNewUI:
|
smohamedjavid
force-pushed
the
feature/emoji-picker
branch
2 times, most recently
from
6af0822 to
2acbdb5
Compare
|
@Francesca-G - Thanks for the review. Duly appreciated. Regarding the ice cream icon. It's named as 
and when I tried to locate it on the Iconset design file, I could see the food icon is a popsicle (🍭) instead of an Ice cream in a bowl (🍨). The implementation is based on the Iconset. 
Kindly advise. |
|
@smohamedjavid Filipe kindly confirmed we need to use the one in the iconset (popsicle):
so no ice cream bowl. |
|
No worries, and thanks a lot for the clarification, @Francesca-G. I believe we can remove the |
Signed-off-by: Mohamed Javid <[email protected]>
Signed-off-by: Mohamed Javid <[email protected]>
Signed-off-by: Mohamed Javid <[email protected]>
Signed-off-by: Mohamed Javid <[email protected]>
Signed-off-by: Mohamed Javid <[email protected]>
smohamedjavid
force-pushed
the
feature/emoji-picker
branch
from
2acbdb5 to
f3e0b8f
Compare
fixes #17057
Summary
This PR adds
Emoji Pickerin the app for usage in Message Composer and Wallet Account.Android.mp4
iOS.mp4
We can not depend on the external libraries as they are not modular enough to style and don't match our design. So, we created our emoji picker from a dataset to match the design and deliver good performance with rendering and searching.
Dataset:
Emoji data is pulled from the
emojibase. It's lightweight, compiles from the Unicode consortium, contains the latest Unicode 15 emojis such as🫸🫷🫨🪼🪭 and includes skin tone support.We have used the compact dataset: https://cdn.jsdelivr.net/npm/emojibase-data@latest/en/compact.json and removed skin tones (
skins) from the data as skin tone support is not planned for MVP (Post MVP, it will be easier to add support to skin tone). Additionally, we have removed theorderkey as the data set is already ordered. The dataset (JSON) size stands around ~206 KB.Review notes
As the Emoji Picker needs to be displayed on a bottom sheet screen, we can not use
Section List(which is ideal for this case) as the scroll won't work in Android due to the Gesture on the bottom sheet screen. We have to use theFlat Listfromreact-native-gesture-library.Since the dataset is not grouped, we categorised them for rendering in
status-im2.contexts.emoji-picker.datans and partitioned it for easy rendering using FlatList.The search is a simple filter on the dataset. It supports search using the emoji name, tags, and emoticons.
Testing notes
This PR can go through only the design review as it has not yet been added to the screens beyond the wallet.
Platforms
Steps to test
In Preview:
Quo2 Preview > avatar > account avatarOpen emoji picker buttonbuttonIn Actual App:
wallettab+button, then tap onAdd accountin bottom drawer to create new wallet accountstatus: ready