Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Keyboard height as animated value from useKeyboard #81

Open
LinusU opened this issue Mar 17, 2020 · 3 comments
Open

Keyboard height as animated value from useKeyboard #81

LinusU opened this issue Mar 17, 2020 · 3 comments

Comments

@LinusU
Copy link
Member

LinusU commented Mar 17, 2020

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
Copy link
Member

pvinis commented Mar 17, 2020

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
Copy link

magrinj commented Apr 9, 2020

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

@hosseinmd
Copy link

#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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants