Skip to content

Commit

Permalink
Add drop-shadow test (#45306)
Browse files Browse the repository at this point in the history
Summary:
Pull Request resolved: #45306

Adding missing drop-shadow test to rn-tester.
Added with alpha-hotdog image to show we are creating the shadow with the alpha channel of the view.

Changelog: [Internal]

Reviewed By: cortinico

Differential Revision: D59410148

fbshipit-source-id: 5a03ee84313979f99585b8ca7e07abf9cdbe2396
  • Loading branch information
joevilches authored and facebook-github-bot committed Jul 15, 2024
1 parent 85dd14c commit a96272e
Showing 1 changed file with 34 additions and 2 deletions.
36 changes: 34 additions & 2 deletions packages/rn-tester/js/examples/Filter/FilterExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,19 @@ import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';

const alphaHotdog = require('../../assets/alpha-hotdog.png');
const hotdog = require('../../assets/hotdog.jpg');

type Props = $ReadOnly<{
style: ViewStyleProp,
testID?: string,
imageSource?: number,
}>;

const defaultProps = {
imageSource: hotdog,
};

function StaticViewAndImage(props: Props): React.Node {
return (
<>
Expand All @@ -40,12 +46,21 @@ function StaticViewAndImage(props: Props): React.Node {
</View>
</View>
<View style={styles.container}>
<Image source={hotdog} style={[props.style, styles.commonImage]} />
<Image source={hotdog} style={styles.commonImage} />
<Image
source={props.imageSource}
style={[props.style, styles.commonImage]}
resizeMode="contain"
/>
<Image
source={props.imageSource}
style={styles.commonImage}
resizeMode="contain"
/>
</View>
</>
);
}
StaticViewAndImage.defaultProps = defaultProps;

function StaticViewAndImageWithState(props: Props): React.Node {
const [s, setS] = React.useState(true);
Expand Down Expand Up @@ -195,6 +210,23 @@ exports.examples = [
);
},
},
{
title: 'Drop Shadow',
description: 'drop-shadow(30px 10px 4px #4444dd)',
name: 'drop-shadow',
platform: 'android',
render(): React.Node {
return (
<StaticViewAndImage
style={{
experimental_filter: [{'drop-shadow': '30px 10px 4px #4444dd'}],
}}
testID="filter-test-drop-shadow"
imageSource={alphaHotdog}
/>
);
},
},
{
title: 'Chained filters',
description: 'brightness(1.5) opacity(0.5)',
Expand Down

0 comments on commit a96272e

Please sign in to comment.