Skip to content

Commit b55bdc6

Browse files
authored
Add new props to Image docs (facebook#3310)
1 parent 357254c commit b55bdc6

File tree

1 file changed

+73
-0
lines changed

1 file changed

+73
-0
lines changed

docs/image.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,19 @@ When the image is resized, the corners of the size specified by `capInsets` will
259259

260260
---
261261

262+
### `crossOrigin`
263+
264+
A string of a keyword specifying the CORS mode to use when fetching the image resource. It works similar to crossorigin attribute in HTML.
265+
266+
- `anonymous`: No exchange of user credentials in the image request.
267+
- `use-credentials`: Sets `Access-Control-Allow-Credentials` header value to `true` in the image request.
268+
269+
| Type | Default |
270+
| ---------------------------------------- | ------------- |
271+
| enum(`'anonymous'`, `'use-credentials'`) | `'anonymous'` |
272+
273+
---
274+
262275
### `defaultSource`
263276

264277
A static image to display while loading the image source.
@@ -281,6 +294,16 @@ Fade animation duration in miliseconds.
281294

282295
---
283296

297+
### `height`
298+
299+
Height of the image component.
300+
301+
| Type |
302+
| ------ |
303+
| number |
304+
305+
---
306+
284307
### `loadingIndicatorSource`
285308

286309
Similarly to `source`, this property represents the resource used to render the loading indicator for the image. The loading indicator is displayed until image is ready to be displayed, typically after the image is downloaded.
@@ -393,6 +416,16 @@ More details about `resize` and `scale` can be found at http://frescolib.org/doc
393416

394417
---
395418

419+
### `referrerPolicy`
420+
421+
A string indicating which referrer to use when fetching the resource. Sets the value for `Referrer-Policy` header in the image request. Works similar to `referrerpolicy` attribute in HTML.
422+
423+
| Type | Default |
424+
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
425+
| enum(`'no-referrer'`, `'no-referrer-when-downgrade'`, `'origin'`, `'origin-when-cross-origin'`, `'same-origin'`, `'strict-origin'`, `'strict-origin-when-cross-origin'`, `'unsafe-url'`) | `'strict-origin-when-cross-origin'` |
426+
427+
---
428+
396429
### `resizeMode`
397430

398431
Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to `cover`.
@@ -430,6 +463,34 @@ The currently supported formats are `png`, `jpg`, `jpeg`, `bmp`, `gif`, `webp`,
430463

431464
---
432465

466+
### `src`
467+
468+
A string representing the remote URL of the image. This prop has precedence over `source` prop.
469+
470+
**Example:** `src={'https://reactnative.dev/img/tiny_logo.png'}`
471+
472+
| Type |
473+
| ------ |
474+
| string |
475+
476+
---
477+
478+
### `srcSet`
479+
480+
A string representing comma separated list of possible candidate image source. Each image source contains a URL of an image and a pixel density descriptor. If no descriptor is specified, it defaults to descriptor of `1x`.
481+
482+
If `srcSet` does not contain a `1x` descriptor, the value in `src` is used as image source with `1x` descriptor (if provided).
483+
484+
This prop has precedence over both the `src` and `source` props.
485+
486+
**Example:** `srcSet={'https://reactnative.dev/img/tiny_logo.png 1x, https://reactnative.dev/img/header_logo.svg 2x'}`
487+
488+
| Type |
489+
| ------ |
490+
| string |
491+
492+
---
493+
433494
### `style`
434495

435496
| Type |
@@ -446,6 +507,8 @@ A unique identifier for this element to be used in UI Automation testing scripts
446507
| ------ |
447508
| string |
448509

510+
---
511+
449512
### `tintColor`
450513

451514
Changes the color of all non-transparent pixels to the `tintColor`.
@@ -454,6 +517,16 @@ Changes the color of all non-transparent pixels to the `tintColor`.
454517
| ------------------ |
455518
| [color](colors.md) |
456519

520+
---
521+
522+
### `width`
523+
524+
Width of the image component.
525+
526+
| Type |
527+
| ------ |
528+
| number |
529+
457530
## Methods
458531

459532
### `abortPrefetch()` <div class="label android">Android</div>

0 commit comments

Comments
 (0)