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,26 @@ const { width, height } = useDimensions().window
 const screen = useDimensions().screen
 ```
 
+### `useImageDimensions`
+
+```js
+import {useImageDimensions} from '@react-native-community/hooks'
+
+const imageDimensions = useImageDimensions(require('./assets/yourImage.png'))
+// or
+const imageDimensions = useImageDimensions({uri: 'https://your.image.URI'})
+// or
+const imageDimensions = useImageDimensions({uri: 'https://your.image.URI'}, error => {
+  onImageFetchFailure(error)
+})
+
+if (!imageDimensions) {
+  return null
+}
+
+const {width, height} = imageDimensions
+```
+
 ### `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,59 @@
+import {useEffect, useState} from 'react'
+import {Image, ImageRequireSource} from 'react-native'
+
+export interface URISource {
+  uri: string
+}
+
+type ImageDimensions = {
+  width: number
+  height: number
+} | null
+type FailureCallback = (error: any) => void
+
+/**
+ * @param source local file resource.
+ * @returns Original image width and height.
+ */
+function useImageDimensions(source: ImageRequireSource): ImageDimensions
+/**
+ * @param source remote URL
+ * @param failure the function that will be called if there was an error, such as failing to retrieve the image (see https://reactnative.dev/docs/image#getsize).
+ * @returns Original image width and height.
+ */
+function useImageDimensions(
+  source: URISource,
+  failure?: FailureCallback,
+): ImageDimensions
+function useImageDimensions(
+  source: ImageRequireSource | URISource,
+  failure?: FailureCallback,
+): ImageDimensions
+function useImageDimensions(
+  source: ImageRequireSource | URISource,
+  failure?: FailureCallback,
+) {
+  const [dimensions, setDimensions] = useState<ImageDimensions>()
+  useEffect(() => {
+    if (typeof source === 'object') {
+      const {uri} = source
+      Image.getSize(
+        uri,
+        (width, height) => setDimensions({width, height}),
+        error => {
+          setDimensions(null)
+          if (failure) {
+            failure(error)
+          } else {
+            console.error(error)
+          }
+        },
+      )
+    } else {
+      setDimensions(Image.resolveAssetSource(source))
+    }
+  }, [source, failure])
+  return dimensions
+}
+
+export default useImageDimensions