-
-
Notifications
You must be signed in to change notification settings - Fork 56
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[RNKC-061] - introduce low-level
useKeyboardHandler hook (#87)
## 📜 Description Added new hook `useKeyboardHandler` that has gradual `height`/`progress` values on iOS. Also it has a little bit different API than already existing hooks. See **Motivation and Context** section to get more insights of why this approach was chosen. ## Related issues - #85 - #56 ## 💡 Motivation and Context The current limitation of this library on iOS was the fact, that `height` and `progress` values didn't have intermediate values. So if you are trying to animate NonUiProps, such as `height`, `width` etc. - you get instant transitions, that looks not well. That's where `useKeyboardHandler` comes into play. This hook allows you to get intermediate values. Unfortunately values in `onMove` handler are not perfectly synchronised with the keyboard positions (I did a big research on how to get intermediate values and a little bit later I will open a new issue describing all nuances I found). Since these values are not synchronized - it makes it impossible to add them in already existing `useKeyboardAnimation` hooks, since all chat-like apps will have unsynchronised keyboard/text input animations and most of all iOS users will notice it. That's why I decided to go in a little bit different way and introduce new hook. In my opinion this hook gives minimal (but at the same time very powerful) API. You can control every aspect of the keyboard movement, detect start/end of the animations and get intermediate values. Later I will write a new docs for this hook where I will highlight all nuances of the usage. Current iOS implementation was highly inspired by https://github.com/JunyuKuang/KeyboardUtility ## 📢 Changelog ### JS - added two new methods for `KeyboardControllerView`: `onKeyboardMoveStart` and `onKeyboardMoveEnd`; - added new hook `useKeyboardHandler`; - added new example; ### iOS - watch keyboard position during animation via `CADisplayLink`; ## 🤔 How Has This Been Tested? Tested manually on: - iPhone 11 (iOS 15.5); - Pixel 3 (API 32); ## 📸 Screenshots (if appropriate): ### Lottie example (iOS) |Before|After| |-------|-----| |<video src="https://user-images.githubusercontent.com/22820318/195279279-b1284f86-3053-4ef8-a3d2-b18741677f06.mp4">|<video src="https://user-images.githubusercontent.com/22820318/195278696-278a81ed-9893-4c63-82e3-8372c76be4c7.mp4">| ### Non UI props |Before|After| |------|-----| |<video src="https://user-images.githubusercontent.com/22820318/195279766-777da551-a81d-40f2-be38-f9a1bda298f5.mp4">|<video src="https://user-images.githubusercontent.com/22820318/195279862-c5a07328-b226-4578-93bf-057d3a6740cb.mp4">| ## 📝 Checklist - [x] CI successfully passed
- Loading branch information
1 parent
7d3c7c4
commit a603416
Showing
26 changed files
with
477 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React from 'react'; | ||
| import { View } from 'react-native'; | ||
| import { TextInput } from 'react-native-gesture-handler'; | ||
| import { useKeyboardHandler } from 'react-native-keyboard-controller'; | ||
| import Reanimated, { | ||
| interpolate, | ||
| useAnimatedStyle, | ||
| useSharedValue, | ||
| } from 'react-native-reanimated'; | ||
|
|
||
| function useGradualKeyboardAnimation() { | ||
| const height = useSharedValue(0); | ||
| const progress = useSharedValue(0); | ||
|
|
||
| useKeyboardHandler( | ||
| { | ||
| onMove: (e) => { | ||
| 'worklet'; | ||
|
|
||
| height.value = e.height; | ||
| progress.value = e.progress; | ||
| }, | ||
| onEnd: (e) => { | ||
| 'worklet'; | ||
|
|
||
| height.value = e.height; | ||
| progress.value = progress.value; | ||
| }, | ||
| }, | ||
| [] | ||
| ); | ||
|
|
||
| return { height, progress }; | ||
| } | ||
|
|
||
| function NonUIProps() { | ||
| const { height, progress } = useGradualKeyboardAnimation(); | ||
|
|
||
| const rStyle = useAnimatedStyle(() => { | ||
| return { | ||
| backgroundColor: 'gray', | ||
| height: height.value, | ||
| width: interpolate(progress.value, [0, 1], [100, 200]), | ||
| }; | ||
| }); | ||
|
|
||
| return ( | ||
| <View style={{ flex: 1 }}> | ||
| <TextInput | ||
| style={{ width: '100%', height: 50, backgroundColor: 'red' }} | ||
| /> | ||
| <Reanimated.View style={rStyle} /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| export default NonUIProps; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React from 'react'; | ||
| import { View } from 'react-native'; | ||
| import { TextInput } from 'react-native-gesture-handler'; | ||
| import { useKeyboardHandler } from 'react-native-keyboard-controller'; | ||
| import Reanimated, { | ||
| interpolate, | ||
| useAnimatedStyle, | ||
| useSharedValue, | ||
| } from 'react-native-reanimated'; | ||
|
|
||
| function useGradualKeyboardAnimation() { | ||
| const height = useSharedValue(0); | ||
| const progress = useSharedValue(0); | ||
|
|
||
| useKeyboardHandler( | ||
| { | ||
| onMove: (e) => { | ||
| 'worklet'; | ||
|
|
||
| height.value = e.height; | ||
| progress.value = e.progress; | ||
| }, | ||
| onEnd: (e) => { | ||
| 'worklet'; | ||
|
|
||
| height.value = e.height; | ||
| progress.value = progress.value; | ||
| }, | ||
| }, | ||
| [] | ||
| ); | ||
|
|
||
| return { height, progress }; | ||
| } | ||
|
|
||
| function NonUIProps() { | ||
| const { height, progress } = useGradualKeyboardAnimation(); | ||
|
|
||
| const rStyle = useAnimatedStyle(() => { | ||
| return { | ||
| backgroundColor: 'gray', | ||
| height: height.value, | ||
| width: interpolate(progress.value, [0, 1], [100, 200]), | ||
| }; | ||
| }); | ||
|
|
||
| return ( | ||
| <View style={{ flex: 1 }}> | ||
| <TextInput | ||
| style={{ width: '100%', height: 50, backgroundColor: 'red' }} | ||
| /> | ||
| <Reanimated.View style={rStyle} /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| export default NonUIProps; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,9 @@ | ||
| disabled_rules: | ||
| - trailing_comma | ||
|
|
||
| line_length: | ||
| warning: 120 | ||
| ignores_urls: true | ||
|
|
||
| excluded: | ||
| - Pods |
Oops, something went wrong.