[add] Image support for blurRadius, tintColor, and shadows

Use CSS filters to implement React Native image styles.

Ref #362
Ref #548
This commit is contained in:
Nicolas Gallagher
2018-05-24 20:31:21 -07:00
parent 026a92fd53
commit 3153cd8213
7 changed files with 136 additions and 18 deletions

View File

@@ -21,6 +21,7 @@ import UIExplorer, {
Description,
DocItem,
Section,
StyleList,
storiesOf
} from '../../ui-explorer';
@@ -34,6 +35,12 @@ const ImageScreen = () => (
<Section title="Props">
<DocItem name="...View props" />
<DocItem
name="blurRadius"
typeInfo="?number"
description="The blur radius of the blur filter added to the image"
/>
<DocItem
name="defaultSource"
typeInfo="?object"
@@ -122,7 +129,11 @@ const ImageScreen = () => (
}}
/>
<DocItem name="style" typeInfo="?style" />
<DocItem
name="style"
typeInfo="?style"
description={<StyleList stylePropTypes={stylePropTypes} />}
/>
</Section>
<Section title="Properties">
@@ -168,4 +179,17 @@ const ImageScreen = () => (
</UIExplorer>
);
const stylePropTypes = [
{
name: '...View#style'
},
{
name: 'resizeMode'
},
{
name: 'tintColor',
typeInfo: 'color'
}
];
storiesOf('Components', module).add('Image', ImageScreen);