emoji panel position flash when keyboard expand

[FengFuLiu]

Describe the bug https://user-images.githubusercontent.com/22019735/187011410-375b9637-03f0-4571-9240-a6a9817e4fa5.mp4

Additional context Add any other context about the problem here.

[mateki0]

Hey @FengFuLiu we will fix this problem in the future. For now you can fix it in your application by closing Keyboard before opening the EmojiKeyboard:

const handleOpen = () => {
    Keyboard.dismiss()
    setTimeout(() => setIsModalOpen(true), 100)
  }

  <TouchableOpacity onPress={handleOpen}>
        <Text style={styles.text}>Open</Text>
  </TouchableOpacity>

I know that using setTimeout is not the best, but at least working and fast solution.

[mateki0]

@jakex7 Is this code still needed? Because it's responsible for this bug. I don't know if before keyboard wasn't closing on emoji picker open or if there there was any other cause of adding it. But now the native Keyboard is closing if we open EmojiKeyboard and code below makes it go to the extended height and then to normal - it's very well visible if you increase animation duration

/// EmojiPicker.tsx
 React.useEffect(() => {
    const shouldExpandHeight = keyboardVisible && !isExpanded
    const newAdditionalHeightValue = shouldExpandHeight ? keyboardHeight : 0
    Animated.timing(additionalHeight, {
      toValue: newAdditionalHeightValue,
      useNativeDriver: false,
      duration: 200,
    }).start()
  }, [additionalHeight, isExpanded, keyboardHeight, keyboardVisible])

[FengFuLiu]

Hey @FengFuLiu we will fix this problem in the future. For now you can fix it in your application by closing Keyboard before opening the EmojiKeyboard:

const handleOpen = () => {
    Keyboard.dismiss()
    setTimeout(() => setIsModalOpen(true), 100)
  }

  <TouchableOpacity onPress={handleOpen}>
        <Text style={styles.text}>Open</Text>
  </TouchableOpacity>

I know that using setTimeout is not the best, but at least working and fast solution.

👌Thanks!

[jakex7]

@mateki0 Yes, that fragment is responsible for avoiding keyboard when clicking on search input. ON vs OFF

https://user-images.githubusercontent.com/39670088/195699501-4c214ded-a891-419b-9dc1-6691fcb889ca.mov