Fix the serialization of the alpha channel in the rgba() color string format (#52087)

Summary:
The alpha channel in the `rgba()` color string format should be a value between [0, 1] instead of [0, 255], as stated in the [React Native Documentation](https://reactnative.dev/docs/colors#red-green-blue-rgb).

## Changelog:

[GENERAL] [FIXED] - Fix the serialization of the alpha channel in the `rgba()` color string format.

Pull Request resolved: #52087

Test Plan: I didn't find any usage of that function in React Native, but it is part of the public API, and I just wanted to use it in Reanimated.

Reviewed By: fabriziocucci

Differential Revision: D76822560

Pulled By: javache

fbshipit-source-id: 370d9729881c1eda794c1b9fe54d258242fde814

Author: piaskowyk

packages/react-native/Libraries/Components/__tests__/Button-itest.js

@@ -31,8 +31,8 @@ describe('<Button>', () => {
             .toJSX(),
         ).toEqual(
           // Upper case on Android (also used by Fantom)
-          <rn-view backgroundColor="rgba(33, 150, 243, 255)">
-            <rn-paragraph foregroundColor="rgba(255, 255, 255, 255)">
+          <rn-view backgroundColor="rgba(33, 150, 243, 1)">
+            <rn-paragraph foregroundColor="rgba(255, 255, 255, 1)">
               HELLO
             </rn-paragraph>
           </rn-view>,
@@ -53,8 +53,8 @@ describe('<Button>', () => {
             .getRenderedOutput({props: ['foregroundColor', 'backgroundColor']})
             .toJSX(),
         ).toEqual(
-          <rn-view backgroundColor="rgba(0, 0, 255, 255)">
-            <rn-paragraph foregroundColor="rgba(255, 255, 255, 255)">
+          <rn-view backgroundColor="rgba(0, 0, 255, 1)">
+            <rn-paragraph foregroundColor="rgba(255, 255, 255, 1)">
               HELLO
             </rn-paragraph>
           </rn-view>,
@@ -99,8 +99,8 @@ describe('<Button>', () => {
             .getRenderedOutput({props: ['foregroundColor', 'backgroundColor']})
             .toJSX(),
         ).toEqual(
-          <rn-view backgroundColor="rgba(223, 223, 223, 255)">
-            <rn-paragraph foregroundColor="rgba(161, 161, 161, 255)">
+          <rn-view backgroundColor="rgba(223, 223, 223, 1)">
+            <rn-paragraph foregroundColor="rgba(161, 161, 161, 1)">
               HELLO
             </rn-paragraph>
           </rn-view>,
@@ -181,8 +181,8 @@ describe('<Button>', () => {
             .getRenderedOutput({props: ['foregroundColor', 'backgroundColor']})
             .toJSX(),
         ).toEqual(
-          <rn-view backgroundColor="rgba(33, 150, 243, 255)">
-            <rn-paragraph foregroundColor="rgba(255, 255, 255, 255)">
+          <rn-view backgroundColor="rgba(33, 150, 243, 1)">
+            <rn-paragraph foregroundColor="rgba(255, 255, 255, 1)">
               HELLO
             </rn-paragraph>
           </rn-view>,
@@ -223,8 +223,8 @@ describe('<Button>', () => {
             .getRenderedOutput({props: ['foregroundColor', 'backgroundColor']})
             .toJSX(),
         ).toEqual(
-          <rn-view backgroundColor="rgba(223, 223, 223, 255)">
-            <rn-paragraph foregroundColor="rgba(161, 161, 161, 255)">
+          <rn-view backgroundColor="rgba(223, 223, 223, 1)">
+            <rn-paragraph foregroundColor="rgba(161, 161, 161, 1)">
               HELLO
             </rn-paragraph>
           </rn-view>,

packages/react-native/ReactCommon/react/renderer/core/graphicsConversions.h

@@ -50,11 +50,11 @@ inline std::string toString(const SharedColor& value) {
   std::snprintf(
       buffer.data(),
       buffer.size(),
-      "rgba(%.0f, %.0f, %.0f, %.0f)",
+      "rgba(%.0f, %.0f, %.0f, %g)",
       components.red * 255.f,
       components.green * 255.f,
       components.blue * 255.f,
-      components.alpha * 255.f);
+      components.alpha);
   return buffer.data();
 }
 

packages/react-native/src/private/renderer/mounting/__tests__/Mounting-itest.js

@@ -380,7 +380,7 @@ describe('ViewFlattening', () => {
       <rn-view
         width="100.000000"
         height="100.000000"
-        backgroundColor="rgba(255, 255, 255, 127)"
+        backgroundColor="rgba(255, 255, 255, 0.498039)"
       />,
     );
   });

private/cxx-public-api/ReactNativeCPP.api

@@ -28680,11 +28680,11 @@ inline std::string toString(const SharedColor& value) {
   std::snprintf(
       buffer.data(),
       buffer.size(),
-      "rgba(%.0f, %.0f, %.0f, %.0f)",
+      "rgba(%.0f, %.0f, %.0f, %g)",
       components.red * 255.f,
       components.green * 255.f,
       components.blue * 255.f,
-      components.alpha * 255.f);
+      components.alpha);
   return buffer.data();
 }
 inline void fromRawValue(

private/react-native-fantom/src/__tests__/Fantom-itest.js

@@ -535,14 +535,14 @@ describe('Fantom', () => {
             {
               children: 'JSX is ',
               props: {
-                foregroundColor: 'rgba(255, 0, 0, 255)',
+                foregroundColor: 'rgba(255, 0, 0, 1)',
               },
               type: 'Text',
             },
             {
               children: 'easy!',
               props: {
-                foregroundColor: 'rgba(0, 0, 255, 255)',
+                foregroundColor: 'rgba(0, 0, 255, 1)',
               },
               type: 'Text',
             },