useImageDimensions

README.md

@@ -26,6 +26,7 @@ yarn add @react-native-community/hooks
 - [useCameraRoll](https://github.com/react-native-community/hooks#usecameraroll)
 - [useClipboard](https://github.com/react-native-community/hooks#useclipboard)
 - [useDimensions](https://github.com/react-native-community/hooks#usedimensions)
+- [useImageDimensions](https://github.com/react-native-community/hooks#useImageDimensions)
 - [useKeyboard](https://github.com/react-native-community/hooks#usekeyboard)
 - [useInteractionManager](https://github.com/react-native-community/hooks#useinteractionmanager)
 - [useDeviceOrientation](https://github.com/react-native-community/hooks#usedeviceorientation)
@@ -104,6 +105,18 @@ const { width, height } = useDimensions().window
 const screen = useDimensions().screen
 ```
 
+### `useImageDimensions`
+
+```js
+import {useImageDimensions} from '@react-native-community/hooks'
+
+const source = require('./assets/yourImage.png')
+// or
+const source = {uri: 'https://your.image.URI'}
+
+const {width, height, loading, error} = useImageDimensions(source)
+```
+
 ### `useKeyboard`
 
 ```js

src/index.ts

@@ -8,6 +8,7 @@ import useKeyboard from './useKeyboard'
 import useInteractionManager from './useInteractionManager'
 import useDeviceOrientation from './useDeviceOrientation'
 import useLayout from './useLayout'
+import useImageDimensions from './useImageDimensions'
 
 export {
   useDimensions,
@@ -20,4 +21,5 @@ export {
   useInteractionManager,
   useDeviceOrientation,
   useLayout,
+  useImageDimensions,
 }

src/useImageDimensions.ts

@@ -0,0 +1,36 @@
+import {useEffect, useState} from 'react'
+import {Image, ImageRequireSource} from 'react-native'
+
+export interface URISource {
+  uri: string
+}
+
+/**
+ * @param source either a remote URL or a local file resource.
+ * @returns original image width and height.
+ */
+function useImageDimensions(source: ImageRequireSource | URISource) {
+  const [state, setState] = useState<{
+    width?: number
+    height?: number
+    loading?: boolean
+    error?: any
+  }>({})
+  useEffect(() => {
+    if (typeof source === 'object' && typeof source.uri === 'string') {
+      setState({loading: true})
+      Image.getSize(
+        source.uri,
+        (width, height) => setState({width, height}),
+        error => setState({error}),
+      )
+    } else if (typeof source === 'number') {
+      setState(Image.resolveAssetSource(source))
+    } else {
+      setState({error: 'not implemented'})
+    }
+  }, [source])
+  return state
+}
+
+export default useImageDimensions