mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Add mix-blend-mode examples to rn-tester (#46006)
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/46006 Adding some extra examples for mix-blend-mode And added E2E tests for each mix-blend-mode example Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D60605636 fbshipit-source-id: 553f3a2c3b971c918530bdee5a73108c22bd936e
This commit is contained in:
Jorge Cabiedes Acosta
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
55d35411ae
commit
0f3ed90455
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
@@ -24,14 +24,18 @@ function LayeredView(props: Props) {
|
||||
return (
|
||||
<>
|
||||
<View style={styles.container}>
|
||||
<ImageBackground
|
||||
source={require('../../assets/rainbow.jpeg')}
|
||||
style={[styles.backdrop, {width: 110}]}>
|
||||
<View style={[styles.commonView, props.style]}>
|
||||
<View style={styles.nestedView} />
|
||||
<Text>Hello, World!</Text>
|
||||
<View style={[styles.backdrop, {height: 110, backgroundColor: 'red'}]}>
|
||||
<View
|
||||
style={[
|
||||
styles.backdrop,
|
||||
{isolation: 'isolate', height: 65, backgroundColor: 'blue'},
|
||||
]}>
|
||||
<View style={[styles.commonView, props.style]}>
|
||||
<View style={styles.nestedView} />
|
||||
<Text>Hello, World!</Text>
|
||||
</View>
|
||||
</View>
|
||||
</ImageBackground>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
@@ -54,6 +58,22 @@ function LayeredImage(props: Props) {
|
||||
);
|
||||
}
|
||||
|
||||
function LayeredViewWithState(props: Props): React.Node {
|
||||
const [s, setS] = React.useState(true);
|
||||
setTimeout(() => setS(!s), 5000);
|
||||
|
||||
return <LayeredView style={s ? [props.style] : null} testID={props.testID} />;
|
||||
}
|
||||
|
||||
function LayeredImageWithState(props: Props): React.Node {
|
||||
const [s, setS] = React.useState(true);
|
||||
setTimeout(() => setS(!s), 5000);
|
||||
|
||||
return (
|
||||
<LayeredImage style={s ? [props.style] : null} testID={props.testID} />
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
commonImage: {
|
||||
width: 200,
|
||||
@@ -65,9 +85,19 @@ const styles = StyleSheet.create({
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
},
|
||||
duckContainer: {
|
||||
alignSelf: 'center',
|
||||
width: 150,
|
||||
height: 165,
|
||||
backgroundColor: 'lime',
|
||||
},
|
||||
duck: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
backdrop: {
|
||||
opacity: 0.99, // Creating stacking context
|
||||
height: 110,
|
||||
width: 110,
|
||||
},
|
||||
commonView: {
|
||||
backgroundColor: 'cyan',
|
||||
@@ -108,7 +138,7 @@ const examples: Array<RNTesterModuleExample> = mixBlendModes.map(mode => ({
|
||||
name: mode,
|
||||
render(): React.Node {
|
||||
return (
|
||||
<View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
|
||||
<View style={styles.container} testID={`mix-blend-mode-test-${mode}`}>
|
||||
<LayeredView style={{experimental_mixBlendMode: mode}} />
|
||||
<LayeredImage style={{experimental_mixBlendMode: mode}} />
|
||||
</View>
|
||||
@@ -116,6 +146,167 @@ const examples: Array<RNTesterModuleExample> = mixBlendModes.map(mode => ({
|
||||
},
|
||||
}));
|
||||
|
||||
examples.push(
|
||||
{
|
||||
title: 'Text mix-blend-mode',
|
||||
description: 'mix-blend-mode: Text mix-blend-mode',
|
||||
name: 'text',
|
||||
render(): React.Node {
|
||||
return (
|
||||
<ImageBackground
|
||||
style={[
|
||||
styles.duckContainer,
|
||||
{backgroundColor: 'orange', padding: 10, height: 100},
|
||||
]}
|
||||
testID="mix-blend-mode-test-text">
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
fontWeight: 900,
|
||||
color: 'red',
|
||||
experimental_mixBlendMode: 'overlay',
|
||||
}}>
|
||||
'OVERLAY' BLENDING ON TEXT
|
||||
</Text>
|
||||
</ImageBackground>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Spec Example 1',
|
||||
description: 'mix-blend-mode: Spec Example 1',
|
||||
name: 'spec-example-1',
|
||||
render(): React.Node {
|
||||
return (
|
||||
<View
|
||||
style={styles.duckContainer}
|
||||
testID="mix-blend-mode-test-spec-example-1">
|
||||
<Image
|
||||
style={[styles.duck, {experimental_mixBlendMode: 'multiply'}]}
|
||||
source={require('../../assets/rubber-ducky.png')}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Spec Example 2',
|
||||
description: 'mix-blend-mode: Spec Example 2',
|
||||
name: 'spec-example-2',
|
||||
render(): React.Node {
|
||||
return (
|
||||
<View
|
||||
style={{alignSelf: 'center'}}
|
||||
testID="mix-blend-mode-test-spec-example-2">
|
||||
<View style={{width: 120, height: 120}}>
|
||||
<View
|
||||
style={{
|
||||
width: 80,
|
||||
height: 80,
|
||||
backgroundColor: 'red',
|
||||
borderRadius: '100%',
|
||||
position: 'absolute',
|
||||
isolation: 'isolate',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: 80,
|
||||
height: 80,
|
||||
backgroundColor: 'lime',
|
||||
borderRadius: '100%',
|
||||
position: 'absolute',
|
||||
left: 55,
|
||||
experimental_mixBlendMode: 'difference',
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: 80,
|
||||
height: 80,
|
||||
backgroundColor: 'blue',
|
||||
borderRadius: '100%',
|
||||
position: 'absolute',
|
||||
top: 40,
|
||||
left: 26,
|
||||
experimental_mixBlendMode: 'screen',
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Spec Example 3',
|
||||
description: 'mix-blend-mode: Spec Example 3',
|
||||
name: 'spec-example-3',
|
||||
render(): React.Node {
|
||||
return (
|
||||
<View
|
||||
style={styles.duckContainer}
|
||||
testID="mix-blend-mode-test-spec-example-3">
|
||||
<View
|
||||
style={[
|
||||
{width: '50%', backgroundColor: 'red', isolation: 'isolate'},
|
||||
]}>
|
||||
<Image
|
||||
style={[
|
||||
styles.duck,
|
||||
{
|
||||
experimental_mixBlendMode: 'difference',
|
||||
width: 150,
|
||||
height: 165,
|
||||
},
|
||||
]}
|
||||
source={require('../../assets/rubber-ducky.png')}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'mix-blend-mode with state updates',
|
||||
description: 'Turn mix-blend-mode difference on and off every 5 seconds',
|
||||
render(): React.Node {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<LayeredViewWithState
|
||||
style={{experimental_mixBlendMode: 'difference'}}
|
||||
/>
|
||||
<LayeredImageWithState
|
||||
style={{experimental_mixBlendMode: 'difference'}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'mix-blend-mode & filter',
|
||||
description: 'mix-blend-mode & filter',
|
||||
name: 'mix-blend-mode-filter',
|
||||
render(): React.Node {
|
||||
return (
|
||||
<View style={styles.container} testID="mix-blend-mode-test-filter">
|
||||
<LayeredView
|
||||
style={{
|
||||
experimental_mixBlendMode: 'luminosity',
|
||||
experimental_filter: 'blur(3px)',
|
||||
}}
|
||||
/>
|
||||
<LayeredImage
|
||||
style={{
|
||||
experimental_mixBlendMode: 'difference',
|
||||
experimental_filter: 'hue-rotate(90deg)',
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
exports.title = 'MixBlendMode';
|
||||
exports.category = 'UI';
|
||||
exports.description =
|
||||
|
||||
Reference in New Issue
Block a user