TheWidlarzGroup / rn-emoji-keyboard

Super performant, lightweight, fully customizable emoji picker 🚀
https://thewidlarzgroup.github.io/rn-emoji-keyboard/
MIT License
330 stars 61 forks source link

Android physical back press to close EmojiPicker #37

Closed WenLonG12345 closed 2 years ago

WenLonG12345 commented 2 years ago

Hi, thanks for this awesome library and it is very useful! However, I ran into a problem with Android where the EmojiPicker cannot be closed when physical button is pressed.

Here is my code snippet

const [showEmoji, setShowEmoji] = useState(false);

<EmojiPicker
      open={showEmoji}
      onClose={() => setShowEmoji(false)}
      onEmojiSelected={(emojiObject) => onSetUserInput(userInput + emojiObject.emoji)}
      backdropColor="#0000000"
      hideHeader
      expandable={false}
/>

as using React-navigation, here is my implementation of custom back pressed

 useFocusEffect(
    useCallback(() => {
        const onBackPress = () => {
            console.log(showEmoji );

            if (showEmoji) {
                setShowEmoji(false);
                    console.log({ showEmoji });
            } else {
                    navigation.goBack();  <-- code only executed this line!
                }
                return true;
            };

       BackHandler.addEventListener('hardwareBackPress', onBackPress);
       return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress);
        },[])
    );

I notice that when EmojiPicker is open, it seems like a Modal and cannot be dismissed. I think I need something like onRequestClose for modal like this, but I am not sure. Any idea or solution for this? Thanks

sebdott commented 2 years ago

Added #38

jakex7 commented 2 years ago

Hi, thanks for reporting this. Added in #38 and #39 If you have any questions or problems with this feature, let me know 🙂