Page MenuHomePhabricator

[native] add recently used category to emoji picker
ClosedPublic

Authored by ginsu on Jun 15 2023, 11:03 AM.
Tags
None
Referenced Files
F2174982: D8228.diff
Wed, Jul 3, 1:41 AM
F2174584: D8228.id27810.diff
Wed, Jul 3, 12:50 AM
F2169028: D8228.id27841.diff
Tue, Jul 2, 10:07 AM
F2167668: D8228.id27813.diff
Tue, Jul 2, 6:53 AM
Unknown Object (File)
Mon, Jul 1, 12:45 AM
Unknown Object (File)
Sun, Jun 30, 7:50 AM
Unknown Object (File)
Sat, Jun 29, 2:11 PM
Unknown Object (File)
Sat, Jun 29, 1:47 AM
Subscribers

Details

Summary

This diff adds the recently used cateogry to the emoji picker. To do this, I read through the docs and found this example here. A subsequent diff will add persistent storage of recently selected emoji through the useRecentPicksPersistence hook provided by rn-emoji-keyboard

Depends on D8227

Test Plan

Please view the demo video below:

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, kamil.
native/components/emoji-keyboard.react.js
23–39 ↗(On Diff #27809)

The initial order of the categories had the recently used category in the second to last position. I thought it would be a better user experience to have the recently used category be the first category since it would match the category order of our web emoji keyboard and it is also the same order that the native iPhone emoji keyboard uses:

Screenshot 2023-06-15 at 2.24.31 PM.png (2×1 px, 1 MB)

native/components/emoji-keyboard.react.js
23–39 ↗(On Diff #27809)

This is a constant, so instead of memoizing it you can just declare it in the top-level scope. Any time you define a React.useMemo with no deps in the dep list, that's usually a sign that you should be declaring at the top-level scope instead

(Let me know if this is modified later though)

move categories array into the top level scope

native/components/emoji-keyboard.react.js
21–33 ↗(On Diff #27810)

The initial order of the categories had the recently used category in the second to last position. I thought it would be a better user experience to have the recently used category be the first category since it would match the category order of our web emoji keyboard and it is also the same order that the native iPhone emoji keyboard uses:

Screenshot 2023-06-15 at 2.24.31 PM.png (2×1 px, 1 MB)

move categoryOrder to be above the types

This revision is now accepted and ready to land.Jun 15 2023, 6:41 PM