Merge branch 'DylanVann-use-layout'

Author: Dabit

README.md

@@ -110,3 +110,16 @@ const orientation = useDeviceOrientation()
 console.log('is orientation portrait: ', orientation.portrait)
 console.log('is orientation landscape: ', orientation.landscape)
 ```
+
+### `useLayout`
+
+```js
+import { useLayout } from 'react-native-hooks'
+
+const {x, y, width, height, onLayout}  = useLayout()
+
+<View onLayout={onLayout}>
+  <View style={{width: width, height: width, backgroundColor: 'red'}} />
+  <View style={{width: width, height: width, backgroundColor: 'green'}} />
+</View>
+```

index.js

@@ -6,6 +6,7 @@ import useAccessibilityInfo from './lib/useAccessibilityInfo'
 import useKeyboard from './lib/useKeyboard'
 import useInteractionManager from './lib/useInteractionManager'
 import useDeviceOrientation from './lib/useDeviceOrientation'
+import useLayout from './lib/useLayout'
 
 export {
   useDimensions,
@@ -16,4 +17,5 @@ export {
   useKeyboard,
   useInteractionManager,
   useDeviceOrientation,
+  useLayout
 }

lib/useLayout.js

@@ -0,0 +1,13 @@
+export default function useLayout() {
+    const [layout, setLayout] = React.useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    })
+    const onLayout = React.useCallback(e => setLayout(e.nativeEvent.layout), [])
+    return {
+        onLayout,
+        ...layout,
+    }
+}