mirror of
https://github.com/status-im/react-native.git
synced 2025-01-09 09:12:02 +00:00
4c83237511
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 https://github.com/facebook/react-native/pull/7968 Differential Revision: D3469119 Pulled By: javache fbshipit-source-id: ab9dbfe448a5b0771dbf0c41fcceeb366210f583
52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @providesModule ImageResizeMode
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
var keyMirror = require('fbjs/lib/keyMirror');
|
|
|
|
/**
|
|
* ImageResizeMode - Enum for different image resizing modes, set via
|
|
* `resizeMode` style property on `<Image>` components.
|
|
*/
|
|
var ImageResizeMode = keyMirror({
|
|
/**
|
|
* contain - The image will be resized such that it will be completely
|
|
* visible, contained within the frame of the View.
|
|
*/
|
|
contain: null,
|
|
/**
|
|
* cover - The image will be resized such that the entire area of the view
|
|
* is covered by the image, potentially clipping parts of the image.
|
|
*/
|
|
cover: null,
|
|
/**
|
|
* stretch - The image will be stretched to fill the entire frame of the
|
|
* view without clipping. This may change the aspect ratio of the image,
|
|
* distorting it.
|
|
*/
|
|
stretch: null,
|
|
/**
|
|
* center - The image will be scaled down such that it is completely visible,
|
|
* if bigger than the area of the view.
|
|
* The image will not be scaled up.
|
|
*/
|
|
center: null,
|
|
|
|
/**
|
|
* repeat - The image will be repeated to cover the frame of the View. The
|
|
* image will keep it's size and aspect ratio.
|
|
*/
|
|
repeat: null,
|
|
});
|
|
|
|
module.exports = ImageResizeMode;
|