react-native-community/hooks

Keyboard height as animated value from useKeyboard

LinusU opened this issue · 3 comments

LinusU commented

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 commented

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.

  • 👍5
magrinj commented

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

  • 🎉2
hosseinmd commented

#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

  • 👍2