Repository: expo/expo
File: packages/expo-image/src/useImage.ts (TypeScript)

Code before:
'use client';

import { DependencyList, useEffect, useRef, useState } from 'react';

import { Image } from './Image';
import type { ImageLoadOptions, ImageRef, ImageSource } from './Image.types';
import { resolveSource } from './utils/resolveSources';

/**
 * A hook that loads an image from the given source and returns a reference
 * to the native image instance, or `null` until the first image is successfully loaded.
 *
 * It loads a new image every time the `uri` of the provided source changes.
 * To trigger reloads in some other scenarios, you can provide an additional dependency list.
 *
 * > **Warning**: Avoid using this hook for large images without specifying size constraints,
 * > as it may cause crashes due to excessive memory usage. It is recommended to use either
 * > `maxWidth` or `maxHeight` option to scale down the image appropriately for your use case.
 *
 * @platform android
 * @platform ios
 * @platform web
 *
 * @example
 * ```ts
 * import { useImage, Image } from 'expo-image';
 * import { Text } from 'react-native';
 *
 * export default function MyImage() {
 *   const image = useImage('https://picsum.photos/1000/800', {
 *     maxWidth: 800,
 *     onError(error, retry) {
 *       console.error('Loading failed:', error.message);
 *     }
 *   });
 *
 *   if (!image) {
 *     return <Text>Image is loading...</Text>;
 *   }
 *
 *   return <Image source={image} style={{ width: image.width / 2, height: image.height / 2 }} />;

Review comment (suggestion):
```suggestion
 * > **warning** **Warning**: Avoid using this hook for large images without specifying size constraints,
```

First time adding `**warning**` just adds the type of the callout:

<img width="2342" height="302" alt="CleanShot 2026-01-27 at 18 07 28@2x" src="https://github.com/user-attachments/assets/7829d054-0053-4473-afd8-d0f8d0297d4c" />

Let's use it that way and then add a callout title

Code after:
'use client';

import { DependencyList, useEffect, useRef, useState } from 'react';

import { Image } from './Image';
import type { ImageLoadOptions, ImageRef, ImageSource } from './Image.types';
import { resolveSource } from './utils/resolveSources';

/**
 * A hook that loads an image from the given source and returns a reference
 * to the native image instance, or `null` until the first image is successfully loaded.
 *
 * It loads a new image every time the `uri` of the provided source changes.
 * To trigger reloads in some other scenarios, you can provide an additional dependency list.
 *
 * > **warning** Avoid using this hook for large images without specifying size constraints,
 * > as it may cause crashes due to excessive memory usage. It is recommended to use either
 * > `maxWidth` or `maxHeight` option to scale down the image appropriately for your use case.
 *
 * @platform android
 * @platform ios
 * @platform web
 *
 * @example
 * ```ts
 * import { useImage, Image } from 'expo-image';
 * import { Text } from 'react-native';
 *
 * export default function MyImage() {
 *   const image = useImage('https://picsum.photos/1000/800', {
 *     maxWidth: 800,
 *     onError(error, retry) {
 *       console.error('Loading failed:', error.message);
 *     }
 *   });
 *
 *   if (!image) {
 *     return <Text>Image is loading...</Text>;
 *   }
 *
 *   return <Image source={image} style={{ width: image.width / 2, height: image.height / 2 }} />;