updated useLayout, useKeyboard, useInteractionManager

Author: Dabit

README.md

@@ -28,7 +28,7 @@ yarn add react-native-hooks
 - [useKeyboard](https://github.com/react-native-community/react-native-hooks#usekeyboard)
 - [useInteractionManager](https://github.com/react-native-community/react-native-hooks#useinteractionmanager)
 - [useDeviceOrientation](https://github.com/react-native-community/react-native-hooks#usedeviceorientation)
-
+- [useLayout](https://github.com/react-native-community/react-native-hooks#uselayout)
 
 ### `useAccessibilityInfo`
 
@@ -140,10 +140,9 @@ console.log('is orientation landscape: ', orientation.landscape)
 ```js
 import { useLayout } from 'react-native-hooks'
 
-const {x, y, width, height, onLayout}  = useLayout()
+const { onLayout, ...layout } = useLayout()
+
+console.log('layout: ', layout)
 
-<View onLayout={onLayout}>
-  <View style={{width: width, height: width, backgroundColor: 'red'}} />
-  <View style={{width: width, height: width, backgroundColor: 'green'}} />
-</View>
+<View onLayout={onLayout} style={{width: 200, height: 200, marginTop: 30}} />
 ```

lib/useInteractionManager.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { InteractionManager } from 'react-native';
 
-export default () => {
+export default function useInteractionManager() {
   const [complete, updateInteractionStatus] = useState(false);
 
   useEffect(() => {

lib/useKeyboard.js

@@ -1,31 +1,46 @@
 import React, { useEffect, useState } from 'react'
 import { Keyboard } from 'react-native'
 
-export default () => {
-  const [keyboard, setKeyboard] = useState({})
+export default function useKeyboard() {
+  const [keyboard, setKeyboard] = useState({ Keyboard })
 
-  function keyboardDidShow(e) {
+  function keyboardShown(e) {
     setKeyboard({
       isKeyboardShow: true,
-      keyboardHeight: e.endCoordinates.height
+      Keyboard,
+      endCoordinates: e.endCoordinates,
+      startCoordinates: e.startCoordinates
     })
   }
 
-  function keyboardDidHide(e) {
+  function keyboardHidden(e) {
     setKeyboard({
       isKeyboardShow: false,
-      keyboardHeight: e ? e.endCoordinates.height : null
+      Keyboard,
+      endCoordinates: e.endCoordinates,
+      startCoordinates: e.startCoordinates
     })
   }
 
   useEffect(() => {
+    keyboardDidShowListener = Keyboard.addListener(
+      'keyboardWillShow',
+      keyboardHidden
+    )
+
     keyboardDidShowListener = Keyboard.addListener(
       'keyboardDidShow',
-      keyboardDidShow
+      keyboardShown
     )
+
+    keyboardDidShowListener = Keyboard.addListener(
+      'keyboardWillHide',
+      keyboardShown
+    )
+
     keyboardDidHideListener = Keyboard.addListener(
       'keyboardDidHide',
-      keyboardDidHide
+      keyboardHidden
     )
 
     return () => {

lib/useLayout.js

@@ -1,3 +1,5 @@
+import React from 'react'
+
 export default function useLayout() {
     const [layout, setLayout] = React.useState({
         x: 0,
@@ -6,6 +8,7 @@ export default function useLayout() {
         height: 0,
     })
     const onLayout = React.useCallback(e => setLayout(e.nativeEvent.layout), [])
+    
     return {
         onLayout,
         ...layout,