RN tester example for filters (#44459)

Summary:
Pull Request resolved: #44459

tsia

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D56857709

fbshipit-source-id: 4bbeeed89ec40ca5c9a3472578388699e47f9c9c

packages/rn-tester/js/examples/Filter/FilterExample.js

@@ -0,0 +1,188 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
+
+import React from 'react';
+import {Image, StyleSheet, Text, View} from 'react-native';
+
+const hotdog = require('../../assets/hotdog.jpg');
+
+type Props = $ReadOnly<{
+  style: ViewStyleProp,
+}>;
+
+function StaticViewAndImage(props: Props): React.Node {
+  return (
+    <>
+      <View style={styles.container}>
+        <View style={[props.style, styles.commonView]}>
+          <View style={styles.subview}>
+            <View style={styles.subsubview} />
+            <Text>Hello world!</Text>
+          </View>
+        </View>
+        <View style={styles.commonView}>
+          <View style={styles.subview}>
+            <View style={styles.subsubview} />
+            <Text>Hello world!</Text>
+          </View>
+        </View>
+      </View>
+      <View style={styles.container}>
+        <Image source={hotdog} style={[props.style, styles.commonImage]} />
+        <Image source={hotdog} style={styles.commonImage} />
+      </View>
+    </>
+  );
+}
+
+function StaticViewAndImageWithState(props: Props): React.Node {
+  const [s, setS] = React.useState(true);
+  setTimeout(() => setS(!s), 5000);
+
+  return <StaticViewAndImage style={s ? [props.style] : null} />;
+}
+
+const styles = StyleSheet.create({
+  commonView: {
+    width: 150,
+    height: 150,
+    backgroundColor: '#275752',
+  },
+  commonImage: {
+    width: 150,
+    height: 90,
+  },
+  subview: {
+    width: 75,
+    height: 75,
+    backgroundColor: '#8d2b8f',
+  },
+  subsubview: {
+    width: 38.5,
+    height: 38.5,
+    backgroundColor: '#32a840',
+  },
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+});
+
+exports.title = 'Filter';
+exports.category = 'UI';
+exports.description =
+  'A set of graphical effects that can be applied to a view.';
+exports.examples = [
+  {
+    title: 'Brightness',
+    description: 'brightness(1.5)',
+    render(): React.Node {
+      return (
+        <StaticViewAndImage
+          style={{experimental_filter: [{brightness: 1.5}]}}
+        />
+      );
+    },
+  },
+  {
+    title: 'Opacity',
+    description: 'opacity(0.5)',
+    render(): React.Node {
+      return (
+        <StaticViewAndImage style={{experimental_filter: [{opacity: 0.5}]}} />
+      );
+    },
+  },
+  {
+    title: 'Contrast',
+    description: 'contrast(0.5)',
+    platform: 'android',
+    render(): React.Node {
+      return (
+        <StaticViewAndImage style={{experimental_filter: [{contrast: 0.5}]}} />
+      );
+    },
+  },
+  {
+    title: 'Sepia',
+    description: 'sepia(0.5)',
+    platform: 'android',
+    render(): React.Node {
+      return (
+        <StaticViewAndImage style={{experimental_filter: [{sepia: 0.5}]}} />
+      );
+    },
+  },
+  {
+    title: 'Grayscale',
+    description: 'grayscale(0.5)',
+    platform: 'android',
+    render(): React.Node {
+      return (
+        <StaticViewAndImage style={{experimental_filter: [{grayscale: 0.5}]}} />
+      );
+    },
+  },
+  {
+    title: 'Saturate',
+    description: 'saturate(4)',
+    platform: 'android',
+    render(): React.Node {
+      return (
+        <StaticViewAndImage style={{experimental_filter: [{saturate: 4}]}} />
+      );
+    },
+  },
+  {
+    title: 'Hue Rotate',
+    description: 'hueRotate(-90deg)',
+    platform: 'android',
+    render(): React.Node {
+      return (
+        <StaticViewAndImage
+          style={{experimental_filter: [{hueRotate: '-90deg'}]}}
+        />
+      );
+    },
+  },
+  {
+    title: 'Invert',
+    description: 'invert(0.7)',
+    platform: 'android',
+    render(): React.Node {
+      return (
+        <StaticViewAndImage style={{experimental_filter: [{invert: 0.7}]}} />
+      );
+    },
+  },
+  {
+    title: 'Blur',
+    description: 'blur(10)',
+    platform: 'android',
+    render(): React.Node {
+      return <StaticViewAndImage style={{experimental_filter: [{blur: 10}]}} />;
+    },
+  },
+  {
+    title: 'Filters with state updates',
+    description: 'Turn brightness(1.5) on and off every 5 seconds',
+    render(): React.Node {
+      return (
+        <StaticViewAndImageWithState
+          style={{experimental_filter: [{brightness: 1.5}]}}
+        />
+      );
+    },
+  },
+];

packages/rn-tester/js/utils/RNTesterList.android.js

@@ -306,6 +306,11 @@ const APIs: Array<RNTesterModuleInfo> = ([
     category: 'UI',
     module: require('../examples/Transform/TransformExample'),
   },
+  {
+    key: 'FilterExample',
+    category: 'UI',
+    module: require('../examples/Filter/FilterExample'),
+  },
   {
     key: 'VibrationExample',
     category: 'Basic',

packages/rn-tester/js/utils/RNTesterList.ios.js

@@ -294,6 +294,10 @@ const APIs: Array<RNTesterModuleInfo> = ([
     key: 'TransformExample',
     module: require('../examples/Transform/TransformExample'),
   },
+  {
+    key: 'FilterExample',
+    module: require('../examples/Filter/FilterExample'),
+  },
   {
     key: 'TurboModuleExample',
     module: require('../examples/TurboModule/TurboModuleExample'),