Keyboard height as animated value from useKeyboard

[LinusU]

Feature Request

I think it would be nice if useKeyboard could return an Animated.value for the keyboard height.

Why it is needed

Currently, when using keyboardHeight to set e.g. padding it looks very janky when the keyboard is shown or hidden. Exporting an animated value that represents the height could allos the end user to animate the padding as the keyboard appears.

Possible implementation

t.b.d

Code sample

t.b.d.

---

I need this in a project I'm working on so I will probably submit a pull request as soon as I get time ☺️

[pvinis]

That's a good idea. For playing around, I made this with no animations https://snack.expo.io/Bk6HNSRHU and this with react-spring https://snack.expo.io/HJN9BBRS8.

One thing I would suggest is to keep the keyboardHeight we have, and use a new animKeyboardHeight to be the Animated.Value one, so we don't break old stuff, and to allow users to access the height directly, without the need to mess with animated values if they don't care about that.

[magrinj]

Hello guys ! I've juste made a PR based on the proposition here: #140

[hosseinmd]

https://github.com/react-native-community/hooks/pull/205

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')
  }
}, [])

This way we could work with any animated react-native or react-native-reanimated or something different