From f741f8de2b2231939f29f771e3a337dc69550965 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= Date: Thu, 9 Apr 2020 10:28:38 -0400 Subject: [PATCH 1/4] Add animatedKeyboardHeight in useKeyboard hook --- README.md | 20 ++++++++++++++++++++ src/index.ts | 2 ++ src/useAnimatedValue.ts | 7 +++++++ src/useKeyboard.ts | 19 ++++++++++++++++++- 4 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 src/useAnimatedValue.ts diff --git a/README.md b/README.md index 2ca57c6f..cb3c7f4b 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,7 @@ yarn add @react-native-community/hooks - [useInteractionManager](https://github.com/react-native-community/hooks#useinteractionmanager) - [useDeviceOrientation](https://github.com/react-native-community/hooks#usedeviceorientation) - [useLayout](https://github.com/react-native-community/hooks#uselayout) +- [useAnimatedValue](https://github.com/react-native-community/hooks#useAnimatedValue) ### `useAccessibilityInfo` @@ -148,6 +149,25 @@ console.log('layout: ', layout) ``` +### `useAnimatedValue` + +```js +import { useAnimatedValue } from '@react-native-community/hooks' + +const animatedValue = useAnimatedValue(0) + +useEffect(() => { + Animated.timing(animatedKeyboardHeight, { + duration: 250, + toValue: 200, + }).start() +}, []) + +console.log('value: ', animatedValue) + + +``` + [version-badge]: https://img.shields.io/npm/v/@react-native-community/hooks.svg?style=flat-square [package]: https://www.npmjs.com/package/@react-native-community/hooks diff --git a/src/index.ts b/src/index.ts index d8dc4d6f..9440db03 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,6 +8,7 @@ import {useKeyboard} from './useKeyboard' import {useInteractionManager} from './useInteractionManager' import {useDeviceOrientation} from './useDeviceOrientation' import {useLayout} from './useLayout' +import {useAnimatedValue} from './useAnimatedValue' export { useDimensions, @@ -20,4 +21,5 @@ export { useInteractionManager, useDeviceOrientation, useLayout, + useAnimatedValue, } diff --git a/src/useAnimatedValue.ts b/src/useAnimatedValue.ts new file mode 100644 index 00000000..e64e7dfe --- /dev/null +++ b/src/useAnimatedValue.ts @@ -0,0 +1,7 @@ +import {useRef} from 'react' +import {Animated} from 'react-native' + +export const useAnimatedValue = (initialValue: number): Animated.Value => { + const ref = useRef(new Animated.Value(initialValue)) + return ref.current +} diff --git a/src/useKeyboard.ts b/src/useKeyboard.ts index f130ac82..b7ff8866 100644 --- a/src/useKeyboard.ts +++ b/src/useKeyboard.ts @@ -1,5 +1,7 @@ import {useEffect, useState} from 'react' -import {Keyboard, KeyboardEventListener, ScreenRect} from 'react-native' +import {Keyboard, KeyboardEventListener, ScreenRect, Animated} from 'react-native' + +import {useAnimatedValue} from './useAnimatedValue'; export function useKeyboard() { const [shown, setShown] = useState(false) @@ -11,9 +13,16 @@ export function useKeyboard() { end: {screenX: 0, screenY: 0, width: 0, height: 0}, }) const [keyboardHeight, setKeyboardHeight] = useState(0) + const animatedKeyboardHeight = useAnimatedValue(0) const handleKeyboardWillShow: KeyboardEventListener = (e) => { setCoordinates({start: e.startCoordinates, end: e.endCoordinates}) + + // Start raise keyboard animated value + Animated.timing(animatedKeyboardHeight, { + duration: e.duration, + toValue: e.endCoordinates.height, + }).start() } const handleKeyboardDidShow: KeyboardEventListener = (e) => { setShown(true) @@ -22,6 +31,12 @@ export function useKeyboard() { } const handleKeyboardWillHide: KeyboardEventListener = (e) => { setCoordinates({start: e.startCoordinates, end: e.endCoordinates}) + + // Start close keyboard animated value + Animated.timing(animatedKeyboardHeight, { + duration: e.duration, + toValue: 0, + }).start() } const handleKeyboardDidHide: KeyboardEventListener = (e) => { setShown(false) @@ -42,6 +57,7 @@ export function useKeyboard() { Keyboard.removeListener('keyboardDidShow', handleKeyboardDidShow) Keyboard.removeListener('keyboardWillHide', handleKeyboardWillHide) Keyboard.removeListener('keyboardDidHide', handleKeyboardDidHide) + animatedKeyboardHeight.stopAnimation() } }, []) @@ -49,5 +65,6 @@ export function useKeyboard() { keyboardShown: shown, coordinates, keyboardHeight, + animatedKeyboardHeight, } } From 8959c4d6e897750ce6c2230c41774f3786ef1543 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= Date: Thu, 9 Apr 2020 10:36:07 -0400 Subject: [PATCH 2/4] Updated readme useKeyboard animatedKeyboardHeight --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index cb3c7f4b..c53012f5 100644 --- a/README.md +++ b/README.md @@ -114,6 +114,9 @@ const keyboard = useKeyboard() console.log('keyboard isKeyboardShow: ', keyboard.keyboardShown) console.log('keyboard keyboardHeight: ', keyboard.keyboardHeight) +console.log('keyboard animatedKeyboardHeight: ', keyboard.animatedKeyboardHeight) + + ``` ### `useInteractionManager` From c5a1c72ba33970b81884869da155827c87a2a76e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= Date: Thu, 9 Apr 2020 10:39:52 -0400 Subject: [PATCH 3/4] Fix linter --- src/useKeyboard.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/useKeyboard.ts b/src/useKeyboard.ts index b7ff8866..e5296619 100644 --- a/src/useKeyboard.ts +++ b/src/useKeyboard.ts @@ -1,7 +1,12 @@ import {useEffect, useState} from 'react' -import {Keyboard, KeyboardEventListener, ScreenRect, Animated} from 'react-native' +import { + Keyboard, + KeyboardEventListener, + ScreenRect, + Animated, +} from 'react-native' -import {useAnimatedValue} from './useAnimatedValue'; +import {useAnimatedValue} from './useAnimatedValue' export function useKeyboard() { const [shown, setShown] = useState(false) @@ -59,6 +64,7 @@ export function useKeyboard() { Keyboard.removeListener('keyboardDidHide', handleKeyboardDidHide) animatedKeyboardHeight.stopAnimation() } + // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return { From 92aad3ec3de5f53bf01581f4b38dcc24c507d22e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= Date: Thu, 9 Apr 2020 10:55:14 -0400 Subject: [PATCH 4/4] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Linus Unnebäck --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c53012f5..1ebd5e95 100644 --- a/README.md +++ b/README.md @@ -160,7 +160,7 @@ import { useAnimatedValue } from '@react-native-community/hooks' const animatedValue = useAnimatedValue(0) useEffect(() => { - Animated.timing(animatedKeyboardHeight, { + Animated.timing(animatedValue, { duration: 250, toValue: 200, }).start()