diff --git a/packages/react-native-fantom/src/__tests__/Fantom-itest.js b/packages/react-native-fantom/src/__tests__/Fantom-itest.js
index 81195c474f35..60e0a0288d50 100644
--- a/packages/react-native-fantom/src/__tests__/Fantom-itest.js
+++ b/packages/react-native-fantom/src/__tests__/Fantom-itest.js
@@ -538,7 +538,7 @@ describe('Fantom', () => {
             },
           ],
           props: {
-            foregroundColor: 'rgba(255, 255, 255, 127)',
+            foregroundColor: 'rgba(0, 0, 0, 0)',
           },
           type: 'Paragraph',
         });
diff --git a/packages/react-native/Libraries/Components/__tests__/Button-itest.js b/packages/react-native/Libraries/Components/__tests__/Button-itest.js
index a16688ca7256..1ea59a637420 100644
--- a/packages/react-native/Libraries/Components/__tests__/Button-itest.js
+++ b/packages/react-native/Libraries/Components/__tests__/Button-itest.js
@@ -33,9 +33,7 @@ describe('<Button>', () => {
         ).toEqual(
           // Upper case on Android (also used by Fantom)
           <rn-view backgroundColor="rgba(33, 150, 243, 255)">
-            <rn-paragraph
-              backgroundColor="rgba(255, 255, 255, 127)"
-              foregroundColor="rgba(255, 255, 255, 255)">
+            <rn-paragraph foregroundColor="rgba(255, 255, 255, 255)">
               HELLO
             </rn-paragraph>
           </rn-view>,
@@ -57,9 +55,7 @@ describe('<Button>', () => {
             .toJSX(),
         ).toEqual(
           <rn-view backgroundColor="rgba(0, 0, 255, 255)">
-            <rn-paragraph
-              backgroundColor="rgba(255, 255, 255, 127)"
-              foregroundColor="rgba(255, 255, 255, 255)">
+            <rn-paragraph foregroundColor="rgba(255, 255, 255, 255)">
               HELLO
             </rn-paragraph>
           </rn-view>,
@@ -105,9 +101,7 @@ describe('<Button>', () => {
             .toJSX(),
         ).toEqual(
           <rn-view backgroundColor="rgba(223, 223, 223, 255)">
-            <rn-paragraph
-              backgroundColor="rgba(255, 255, 255, 127)"
-              foregroundColor="rgba(161, 161, 161, 255)">
+            <rn-paragraph foregroundColor="rgba(161, 161, 161, 255)">
               HELLO
             </rn-paragraph>
           </rn-view>,
@@ -189,9 +183,7 @@ describe('<Button>', () => {
             .toJSX(),
         ).toEqual(
           <rn-view backgroundColor="rgba(33, 150, 243, 255)">
-            <rn-paragraph
-              backgroundColor="rgba(255, 255, 255, 127)"
-              foregroundColor="rgba(255, 255, 255, 255)">
+            <rn-paragraph foregroundColor="rgba(255, 255, 255, 255)">
               HELLO
             </rn-paragraph>
           </rn-view>,
@@ -233,9 +225,7 @@ describe('<Button>', () => {
             .toJSX(),
         ).toEqual(
           <rn-view backgroundColor="rgba(223, 223, 223, 255)">
-            <rn-paragraph
-              backgroundColor="rgba(255, 255, 255, 127)"
-              foregroundColor="rgba(161, 161, 161, 255)">
+            <rn-paragraph foregroundColor="rgba(161, 161, 161, 255)">
               HELLO
             </rn-paragraph>
           </rn-view>,
diff --git a/packages/react-native/ReactCommon/react/renderer/graphics/platform/android/react/renderer/graphics/HostPlatformColor.h b/packages/react-native/ReactCommon/react/renderer/graphics/platform/android/react/renderer/graphics/HostPlatformColor.h
index 7f242fc88c28..0703aa558a57 100644
--- a/packages/react-native/ReactCommon/react/renderer/graphics/platform/android/react/renderer/graphics/HostPlatformColor.h
+++ b/packages/react-native/ReactCommon/react/renderer/graphics/platform/android/react/renderer/graphics/HostPlatformColor.h
@@ -15,8 +15,7 @@ namespace facebook::react {
 using Color = int32_t;
 
 namespace HostPlatformColor {
-static const facebook::react::Color UndefinedColor =
-    std::numeric_limits<facebook::react::Color>::max();
+constexpr facebook::react::Color UndefinedColor = 0;
 }
 
 inline Color
diff --git a/packages/react-native/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/HostPlatformColor.h b/packages/react-native/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/HostPlatformColor.h
index 5c6e5021f56f..0003bbd6b9f0 100644
--- a/packages/react-native/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/HostPlatformColor.h
+++ b/packages/react-native/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/HostPlatformColor.h
@@ -16,8 +16,7 @@ namespace facebook::react {
 using Color = int32_t;
 
 namespace HostPlatformColor {
-static const facebook::react::Color UndefinedColor =
-    std::numeric_limits<facebook::react::Color>::max();
+constexpr facebook::react::Color UndefinedColor = 0;
 }
 
 inline Color
diff --git a/packages/react-native/src/private/renderer/mounting/__tests__/Mounting-itest.js b/packages/react-native/src/private/renderer/mounting/__tests__/Mounting-itest.js
index 36645e42667d..7091fb592c6d 100644
--- a/packages/react-native/src/private/renderer/mounting/__tests__/Mounting-itest.js
+++ b/packages/react-native/src/private/renderer/mounting/__tests__/Mounting-itest.js
@@ -231,125 +231,159 @@ describe('ViewFlattening', () => {
       'Insert {type: "View", parentNativeID: "J", index: 1, nativeID: "B"}',
     ]);
   });
-});
 
-test('parent-child switching from unflattened-flattened to flattened-unflattened', () => {
-  const root = Fantom.createRoot();
+  test('parent-child switching from unflattened-flattened to flattened-unflattened', () => {
+    const root = Fantom.createRoot();
 
-  Fantom.runTask(() => {
-    root.render(
-      <View
-        style={{
-          marginTop: 100,
-          opacity: 0,
-        }}>
+    Fantom.runTask(() => {
+      root.render(
         <View
           style={{
-            marginTop: 50,
+            marginTop: 100,
+            opacity: 0,
           }}>
           <View
-            nativeID={'child'}
-            style={{height: 10, width: 10, backgroundColor: 'red'}}
-          />
-        </View>
-      </View>,
-    );
-  });
+            style={{
+              marginTop: 50,
+            }}>
+            <View
+              nativeID={'child'}
+              style={{height: 10, width: 10, backgroundColor: 'red'}}
+            />
+          </View>
+        </View>,
+      );
+    });
 
-  expect(root.takeMountingManagerLogs()).toEqual([
-    'Update {type: "RootView", nativeID: (root)}',
-    'Create {type: "View", nativeID: (N/A)}',
-    'Create {type: "View", nativeID: "child"}',
-    'Insert {type: "View", parentNativeID: (N/A), index: 0, nativeID: "child"}',
-    'Insert {type: "View", parentNativeID: (root), index: 0, nativeID: (N/A)}',
-  ]);
-
-  // force view to be flattened.
-  Fantom.runTask(() => {
-    root.render(
-      <View
-        style={{
-          marginTop: 100,
-        }}>
+    expect(root.takeMountingManagerLogs()).toEqual([
+      'Update {type: "RootView", nativeID: (root)}',
+      'Create {type: "View", nativeID: (N/A)}',
+      'Create {type: "View", nativeID: "child"}',
+      'Insert {type: "View", parentNativeID: (N/A), index: 0, nativeID: "child"}',
+      'Insert {type: "View", parentNativeID: (root), index: 0, nativeID: (N/A)}',
+    ]);
+
+    // force view to be flattened.
+    Fantom.runTask(() => {
+      root.render(
         <View
           style={{
-            marginTop: 50,
-            opacity: 0,
+            marginTop: 100,
           }}>
           <View
-            nativeID={'child'}
-            style={{height: 10, width: 10, backgroundColor: 'red'}}
-          />
-        </View>
-      </View>,
-    );
+            style={{
+              marginTop: 50,
+              opacity: 0,
+            }}>
+            <View
+              nativeID={'child'}
+              style={{height: 10, width: 10, backgroundColor: 'red'}}
+            />
+          </View>
+        </View>,
+      );
+    });
+
+    expect(root.takeMountingManagerLogs()).toEqual([
+      'Update {type: "View", nativeID: "child"}',
+      'Remove {type: "View", parentNativeID: (N/A), index: 0, nativeID: "child"}',
+      'Remove {type: "View", parentNativeID: (root), index: 0, nativeID: (N/A)}',
+      'Delete {type: "View", nativeID: (N/A)}',
+      'Create {type: "View", nativeID: (N/A)}',
+      'Insert {type: "View", parentNativeID: (N/A), index: 0, nativeID: "child"}',
+      'Insert {type: "View", parentNativeID: (root), index: 0, nativeID: (N/A)}',
+    ]);
   });
 
-  expect(root.takeMountingManagerLogs()).toEqual([
-    'Update {type: "View", nativeID: "child"}',
-    'Remove {type: "View", parentNativeID: (N/A), index: 0, nativeID: "child"}',
-    'Remove {type: "View", parentNativeID: (root), index: 0, nativeID: (N/A)}',
-    'Delete {type: "View", nativeID: (N/A)}',
-    'Create {type: "View", nativeID: (N/A)}',
-    'Insert {type: "View", parentNativeID: (N/A), index: 0, nativeID: "child"}',
-    'Insert {type: "View", parentNativeID: (root), index: 0, nativeID: (N/A)}',
-  ]);
-});
+  test('parent-child switching from flattened-unflattened to unflattened-flattened', () => {
+    const root = Fantom.createRoot();
 
-test('parent-child switching from flattened-unflattened to unflattened-flattened', () => {
-  const root = Fantom.createRoot();
+    Fantom.runTask(() => {
+      root.render(
+        <View
+          style={{
+            marginTop: 100,
+          }}>
+          <View
+            style={{
+              marginTop: 50,
+              opacity: 0,
+            }}>
+            <View nativeID={'child'} style={{height: 10, width: 10}} />
+          </View>
+        </View>,
+      );
+    });
 
-  Fantom.runTask(() => {
-    root.render(
-      <View
-        style={{
-          marginTop: 100,
-        }}>
+    expect(root.takeMountingManagerLogs()).toEqual([
+      'Update {type: "RootView", nativeID: (root)}',
+      'Create {type: "View", nativeID: (N/A)}',
+      'Create {type: "View", nativeID: "child"}',
+      'Insert {type: "View", parentNativeID: (N/A), index: 0, nativeID: "child"}',
+      'Insert {type: "View", parentNativeID: (root), index: 0, nativeID: (N/A)}',
+    ]);
+
+    // force view to be flattened.
+    Fantom.runTask(() => {
+      root.render(
         <View
           style={{
-            marginTop: 50,
+            marginTop: 100,
             opacity: 0,
           }}>
-          <View nativeID={'child'} style={{height: 10, width: 10}} />
-        </View>
-      </View>,
-    );
+          <View
+            style={{
+              marginTop: 50,
+            }}>
+            <View nativeID={'child'} style={{height: 10, width: 10}} />
+          </View>
+        </View>,
+      );
+    });
+    expect(root.takeMountingManagerLogs()).toEqual([
+      'Update {type: "View", nativeID: "child"}',
+      'Remove {type: "View", parentNativeID: (root), index: 0, nativeID: (N/A)}',
+      'Remove {type: "View", parentNativeID: (N/A), index: 0, nativeID: "child"}',
+      'Delete {type: "View", nativeID: (N/A)}',
+      'Create {type: "View", nativeID: (N/A)}',
+      'Insert {type: "View", parentNativeID: (root), index: 0, nativeID: (N/A)}',
+      'Insert {type: "View", parentNativeID: (N/A), index: 0, nativeID: "child"}',
+    ]);
   });
 
-  expect(root.takeMountingManagerLogs()).toEqual([
-    'Update {type: "RootView", nativeID: (root)}',
-    'Create {type: "View", nativeID: (N/A)}',
-    'Create {type: "View", nativeID: "child"}',
-    'Insert {type: "View", parentNativeID: (N/A), index: 0, nativeID: "child"}',
-    'Insert {type: "View", parentNativeID: (root), index: 0, nativeID: (N/A)}',
-  ]);
-
-  // force view to be flattened.
-  Fantom.runTask(() => {
-    root.render(
-      <View
-        style={{
-          marginTop: 100,
-          opacity: 0,
-        }}>
+  test('#51378: view with rgba(255,255,255,127/256) background color is not flattened', () => {
+    const root = Fantom.createRoot();
+
+    Fantom.runTask(() => {
+      root.render(
         <View
           style={{
-            marginTop: 50,
-          }}>
-          <View nativeID={'child'} style={{height: 10, width: 10}} />
-        </View>
-      </View>,
+            width: 100,
+            height: 100,
+            backgroundColor: `rgba(255, 255, 255, ${127 / 256})`,
+          }}
+        />,
+      );
+    });
+
+    expect(root.takeMountingManagerLogs()).toEqual([
+      'Update {type: "RootView", nativeID: (root)}',
+      'Create {type: "View", nativeID: (N/A)}',
+      'Insert {type: "View", parentNativeID: (root), index: 0, nativeID: (N/A)}',
+    ]);
+
+    expect(
+      root
+        .getRenderedOutput({props: ['width', 'height', 'backgroundColor']})
+        .toJSX(),
+    ).toEqual(
+      <rn-view
+        width="100.000000"
+        height="100.000000"
+        backgroundColor="rgba(255, 255, 255, 127)"
+      />,
     );
   });
-  expect(root.takeMountingManagerLogs()).toEqual([
-    'Update {type: "View", nativeID: "child"}',
-    'Remove {type: "View", parentNativeID: (root), index: 0, nativeID: (N/A)}',
-    'Remove {type: "View", parentNativeID: (N/A), index: 0, nativeID: "child"}',
-    'Delete {type: "View", nativeID: (N/A)}',
-    'Create {type: "View", nativeID: (N/A)}',
-    'Insert {type: "View", parentNativeID: (root), index: 0, nativeID: (N/A)}',
-    'Insert {type: "View", parentNativeID: (N/A), index: 0, nativeID: "child"}',
-  ]);
 });
 
 describe('reconciliation of setNativeProps and React commit', () => {