Add animatedKeyboardHeight in useKeyboard hook

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)
+
+<Animated.View style={{height: keyboard.animatedKeyboardHeight}} />
 ```
 
 ### `useInteractionManager`
@@ -148,6 +152,25 @@ console.log('layout: ', layout)
 <View onLayout={onLayout} style={{width: 200, height: 200, marginTop: 30}} />
 ```
 
+### `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)
+
+<Animated.View onLayout={onLayout} style={{width: 200, height: animatedValue, marginTop: 30}} />
+```
+
 [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
 

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,
 }

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
+}

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<number>(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,
   }
 }