diff --git a/docs/image.md b/docs/image.md
index 946df2a8bb6..e63d5b4a3de 100644
--- a/docs/image.md
+++ b/docs/image.md
@@ -32,11 +32,11 @@ const styles = StyleSheet.create({
paddingTop: 50,
},
tinyLogo: {
- width: 50,
+ width: 50,
height: 50,
},
logo: {
- width: 66,
+ width: 66,
height: 58,
},
});
@@ -80,11 +80,11 @@ const styles = StyleSheet.create({
paddingTop: 50,
},
tinyLogo: {
- width: 50,
+ width: 50,
height: 50,
},
logo: {
- width: 66,
+ width: 66,
height: 58,
},
});
@@ -116,7 +116,6 @@ export default class DisplayAnImage extends Component {
You can also add `style` to an image:
-
-
@@ -276,91 +275,78 @@ dependencies {
---
-### `blurRadius`
-
-blurRadius: the blur radius of the blur filter added to the image
+### `accessible`
-| Type | Required |
-| ------ | -------- |
-| number | No |
+When true, indicates the image is an accessibility element.
-> Tip : IOS you will need to increase `blurRadius` more than `5`
+| Type | Required | Platform |
+| ---- | -------- | -------- |
+| bool | No | iOS |
---
-### `onLayout`
+### `accessibilityLabel`
-Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`.
+The text that's read by the screen reader when the user interacts with the image.
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| string | No | iOS |
---
-### `onLoad`
-
-Invoked when load completes successfully.
-
-| Type | Required |
-| -------- | -------- |
-| function | No |
-
----
+### `blurRadius`
-### `onLoadEnd`
+blurRadius: the blur radius of the blur filter added to the image
-Invoked when load either succeeds or fails.
+| Type | Required |
+| ------ | -------- |
+| number | No |
-| Type | Required |
-| -------- | -------- |
-| function | No |
+> Tip : IOS you will need to increase `blurRadius` more than `5`
---
-### `onLoadStart`
-
-Invoked on load start.
+### `capInsets`
-e.g., `onLoadStart={(e) => this.setState({loading: true})}`
+When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the [official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets).
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type | Required | Platform |
+| ------------------------------------------------------------------ | -------- | -------- |
+| object: {top: number, left: number, bottom: number, right: number} | No | iOS |
---
-### `resizeMode`
+### `defaultSource`
-Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to `cover`.
+A static image to display while loading the image source.
-- `cover`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
+| Type | Required | Platform |
+| -------------- | -------- | -------- |
+| object, number | No | iOS |
+| number | No | Android |
-- `contain`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
+If passing an object, the general shape is `{uri: string, width: number, height: number, scale: number}`:
-- `stretch`: Scale width and height independently, This may change the aspect ratio of the src.
+- `uri` - a string representing the resource identifier for the image, which should be either a local file path or the name of a static image resource (which should be wrapped in the `require('./path/to/image.png')` function).
+- `width`, `height` - can be specified if known at build time, in which case these will be used to set the default `` component dimensions.
+- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP.
-- `repeat`: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.
+If passing a number:
-- `center`: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.
+- `number` - Opaque type returned by something like `require('./image.jpg')`.
-| Type | Required |
-| ------------------------------------------------------- | -------- |
-| enum('cover', 'contain', 'stretch', 'repeat', 'center') | No |
+> **Note:** On Android, the default source prop is ignored on debug builds.
---
-### `source`
-
-The image source (either a remote URL or a local file resource).
-
-This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments. The native side will then choose the best `uri` to display based on the measured size of the image container. A `cache` property can be added to control how networked request interacts with the local cache. (For more information see [Cache Control for Images](images#cache-control-ios-only)).
+### `fadeDuration`
-The currently supported formats are `png`, `jpg`, `jpeg`, `bmp`, `gif`, `webp` (Android only), `psd` (iOS only). In addition, iOS supports several RAW image formats. Refer to Apple's documentation for the current list of supported camera models (for iOS 12, see https://support.apple.com/en-ca/HT208967).
+Android only. By default, it is 300ms.
-| Type | Required |
-| ------------------- | -------- |
-| ImageSourcePropType | No |
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| number | No | Android |
---
@@ -386,124 +372,137 @@ Invoked on load error with `{nativeEvent: {error}}`.
---
-### `testID`
+### `onLayout`
-A unique identifier for this element to be used in UI Automation testing scripts.
+Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`.
-| Type | Required |
-| ------ | -------- |
-| string | No |
+| Type | Required |
+| -------- | -------- |
+| function | No |
---
-### `resizeMethod`
+### `onLoad`
-The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to `auto`.
+Invoked when load completes successfully.
-- `auto`: Use heuristics to pick between `resize` and `scale`.
+| Type | Required |
+| -------- | -------- |
+| function | No |
-- `resize`: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of `scale` when the image is much larger than the view.
+---
-- `scale`: The image gets drawn downscaled or upscaled. Compared to `resize`, `scale` is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view.
+### `onLoadEnd`
-More details about `resize` and `scale` can be found at http://frescolib.org/docs/resizing.html.
+Invoked when load either succeeds or fails.
-| Type | Required | Platform |
-| ------------------------------- | -------- | -------- |
-| enum('auto', 'resize', 'scale') | No | Android |
+| Type | Required |
+| -------- | -------- |
+| function | No |
---
-### `accessibilityLabel`
+### `onLoadStart`
-The text that's read by the screen reader when the user interacts with the image.
+Invoked on load start.
-| Type | Required | Platform |
-| ------ | -------- | -------- |
-| string | No | iOS |
+e.g., `onLoadStart={(e) => this.setState({loading: true})}`
+
+| Type | Required |
+| -------- | -------- |
+| function | No |
---
-### `accessible`
+### `onPartialLoad`
-When true, indicates the image is an accessibility element.
+Invoked when a partial load of the image is complete. The definition of what constitutes a "partial load" is loader specific though this is meant for progressive JPEG loads.
-| Type | Required | Platform |
-| ---- | -------- | -------- |
-| bool | No | iOS |
+| Type | Required | Platform |
+| -------- | -------- | -------- |
+| function | No | iOS |
---
-### `capInsets`
+### `onProgress`
-When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the [official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets).
+Invoked on download progress with `{nativeEvent: {loaded, total}}`.
-| Type | Required | Platform |
-| --- | --- | --- |
-| object: {top: number, left: number, bottom: number, right: number} | No | iOS |
+| Type | Required | Platform |
+| -------- | -------- | -------- |
+| function | No | iOS |
---
-### `defaultSource`
+### `progressiveRenderingEnabled`
-A static image to display while loading the image source.
+Android only. When true, enables progressive jpeg streaming. https://frescolib.org/docs/progressive-jpegs.html
-| Type | Required | Platform |
-| -------------- | -------- | -------- |
-| object, number | No | iOS |
-| number | No | Android |
+| Type | Required | Platform |
+| ---- | -------- | -------- |
+| bool | No | Android |
-If passing an object, the general shape is `{uri: string, width: number, height: number, scale: number}`:
+---
-- `uri` - a string representing the resource identifier for the image, which should be either a local file path or the name of a static image resource (which should be wrapped in the `require('./path/to/image.png')` function).
-- `width`, `height` - can be specified if known at build time, in which case these will be used to set the default `` component dimensions.
-- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP.
+### `resizeMethod`
-If passing a number:
+The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to `auto`.
-- `number` - Opaque type returned by something like `require('./image.jpg')`.
+- `auto`: Use heuristics to pick between `resize` and `scale`.
-> **Note:** On Android, the default source prop is ignored on debug builds.
+- `resize`: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of `scale` when the image is much larger than the view.
+
+- `scale`: The image gets drawn downscaled or upscaled. Compared to `resize`, `scale` is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view.
+
+More details about `resize` and `scale` can be found at http://frescolib.org/docs/resizing.html.
+
+| Type | Required | Platform |
+| ------------------------------- | -------- | -------- |
+| enum('auto', 'resize', 'scale') | No | Android |
---
-### `onPartialLoad`
+### `resizeMode`
-Invoked when a partial load of the image is complete. The definition of what constitutes a "partial load" is loader specific though this is meant for progressive JPEG loads.
+Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to `cover`.
-| Type | Required | Platform |
-| -------- | -------- | -------- |
-| function | No | iOS |
+- `cover`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
----
+- `contain`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
-### `onProgress`
+- `stretch`: Scale width and height independently, This may change the aspect ratio of the src.
-Invoked on download progress with `{nativeEvent: {loaded, total}}`.
+- `repeat`: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.
-| Type | Required | Platform |
-| -------- | -------- | -------- |
-| function | No | iOS |
+- `center`: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.
+
+| Type | Required |
+| ------------------------------------------------------- | -------- |
+| enum('cover', 'contain', 'stretch', 'repeat', 'center') | No |
---
-### `fadeDuration`
+### `source`
-Android only. By default, it is 300ms.
+The image source (either a remote URL or a local file resource).
-| Type | Required | Platform |
-| ------ | -------- | -------- |
-| number | No | Android |
+This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments. The native side will then choose the best `uri` to display based on the measured size of the image container. A `cache` property can be added to control how networked request interacts with the local cache. (For more information see [Cache Control for Images](images#cache-control-ios-only)).
+
+The currently supported formats are `png`, `jpg`, `jpeg`, `bmp`, `gif`, `webp` (Android only), `psd` (iOS only). In addition, iOS supports several RAW image formats. Refer to Apple's documentation for the current list of supported camera models (for iOS 12, see https://support.apple.com/en-ca/HT208967).
+
+| Type | Required |
+| ------------------- | -------- |
+| ImageSourcePropType | No |
---
-### `progressiveRenderingEnabled`
+### `testID`
-Android only. When true, enables progressive jpeg streaming. https://frescolib.org/docs/progressive-jpegs.html
+A unique identifier for this element to be used in UI Automation testing scripts.
-| Type | Required | Platform |
-| ---- | -------- | -------- |
-| bool | No | Android |
+| Type | Required |
+| ------ | -------- |
+| string | No |
## Methods
@@ -519,11 +518,11 @@ In order to retrieve the image dimensions, the image may first need to be loaded
**Parameters:**
-| Name | Type | Required | Description |
-| --- | --- | --- | --- |
-| uri | string | Yes | The location of the image. |
-| success | function | Yes | The function that will be called if the image was successfully found and width and height retrieved. |
-| failure | function | No | The function that will be called if there was an error, such as failing to retrieve the image. |
+| Name | Type | Required | Description |
+| ------- | -------- | -------- | ---------------------------------------------------------------------------------------------------- |
+| uri | string | Yes | The location of the image. |
+| success | function | Yes | The function that will be called if the image was successfully found and width and height retrieved. |
+| failure | function | No | The function that will be called if there was an error, such as failing to retrieve the image. |
---
@@ -541,12 +540,12 @@ Does not work for static image resources.
**Parameters:**
-| Name | Type | Required | Description |
-| --- | --- | --- | --- |
-| uri | string | Yes | The location of the image. |
-| headers | object | Yes | The headers for the request. |
-| success | function | Yes | The function that will be called if the image was successfully found and width and height retrieved. |
-| failure | function | No | The function that will be called if there was an error, such as failing toto retrieve the image. |
+| Name | Type | Required | Description |
+| ------- | -------- | -------- | ---------------------------------------------------------------------------------------------------- |
+| uri | string | Yes | The location of the image. |
+| headers | object | Yes | The headers for the request. |
+| success | function | Yes | The function that will be called if the image was successfully found and width and height retrieved. |
+| failure | function | No | The function that will be called if there was an error, such as failing toto retrieve the image. |
---
@@ -608,8 +607,8 @@ Resolves an asset reference into an object which has the properties `uri`, `widt
**Parameters:**
-| Name | Type | Required | Description |
-| --- | --- | --- | --- |
-| source | number, object | Yes | A number (opaque type returned by require('./foo.png')) or an `ImageSource`. |
+| Name | Type | Required | Description |
+| ------ | -------------- | -------- | ---------------------------------------------------------------------------- |
+| source | number, object | Yes | A number (opaque type returned by require('./foo.png')) or an `ImageSource`. |
> `ImageSource` is an object like `{ uri: '' }`