This pull request enhances the useKeyboard hook in the react-native-community/hooks library to improve cross-platform compatibility for keyboard events. Currently, the hook supports both keyboardWillShow and keyboardWillHide events on iOS, but for Android, it uses keyboardDidShow and keyboardDidHide events. To ensure consistent behavior across platforms, this update introduces conditional event listeners based on the platform.
The motivation behind this change is to provide a consistent and reliable experience for handling keyboard events in a cross-platform React Native application. By utilizing the appropriate keyboard events based on the platform, this enhancement aims to improve the overall user experience and streamline the development process.
Test Plan
What's required for testing (prerequisites)?
Ensure that the react-native-community/hooks library is installed.
Set up a React Native project with appropriate dependencies.
What are the steps to reproduce (after prerequisites)?
Import and use the useKeyboard hook in a React Native component.
Test the component on both iOS and Android devices or simulators.
Observe the behavior of the keyboardShown, coordinates, and keyboardHeight values when the keyboard is shown and hidden.
Compatibility
OS
Implemented
iOS
✅
Android
✅
Web
❌
Checklist
[X] 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
Summary
This pull request enhances the
useKeyboardhook in thereact-native-community/hookslibrary to improve cross-platform compatibility for keyboard events. Currently, the hook supports bothkeyboardWillShowandkeyboardWillHideevents on iOS, but for Android, it useskeyboardDidShowandkeyboardDidHideevents. To ensure consistent behavior across platforms, this update introduces conditional event listeners based on the platform.The motivation behind this change is to provide a consistent and reliable experience for handling keyboard events in a cross-platform React Native application. By utilizing the appropriate keyboard events based on the platform, this enhancement aims to improve the overall user experience and streamline the development process.
Test Plan
What's required for testing (prerequisites)?
react-native-community/hookslibrary is installed.What are the steps to reproduce (after prerequisites)?
useKeyboardhook in a React Native component.keyboardShown,coordinates, andkeyboardHeightvalues when the keyboard is shown and hidden.Compatibility
Checklist
README.md