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,23 @@ 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 {dimensions, loading, error} = useImageDimensions(source)
+
+if(loading || error || !dimensions) {
+  return null
+}
+const {width, height, aspectRatio} = dimensions
+```
+
 ### `useKeyboard`
 
 ```js

src/index.ts

@@ -1,13 +1,14 @@
-import {useDimensions} from './useDimensions'
-import {useAppState} from './useAppState'
-import {useBackHandler} from './useBackHandler'
-import {useCameraRoll} from './useCameraRoll'
-import {useClipboard} from './useClipboard'
-import {useAccessibilityInfo} from './useAccessibilityInfo'
-import {useKeyboard} from './useKeyboard'
-import {useInteractionManager} from './useInteractionManager'
-import {useDeviceOrientation} from './useDeviceOrientation'
-import {useLayout} from './useLayout'
+import useDimensions from './useDimensions'
+import useAppState from './useAppState'
+import useBackHandler from './useBackHandler'
+import useCameraRoll from './useCameraRoll'
+import useClipboard from './useClipboard'
+import useAccessibilityInfo from './useAccessibilityInfo'
+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,61 @@
+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 dimensions (width, height and aspect ratio).
+ */
+function useImageDimensions(source: ImageRequireSource | URISource) {
+  const [[dimensions, error], setState] = useState<
+    [{width: number; height: number}?, Error?]
+  >([])
+
+  useEffect(() => {
+    try {
+      if (typeof source === 'number') {
+        const {width, height} = Image.resolveAssetSource(source)
+        setState([{width, height}])
+      } else if (typeof source === 'object' && source.uri) {
+        setState([])
+        Image.getSize(
+          source.uri,
+          (width, height) => setState([{width, height}]),
+          e => setState([dimensions, e]),
+        )
+      } else {
+        throw new Error('not implemented')
+      }
+    } catch (e) {
+      setState([dimensions, e])
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [source])
+
+  return {
+    dimensions:
+      dimensions &&
+      (Object.setPrototypeOf(dimensions, {
+        get aspectRatio(): number {
+          const _this = this as any
+          return _this.width / _this.height
+        },
+      }) as {
+        /**
+         * width to height ratio
+         */
+        readonly aspectRatio: number
+        width: number
+        height: number
+      }),
+    error,
+    get loading() {
+      return !this.dimensions && !this.error
+    },
+  }
+}
+
+export default useImageDimensions