-
Notifications
You must be signed in to change notification settings - Fork 24k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: added
crossOrigin, referrerPolicy, srcSet, width, `heig…
…ht` and `src` props to the Image Component. (#34481) Summary: This PR is for adding the support for `crossOrigin`, `referrerPolicy`, `width`, `height` and `srcSet` props to Image Component and mapping the `src` prop to `source.uri` of Image Component for the issue #34424. An example is also added in the RNTester ImageExample. ## Changelog [General] [Changed] - Map the `src` prop to `source.uri` prop in Image Component. [General] [Added] - added `crossOrigin`, `referrerPolicy`, `width`, `height` and `srcSet` props to Image Component. Pull Request resolved: #34481 Test Plan: 1. Navigate to Image Component Example in the RNTester app. 2. Contains an example of the Image component using the `src` and `srcSet` prop. 3. For headers, inspect the Image request using Flipper. <img src="https://user-images.githubusercontent.com/32268377/186153246-d7b72ce3-e082-46d9-87d1-aefacd3af34f.png" height="500" /> Reviewed By: christophpurrer Differential Revision: D38982041 Pulled By: cipolleschi fbshipit-source-id: dd6594e39b8f3b36cfcdafa35695254034f1fb7f
- Loading branch information
1 parent
32d12e8
commit 47a05bc
Showing
6 changed files
with
323 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @flow strict-local | ||
| * @format | ||
| */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| import type {ResolvedAssetSource} from './AssetSourceResolver'; | ||
| import type {ImageProps} from './ImageProps'; | ||
|
|
||
| import resolveAssetSource from './resolveAssetSource'; | ||
|
|
||
| /** | ||
| * A function which returns the appropriate value for image source | ||
| * by resolving the `source`, `src` and `srcSet` props. | ||
| */ | ||
| export function getImageSourcesFromImageProps( | ||
| imageProps: ImageProps, | ||
| ): ?ResolvedAssetSource | $ReadOnlyArray<{uri: string, ...}> { | ||
| let source = resolveAssetSource(imageProps.source); | ||
|
|
||
| let sources; | ||
|
|
||
| const {crossOrigin, referrerPolicy, src, srcSet, width, height} = imageProps; | ||
|
|
||
| const headers: {[string]: string} = {}; | ||
| if (crossOrigin === 'use-credentials') { | ||
| headers['Access-Control-Allow-Credentials'] = 'true'; | ||
| } | ||
| if (referrerPolicy != null) { | ||
| headers['Referrer-Policy'] = referrerPolicy; | ||
| } | ||
| if (srcSet != null) { | ||
| const sourceList = []; | ||
| const srcSetList = srcSet.split(', '); | ||
| // `src` prop should be used with default scale if `srcSet` does not have 1x scale. | ||
| let shouldUseSrcForDefaultScale = true; | ||
| srcSetList.forEach(imageSrc => { | ||
| const [uri, xScale = '1x'] = imageSrc.split(' '); | ||
| if (!xScale.endsWith('x')) { | ||
| console.warn( | ||
| 'The provided format for scale is not supported yet. Please use scales like 1x, 2x, etc.', | ||
| ); | ||
| } else { | ||
| const scale = parseInt(xScale.split('x')[0], 10); | ||
| if (!isNaN(scale)) { | ||
| // 1x scale is provided in `srcSet` prop so ignore the `src` prop if provided. | ||
| shouldUseSrcForDefaultScale = | ||
| scale === 1 ? false : shouldUseSrcForDefaultScale; | ||
| sourceList.push({headers: headers, scale, uri, width, height}); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| if (shouldUseSrcForDefaultScale && src != null) { | ||
| sourceList.push({ | ||
| headers: headers, | ||
| scale: 1, | ||
| uri: src, | ||
| width, | ||
| height, | ||
| }); | ||
| } | ||
| if (sourceList.length === 0) { | ||
| console.warn('The provided value for srcSet is not valid.'); | ||
| } | ||
|
|
||
| sources = sourceList; | ||
| } else if (src != null) { | ||
| sources = [{uri: src, headers: headers, width, height}]; | ||
| } else { | ||
| sources = source; | ||
| } | ||
| return sources; | ||
| } |
Oops, something went wrong.