react-native/Libraries/Image/ImageStylePropTypes.js
Noam Bartov f68281a0d8 added support for overlayColor property for image
Summary:
In Android, Fresco's default rounding corners support mode is BITMAP_ONLY which doesn't work in all cases (such as animated GIF's, some scale types, etc.).
Specifying the new "overlayColor" property on an Image will cause Fresco to switch to the other rounding corners mode, OVERLAY_COLOR, and will draw rounded corners by overlaying the solid color specified.

Fresco's behaviour is explained here: http://frescolib.org/docs/rounded-corners-and-circles.html
Closes https://github.com/facebook/react-native/pull/5366

Reviewed By: svcscm

Differential Revision: D2854696

Pulled By: mkonicek

fb-gh-sync-id: 251701ee8a64acbfc22694e9d4661c40eef75725
2016-01-24 14:00:39 -08:00

61 lines
2.0 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 ImageStylePropTypes
* @flow
*/
'use strict';
var ImageResizeMode = require('ImageResizeMode');
var LayoutPropTypes = require('LayoutPropTypes');
var ReactPropTypes = require('ReactPropTypes');
var ColorPropType = require('ColorPropType');
var ShadowPropTypesIOS = require('ShadowPropTypesIOS');
var TransformPropTypes = require('TransformPropTypes');
var ImageStylePropTypes = {
...LayoutPropTypes,
...ShadowPropTypesIOS,
...TransformPropTypes,
resizeMode: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)),
backfaceVisibility: ReactPropTypes.oneOf(['visible', 'hidden']),
backgroundColor: ColorPropType,
borderColor: ColorPropType,
borderWidth: ReactPropTypes.number,
borderRadius: ReactPropTypes.number,
overflow: ReactPropTypes.oneOf(['visible', 'hidden']),
/**
* iOS-Specific style to "tint" an image.
* Changes the color of all the non-transparent pixels to the tintColor.
* @platform ios
*/
tintColor: ColorPropType,
opacity: ReactPropTypes.number,
/**
* When the image has rounded corners, specifying an overlayColor will
* cause the remaining space in the corners to be filled with a solid color.
* This is useful in cases which are not supported by the Android
* implementation of rounded corners:
* - Certain resize modes, such as 'contain'
* - Animated GIFs
*
* A typical way to use this prop is with images displayed on a solid
* background and setting the `overlayColor` to the same color
* as the background.
*
* For details of how this works under the hood, see
* http://frescolib.org/docs/rounded-corners-and-circles.html
*
* @platform android
*/
overlayColor: ReactPropTypes.string,
};
module.exports = ImageStylePropTypes;