diff --git a/native/components/emoji-keyboard.react.js b/native/components/emoji-keyboard.react.js index 31266cd5ea..88a624ec5a 100644 --- a/native/components/emoji-keyboard.react.js +++ b/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 (