Add tinted vector drawable example to RNTester (facebook#48541)

Summary: Pull Request resolved: facebook#48541 Shows how to use tintColor in conjunction with new XML file format, and serves as a good E2E test bench to ensure that drawables don't accidentally reuse the same state (if the underlying implementation isn't careful enough to call `buildCopy`, both icons will render red) Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D64136753 fbshipit-source-id: 3bd0933e587364425ac14a0635690d4b274a55fe
rubennorte · Jan 10, 2025 · 071506f · 071506f
1 parent 9b646c8
commit 071506f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 25 deletions.
diff --git a/...c/main/public_res/drawable/ic_android.xml → packages/rn-tester/js/assets/ic_android.xml b/...c/main/public_res/drawable/ic_android.xml → packages/rn-tester/js/assets/ic_android.xml
diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js
@@ -612,28 +612,25 @@ class OnPartialLoadExample extends React.Component<
   }
 }
 
-type VectorDrawableExampleState = {||};
-
-type VectorDrawableExampleProps = $ReadOnly<{||}>;
-
-class VectorDrawableExample extends React.Component<
-  VectorDrawableExampleProps,
-  VectorDrawableExampleState,
-> {
-  state: VectorDrawableExampleState = {};
-
-  render(): React.Node {
-    const isEnabled = ReactNativeFeatureFlags.loadVectorDrawablesOnImages();
-    return (
-      <View style={styles.flex}>
-        <RNTesterText>Enabled: {isEnabled ? 'true' : 'false'}</RNTesterText>
-        <View style={styles.vectorDrawableRow}>
-          <Image source={{uri: 'ic_android'}} style={styles.vectorDrawable} />
-        </View>
+const VectorDrawableExample = () => {
+  const isEnabled = ReactNativeFeatureFlags.loadVectorDrawablesOnImages();
+  return (
+    <View style={styles.flex} testID="vector-drawable-example">
+      <RNTesterText>Enabled: {isEnabled ? 'true' : 'false'}</RNTesterText>
+      <View style={styles.horizontal}>
+        <Image
+          source={require('../../assets/ic_android.xml')}
+          style={styles.vectorDrawable}
+        />
+        <Image
+          source={require('../../assets/ic_android.xml')}
+          style={styles.vectorDrawable}
+          tintColor="red"
+        />
       </View>
-    );
-  }
-}
+    </View>
+  );
+};
 
 function CacheControlAndroidExample(): React.Node {
   const [reload, setReload] = React.useState(0);
@@ -934,10 +931,6 @@ const styles = StyleSheet.create({
     boxShadow: '80px 0px 10px 0px hotpink',
     transform: 'rotate(-15deg)',
   },
-  vectorDrawableRow: {
-    flexDirection: 'row',
-    gap: 8,
-  },
   vectorDrawable: {
     height: 64,
     width: 64,
@@ -1763,6 +1756,7 @@ exports.examples = [
   },
   {
     title: 'Vector Drawable',
+    name: 'vector-drawable',
     description:
       'Demonstrating an example of loading a vector drawable asset by name',
     render: function (): React.Node {