Summary:
`<Image resizeMode="center">` already works on iOS (implemented in #8792), but is neither tested nor documented the way the other `resizeMode` values are.
This PR primarily enables the relevant RNTester case on iOS, and secondarily copies over the doc comment from `Image.android.js` to `Image.ios.js`. A PR to `react-native-website` will follow shortly and it is there I will try and revise the wording a bit.
Updated RNTester screenshot (iOS):
<img src=https://user-images.githubusercontent.com/2246565/35470720-44b38282-0357-11e8-941c-1b3c5a1b2f3b.png width=300>
react-native-website PR coming soon.
[IOS] [MINOR] [Image] - Include resizeMode=center in RNTester
Closes https://github.com/facebook/react-native/pull/17759
Differential Revision: D6829051
Pulled By: hramos
fbshipit-source-id: c6e0000a75765e8bf3a1d0306aaafad002b14a58
Summary:
Improve the error message shown when you try to nest components in an
`<Image>` component by referencing the `<ImageBackground>` component.
It would be helpful if the error message displayed when you try to nest components in an `<Image>` component mentioned the `<ImageBackground>` component. Especially since this component is not yet well documented.
[IOS][MINOR][Libraries/Image/Image.ios.js] - Surfaced `<ImageBackground>` in error message
[ANDROID][MINOR][Libraries/Image/Image.android.js] - Surfaced `<ImageBackground>` in error message
Closes https://github.com/facebook/react-native/pull/16880
Differential Revision: D6369396
Pulled By: shergin
fbshipit-source-id: c4ae4dbb77d0fce6cbd7a42d1957d16112b24549
Summary:
Got frustrated for a minute trying to figure out why the code I copy pasted from the docs wasn't working
The link I replaced the broken one with is the one used in the iOS device example next to the sample code. It can be found at https://facebook.github.io/react-native/img/favicon.png
[DOCS] [MINOR] [Libraries/Image/Image.ios.js] - Broken image link in the example code at
Closes https://github.com/facebook/react-native/pull/16569
Differential Revision: D6174048
Pulled By: hramos
fbshipit-source-id: 8c008ab06e8719dfca6a9964d553248c4f088882
Summary:
Now intrinsic content size of <Image> is implemented natively on iOS and now it is actually
`intrinsicContentSize`, not just overrided `height` and `width` styles (which was incorrect and hacky).
This change also removes support of nested content inside <Image>.
This is a first commit in the row where we improve <Image> implementation.
Reviewed By: mmmulani
Differential Revision: D5189017
fbshipit-source-id: eab3defa3d86a5d4219b4f4925ab7460b58d760f
Summary:
The relevant changes in the PR are to Libraries/StyleSheet/EdgeInsetsPropType.js; the rest are just removals of FlowIgnores.
The definition of the relevant types is [here](https://github.com/facebook/flow/blob/master/lib/react.js#L262-L271).
The long and short of it is that for whatever reason, Flow is unable to realize that `ReactPropsChainableTypeChecker` is a subtype of `ReactPropsCheckType` unless we assert it. Once we explicitly hint this to the typechecker, it realizes that `EdgeInsetsPropType` is indeed a valid React PropType, and stops complaining that it isn't.
Closes https://github.com/facebook/react-native/pull/16437
Differential Revision: D6109742
Pulled By: sahrens
fbshipit-source-id: e4e10720b68c912d0372d810409f389b65d7f4b1
Summary:
It is quite confusing that the 'data:' uri scheme is not documented, but working.
It is very useful when getting e.g. an icon from a REST call.
Also, the mandatory size style for network & data images should be mentioned here, not only in the image guide.
<!--
Thank you for sending the PR!
If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!
Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.
Happy contributing!
-->
Closes https://github.com/facebook/react-native/pull/14826
Differential Revision: D5401671
Pulled By: hramos
fbshipit-source-id: 8f1f28a94095eeaccae9234e059e0983ba3556b2
Summary:
This replaces all uses of `React.createClass` with `createReactClass` from the `create-react-class` package, attempting to match use of `var` and `const` according to local style.
Fixes#14620
Refs #14712
Closes https://github.com/facebook/react-native/pull/14729
Differential Revision: D5321810
Pulled By: hramos
fbshipit-source-id: ae7b40640b2773fd89c3fb727ec87f688bebf585
Summary:
The lack of very clear docs on supported image formats is causing unnecessary issues (#13806).
This should mitigate and keep the issue list cleaner.
Its only a documentation change. No code changes made.
Closes https://github.com/facebook/react-native/pull/13807
Differential Revision: D5023002
Pulled By: javache
fbshipit-source-id: b1e3562ae7649cf71833b300e125966d6e832a69
Summary:
cc hramos
Pretty sure I've hit all of the places where AppRegistry is called in CRNA-pastable examples. Let me know whether you think we need to approach the version lag differently, I figure a caveat is as natural a place to call it out as any.
If you end up finding anything else that needs tweaking before cherry picking, I'm happy to push that up here too.
Closes https://github.com/facebook/react-native/pull/13744
Differential Revision: D5071038
Pulled By: hramos
fbshipit-source-id: 4a4a6f2a73079aca627f17d75a4e4b395ecbd4a8
Summary:
Thanks for submitting a PR! Please read these instructions carefully:
React Native crashes hard on fresco 0.11.0 - see #13345
Repro case in #13345
Closes https://github.com/facebook/react-native/pull/13419
Differential Revision: D4913258
Pulled By: javache
fbshipit-source-id: 8beb55102e0f2d362c77698a35ea7d57fdcba48d
Summary:
I noticed I didn't get type defs anymore for react-native. Looks like it is broken since we removed the .flow file in 3e153b2a5b. To fix it we can now enable flow in react-native-implementation since it now supports properties.
**Test plan**
Tested that I get type hints when using imports from react-native in a project.
Closes https://github.com/facebook/react-native/pull/12917
Differential Revision: D4704753
Pulled By: ericvicenti
fbshipit-source-id: cf882588d7f371931de8d7861a1a6d50f6c425dc
Summary:
Clearly state that the `getSize()` does not work for static image resources because it is assumed the developer knows their static image resource size (the reason I got from a comment on a github issue by a react native contributor).
This missing documentation cost me about 30 minutes to figure out why it didn't work for my static image resource and so I decided to update the documentation 💃
Closes https://github.com/facebook/react-native/pull/11645
Differential Revision: D4533463
Pulled By: lacker
fbshipit-source-id: 70e175ea30a5540c8a9f2a0c040585c711d82ac3
Summary: Fixes the prop type of `accessibilityLabel` in `<Image>` so that it matches that of `<View>`.
Reviewed By: fkgozali
Differential Revision: D4499103
fbshipit-source-id: 66bf3dce60bd79857849e0c46c989e7866d83d81
Summary:
In the context of an app an image exists in three resolutions on the server: `thumb` (30px) `feed` (300px) `full` (900px). When looking at an individual item a user can come either from the feed, via a permalink or from other parts of the app. This allows a situation where the `feed` image might or might not already be loaded somewhere in the app. In the detail view I want to render `thumb` with a blur (to quickly display something), then the `feed` image if it exists to have something decent to display until `full` loads. However it is quite a waste to load the `feed` image if it isn't already in cache, and will slow down the time until `full` is loaded. It is possible to track the navigation from feed->detail and that the `feed` image has actually completed loading by the feed component however as component hierarchies grow this turns into quite a lot of prop passing and bad separation of concerns.
NSURLRequests accepts a [Cache Policy](https://developer.apple.com/reference/fo
Closes https://github.com/facebook/react-native/pull/10844
Differential Revision: D4425959
Pulled By: lacker
fbshipit-source-id: 679835439c761a2fc894f56eb6d744c036cf0b49
Summary:
When building a native component which takes an image reference as a prop, `resolveAssetSource` needs to be called on the image reference. If this isn't done, the native component may receive the opaque type returned by `require` (e.g. `require('./foo.png')`) which is useless to the native component. `resolveAssetSource` is used by builtin components that take image references such as `Image`, `WebView` and `MapView`.
This change makes `resolveAssetSource` public so that third-party native components can correctly handle image references.
**Test plan (required)**
Verified that `Image.resolveAssetSource` works in a test app. Also, my team is using this change in our app.
Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/10904
Differential Revision: D4177803
Pulled By: ericvicenti
fbshipit-source-id: ffc511b9340325f7d1111002309cd8558ab8e6b0
Summary:
iOS supports an Image onError event. Android was firing the event but it was never reaching JavaScript because Android didn't include this event in `getExportedCustomDirectEventTypeConstants`.
**Test plan (required)**
Verified that the `onError` event now fires in a test app.
My team uses this change in our app.
Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/10902
Differential Revision: D4180149
Pulled By: ericvicenti
fbshipit-source-id: 4bf0b9aa7dc221d838d7b6b3e88bb47196dcadef
Summary:
Here's a little background. Resizing is inferior to scaling. See http://frescolib.org/docs/resizing-rotating.html#_
Currently, React Native has a heuristic to use resize when the image is likely to be from the device's camera. However, there may be other cases where a developer wants to use resize. For example, when the developer knows they'll be downloading a large image from a service but the image will be rendered at a small size on the device.
This change adds a `resizeMethod` prop to the `Image` component so developers can choose how Fresco resizes the image. The options are 'auto', 'resize', or 'scale'. When 'auto' is specified, a heuristic is used to choose between 'resize' and 'scale'. The default value is 'auto'.
**Test plan (required)**
In a small test app, verified that the `resizeMethod` prop properly influences the mechanism that is used to resize the image (e.g. resize or scale).
Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/9652
Differential Revision: D3841322
Pulled By: foghina
fbshipit-source-id: 6c78b5c75ea73053aa10386afd4cbff45f5b8ffe
Summary:
I've seen quite a few newbs trip on this, so I'm fixing it.
First - you have to set the width/height on a remote image, otherwise nothing shows. This is [even on stack overflow](http://stackoverflow.com/questions/30091398/unable-to-display-image-with-react-native-with-uri).
Second - with the addition of ATS in iOS most people who copy/paste this example will not be able to load an insecure image, so I changed it to the `https`.
**RESULT** this doc becomes copy/paste friendly again for beginners.
Closes https://github.com/facebook/react-native/pull/9235
Differential Revision: D3675478
Pulled By: JoelMarcey
fbshipit-source-id: 5b414caa40cda72dec4eace686278c26c251c4bb
Summary: Mirrors Android's support for multiple sources for Image, allowing us to fetch new images as the size of the view changes.
Reviewed By: mmmulani
Differential Revision: D3615134
fbshipit-source-id: 3d0bf2b75f63a4379e0e49f2dab9aea351b31d5f
Summary:
Addresses this comment: https://github.com/facebook/react-native/issues/2296#issuecomment-232446493
This pull request adds the `center` value to `ImageResizeMode`.
When set, it will center the image within its frame.
If the image is larger than its frame, the image is downscaled while maintaining its aspect ratio.
That is how the Android implementation works, too.
Sorry, don't have time to write tests. 😢
Any reviewers should make sure `RCTTargetRect` returns the correct value when:
- the image is smaller than its frame (ie: no downscaling needed)
- the image is larger than its frame (should be downscaled to avoid clipping)
Closes https://github.com/facebook/react-native/pull/8792
Differential Revision: D3586134
Pulled By: javache
fbshipit-source-id: 78fb8e5928284003437dac2c9ad264fa584f73ec
Summary: This removes `node_modules/react` from the list of directories that are used for haste module resolutions. Modules required from React are now imported with `require('react/lib/…')`.
Reviewed By: astreet
Differential Revision: D3509863
fbshipit-source-id: 32cd34e2b8496f0a6676dbe6bb1eacc18124c01e
Summary:
This adds a new resize mode for iOS 'repeat' that tiles the image over it's frame. This allow to easily create a view with a repeating background pattern which there is no way to do at the moment without including a bunch of different sized assets.
I'm not 100% sure it should be a resizeMode or a separate prop but I went with resizeMode since it made more sense to me and the are not really any use cases where we'd want to use this with another resizeMode other than 'stretch'.
**Test plan**
Tested mainly by adding a UIExplorer example, also tested that changing the resizeMode prop from and to 'repeat' worked properly.
I'd like to implement this on Android too but it is a bit trickier since Fresco's ImageView doesn't support image tiling and would require submitting a PR there too :(
Closes https://github.com/facebook/react-native/pull/7968
Differential Revision: D3469119
Pulled By: javache
fbshipit-source-id: ab9dbfe448a5b0771dbf0c41fcceeb366210f583
Summary:
Now that we no longer have a separate NetworkImageView implementation, we can remove that code path from Image.js
I've also moved the prefetch method into RCTImageViewManager for consistency with the getImageSize method, which means we no longer need to export the RCTImageLoader module to js.
Reviewed By: javache
Differential Revision: D3398157
fbshipit-source-id: fbbcf90a61549831ad28bad0cb3b50c375aae32c
Summary:
Allows developers to specify headers to include in the HTTP request
when fetching a remote image. For example, one might leverage this
when fetching an image from an endpoint that requires authentication:
```
<Image
style={styles.logo}
source={{
uri: 'http://facebook.github.io/react/img/logo_og.png',
headers: {
Authorization: 'someAuthToken'
}
}}
/>
```
Note that the header values must be strings.
Works on iOS and Android.
**Test plan (required)**
- Ran a small example like the one above on iOS and Android and ensured the headers were sent to the server.
- Ran a small example to ensure that \<Image\> components without headers still work.
- Currently using this code in our app.
Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/7338
Reviewed By: javache
Differential Revision: D3371458
Pulled By: nicklockwood
fbshipit-source-id: cdb24fe2572c3ae3ba82c86ad383af6d85157e20
Summary:
Previously, only Text and Image could be nested within Text. Now, any
view can be nested within Text. One restriction of this feature is
that developers must give inline views a width and a height via
the style prop.
Previously, inline Images were supported by using iOS's built-in support
for rendering images with an NSAttributedString via NSTextAttachment.
However, NSAttributedString doesn't support rendering arbitrary views.
This change adds support for nesting views within Text by creating one
NSTextAttachment per inline view. The NSTextAttachments act as placeholders.
They are set to be the size of the corresponding view. After the text is
laid out, we query the text system to find out where it has positioned each
NSTextAttachment. We then position the views to be at those locations.
This commit also contains a change in `RCTShadowText.m`
`_setParagraphStyleOnAttributedString:heightOfTallestSubview:`. It now only sets
`lineHeight`, `textAlign`, and `writingDirection` when they've actua
Closes https://github.com/facebook/react-native/pull/7304
Reviewed By: javache
Differential Revision: D3365373
Pulled By: nicklockwood
fbshipit-source-id: 66d149eb80c5c6725311e1e46d7323eec086ce64
Summary:
Previously, only Text and Image could be nested within Text. Now, any
view can be nested within Text. One restriction of this feature is
that developers must give inline views a width and a height via
the style prop.
Previously, inline Images were supported by using iOS's built-in support
for rendering images with an NSAttributedString via NSTextAttachment.
However, NSAttributedString doesn't support rendering arbitrary views.
This change adds support for nesting views within Text by creating one
NSTextAttachment per inline view. The NSTextAttachments act as placeholders.
They are set to be the size of the corresponding view. After the text is
laid out, we query the text system to find out where it has positioned each
NSTextAttachment. We then position the views to be at those locations.
This commit also contains a change in `RCTShadowText.m`
`_setParagraphStyleOnAttributedString:heightOfTallestSubview:`. It now only sets
`lineHeight`, `textAlign`, and `writingDirection` when they've actua
Closes https://github.com/facebook/react-native/pull/7304
Differential Revision: D3269333
Pulled By: nicklockwood
fbshipit-source-id: 2b59f1c5445a4012f9c29df9f10f5010060ea517
Summary:Adds `Image.prefetch` to prefetch remote images before they are used in an actual `Image` component. This is based off of #4420 by sospartan and skevy's work.
Closes https://github.com/facebook/react-native/pull/6774
Differential Revision: D3153729
Pulled By: bestander
fb-gh-sync-id: ef61412e051a49b42ae885edce7905a8ca0da23f
fbshipit-source-id: ef61412e051a49b42ae885edce7905a8ca0da23f
Summary: This diff introduces a blur radius property to the Image component on ios. If the radius specified is greater then 0 then native will apply a blur filter to the image
Reviewed By: nicklockwood
Differential Revision: D3054671
fb-gh-sync-id: d7a81ce5a08a3a2091c583f5053c6a86638b21b2
shipit-source-id: d7a81ce5a08a3a2091c583f5053c6a86638b21b2
Héctor Ramos
Moti Zilberman
Valentin Shergin
Nathan Brown
Brian Solon
Arjun Munji
ashoat
Gustavo Gard
David Vacca
Kevin Gozali
Felix Oghina
harry-g
Seth Fitzsimmons
Francisco Sales
Jean Regisser
Adam Perry
Steffen Forkmann
Brian Vaughn
Janic Duplessis
Mohammed
Jeff Morrison
Tim Yung
Koen Punt
Peter Salanki
Drew Volz
AgtLucas
Adam Comella
David Aurelio
Mehdi Mulani
Gant
Nicolas Charpentier
David Goldman
aleclarsoniv
Joel Marcey
Nick Lockwood
Hedger Wang
James Ide
Reem Helou
