diff --git a/README.md b/README.md index 2ca57c6f..1ebd5e95 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` @@ -113,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` @@ -148,6 +152,25 @@ console.log('layout: ', layout) ``` +### `useAnimatedValue` + +```js +import { useAnimatedValue } from '@react-native-community/hooks' + +const animatedValue = useAnimatedValue(0) + +useEffect(() => { + Animated.timing(animatedValue, { + 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..e5296619 100644 --- a/src/useKeyboard.ts +++ b/src/useKeyboard.ts @@ -1,5 +1,12 @@ 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 +18,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 +36,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,12 +62,15 @@ export function useKeyboard() { Keyboard.removeListener('keyboardDidShow', handleKeyboardDidShow) Keyboard.removeListener('keyboardWillHide', handleKeyboardWillHide) Keyboard.removeListener('keyboardDidHide', handleKeyboardDidHide) + animatedKeyboardHeight.stopAnimation() } + // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return { keyboardShown: shown, coordinates, keyboardHeight, + animatedKeyboardHeight, } }