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

feat: implement useKeyboardEffect #205

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

hosseinmd
Copy link

Summary

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

Has anyone with merge permission?

@andreibarabas
Copy link

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

hosseinmd commented Sep 11, 2020

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

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

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

fukemy commented Jul 25, 2022

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

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

Successfully merging this pull request may close these issues.

3 participants