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