diff --git a/native/components/emoji-keyboard.react.js b/native/components/emoji-keyboard.react.js --- 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', @@ -35,6 +38,26 @@ function EmojiKeyboard(props: Props): React.Node { const { onEmojiSelected, emojiKeyboardOpen, onEmojiKeyboardClose } = props; + const initializationCallback = React.useCallback(async () => { + const recentlyUsedEmojis = await AsyncStorage.getItem(STORAGE_KEY); + return JSON.parse(recentlyUsedEmojis ?? '[]'); + }, []); + + const onStateChangeCallback = React.useCallback( + async nextRecentlyUsedEmojis => { + await AsyncStorage.setItem( + STORAGE_KEY, + JSON.stringify(nextRecentlyUsedEmojis), + ); + }, + [], + ); + + useRecentPicksPersistence({ + initialization: initializationCallback, + onStateChange: onStateChangeCallback, + }); + return (