feat: implement useKeyboardEffect

[hosseinmd]

Summary

https://github.com/react-native-community/hooks/issues/81

This function is very useful in cases where we need to work with animated or something  needed to listen keyboard

Test Plan

Example:

import {useKeyboardEffect} from '@react-native-community/hooks'

useKeyboardEffect((type, event) => {
  if (type === 'keyboardDidShow') {
    console.log('keyboard did show')
  } else if (type === 'keyboardDidHide') {
    console.log('keyboard did hide')
  }
}, [])

What's required for testing (prerequisites)?

What are the steps to reproduce (after prerequisites)?

Compatibility

OS	Implemented
iOS	✅
Android	✅
Web	✅❌

Checklist

• I have tested this on a device and a simulator
• I added the documentation in README.md
• I updated the typed files (TS and Flow)
• [ ] I've created a snack to demonstrate the changes: LINK HERE

[hosseinmd]

Has anyone with merge permission?

[andreibarabas]

Hey @hosseinmd , I'm looking at your PR and can't really understand (neither from the example nor code) how you return the keyboard height as animated value. From my understanding, you simply listen to to some events as the regular useKeyboard, which provides a static value, not an animated one. Or am I mistaking and the value is actually animated?

[hosseinmd]

You could use this hook to create any animated value like "React-native-reanimated" or "React-native" animated value.

I provided an example for you.

import {useKeyboardEffect} from '@react-native-reanimated'
import {Animated} from 'react-native'

const App = () => {
  const keyboardHeightAnim = new Animated.Value(0)
  useKeyboardEffect((type, event) => {
    keyboardHeightAnim.setValue(event.endCoordinates.height)
  }, [])
}

[andreibarabas]

I see. did you check, how often does the event.endCoordinates.height get called (thus updated) ? In order to provide a smooth animation, it should be at 60fps, which because it crosses the bridge is going to be subject to interference from the JS thread being loaded.

What I initially thought when reading the name was that the animated value is actually updated in Native Thread, just like we do with onScroll. Otherwise, it's just a simple state that get's updated in the JS with the keyboard height

[hosseinmd]

I used React-native Keyboard.addListener on this hook, that is JS side, if we want to run that on native side need to code for natives that's ok, but problem is where we want to use that for another things.

[fukemy]

hi, how can i get this useKeyboardEffect? newest version does not contain this