Skip to content

Commit

Permalink
Add Image resizeMode repeat on iOS
Browse files Browse the repository at this point in the history
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.
![screen shot 2016-06-07 at 3 06 17 am](https://cloud.githubusercontent.com/assets/2677334/15848755/d95d8046-2c5c-11e6-9f3d-1ce8a1c9c846.png)

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 facebook/react-native#7968

Differential Revision: D3469119

Pulled By: javache

fbshipit-source-id: ab9dbfe448a5b0771dbf0c41fcceeb366210f583
  • Loading branch information
janicduplessis authored and Facebook Github Bot 6 committed Jun 22, 2016
1 parent 04c8939 commit 761ea9e
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions UIExplorer/ImageExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -505,6 +505,18 @@ exports.examples = [
source={image}
/>
</View>
{ Platform.OS === 'ios' ?
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Repeat
</Text>
<Image
style={styles.resizeMode}
resizeMode={Image.resizeMode.repeat}
source={image}
/>
</View>
: null }
{ Platform.OS === 'android' ?
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Expand Down

0 comments on commit 761ea9e

Please sign in to comment.