[native] persist recently used emojis

Summary:
This diff persists the recently selected emojis from the emoji keyboard into async storage. To create this diff I read through the docs and found these examples right here:

  - [[ https://thewidlarzgroup.github.io/rn-emoji-keyboard/docs/api/useRecentPicksPersistence | API docs for the useRecentPicksPersistence hook ]]
  - [[ https://thewidlarzgroup.github.io/rn-emoji-keyboard/docs/documentation/Examples/recently-persistance | An implementation example ]]
  - [[ https://github.com/TheWidlarzGroup/rn-emoji-keyboard/blob/master/example/src/EnableRecently/EnableRecently-persistence.tsx | A more in depth implementation example ]]

I believe this should be an acceptable use case of using AsyncStorage (especially as a first step), as we are only storing a small amount of data, this seems like the recommended way to persist the recently used emojis from the documentation, and we are using a completely different emoji keyboard library for web. If we are interested in persisting the recently used emojis across web/native or different devices, then I can create a follow up task for this; however, I personally feel that this wouldn't really add much value to the overall user experience.

Linear Task: https://linear.app/comm/issue/ENG-3792/mobile-emoji-keyboard-recently-used-category

Test Plan:
Please watch the demo video:

{F600827}

Reviewers: atul, kamil

Reviewed By: kamil

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D8282

native/components/emoji-keyboard.react.js

@@ -1,7 +1,10 @@
 // @flow
 
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import * as React from 'react';
-import EmojiPicker from 'rn-emoji-keyboard';
+import EmojiPicker, { useRecentPicksPersistence } from 'rn-emoji-keyboard';
+
+const STORAGE_KEY = 'EMOJI_KEYBOARD_RECENT';
 
 const categoryOrder = [
   'recently_used',
@@ -17,6 +20,23 @@ const categoryOrder = [
   'search',
 ];
 
+const initializationCallback = async () => {
+  const recentlyUsedEmojis = await AsyncStorage.getItem(STORAGE_KEY);
+  return JSON.parse(recentlyUsedEmojis ?? '[]');
+};
+
+const onStateChangeCallback = async nextRecentlyUsedEmojis => {
+  await AsyncStorage.setItem(
+    STORAGE_KEY,
+    JSON.stringify(nextRecentlyUsedEmojis),
+  );
+};
+
+const useRecentPicksPersistenceArgs = {
+  initialization: initializationCallback,
+  onStateChange: onStateChangeCallback,
+};
+
 export type EmojiSelection = {
   +emoji: string,
   +name: string,
@@ -35,6 +55,8 @@ type Props = {
 function EmojiKeyboard(props: Props): React.Node {
   const { onEmojiSelected, emojiKeyboardOpen, onEmojiKeyboardClose } = props;
 
+  useRecentPicksPersistence(useRecentPicksPersistenceArgs);
+
   return (
     <EmojiPicker
       onEmojiSelected={onEmojiSelected}