add top right support

Author: intergalacticspacehighway

packages/react-native/React/Fabric/Utils/RCTRadialGradient.mm

@@ -133,10 +133,19 @@ + (CALayer *)gradientLayerWithSize:(CGSize)size gradient:(const RadialGradient &
   UIImage *gradientImage = [renderer imageWithActions:^(UIGraphicsImageRendererContext *_Nonnull rendererContext) {
     CGContextRef context = rendererContext.CGContext;
 
-    CGPoint centerPoint = CGPointMake(
-                                      gradient.position.x.resolve(size.width),
-                                      gradient.position.y.resolve(size.height)
-                                      );
+    CGPoint centerPoint = CGPointMake(size.width / 2.0, size.height / 2.0);
+
+    if (gradient.position.top) {
+      centerPoint.y = gradient.position.top->resolve(size.height);
+    } else if (gradient.position.bottom) {
+      centerPoint.y = size.height - gradient.position.bottom->resolve(size.height);
+    }
+
+    if (gradient.position.left) {
+      centerPoint.x = gradient.position.left->resolve(size.width);
+    } else if (gradient.position.right) {
+      centerPoint.x = size.width - gradient.position.right->resolve(size.width);
+    }
 
     bool isCircle = (gradient.shape == RadialGradientShape::Circle);
     auto [radiusX, radiusY] = GetRadialGradientRadius(

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/RadialGradient.kt

@@ -80,27 +80,52 @@ internal class RadialGradient(
     )
   }
 
+  private class Position(
+    val top: LengthPercentage? = null,
+    val left: LengthPercentage? = null,
+    val right: LengthPercentage? = null,
+    val bottom: LengthPercentage? = null
+  )
+
   private val shape: Shape = Shape.fromString(shapeString)
   private val isCircle: Boolean = shape == Shape.CIRCLE
 
-  private val position: Pair<LengthPercentage, LengthPercentage> = run {
-    var x = LengthPercentage(50f, LengthPercentageType.PERCENT)
-    var y = LengthPercentage(50f, LengthPercentageType.PERCENT)
-
-    if (positionMap != null) {
-      val xIt = positionMap.getDynamic("x")
-      val yIt = positionMap.getDynamic("y")
-      if (xIt != null && yIt != null) {
-        val posX = LengthPercentage.setFromDynamic(xIt)
-        val posY = LengthPercentage.setFromDynamic(yIt)
-        if (posX != null && posY != null) {
-          x = posX
-          y = posY
-        }
-      }
+  private val position: Position = run {
+    val defaultPosition = Position(
+      top = LengthPercentage(50f, LengthPercentageType.PERCENT),
+      left = LengthPercentage(50f, LengthPercentageType.PERCENT)
+    )
+
+    if (positionMap == null) {
+      return@run defaultPosition
+    }
+
+    var top: LengthPercentage? = null
+    var left: LengthPercentage? = null
+    var right: LengthPercentage? = null
+    var bottom: LengthPercentage? = null
+
+    if (positionMap.hasKey("top")) {
+      val rawTop = positionMap.getDynamic("top")
+      top = LengthPercentage.setFromDynamic(rawTop)
+    } else if (positionMap.hasKey("bottom")) {
+      val rawBottom = positionMap.getDynamic("bottom")
+      bottom = LengthPercentage.setFromDynamic(rawBottom)
+    } else {
+      return@run defaultPosition
     }
 
-    Pair(x, y)
+    if (positionMap.hasKey("left")) {
+      val rawLeft = positionMap.getDynamic("left")
+      left = LengthPercentage.setFromDynamic(rawLeft)
+    } else if (positionMap.hasKey("right")) {
+      val rawRight = positionMap.getDynamic("right")
+      right = LengthPercentage.setFromDynamic(rawRight)
+    } else {
+      return@run defaultPosition
+    }
+
+    Position(top, left, right, bottom)
   }
 
   private val size: GradientSize = run {
@@ -164,8 +189,20 @@ internal class RadialGradient(
   }
 
   fun getShader(width: Float, height: Float): Shader {
-    val centerX = position.first.resolveToPixel(width)
-    val centerY = position.second.resolveToPixel(height)
+    var centerX: Float = width / 2f
+    var centerY: Float = height / 2f
+    
+    if (position.top != null) {
+      centerY = position.top.resolveToPixel(height)
+    } else if (position.bottom != null) {
+      centerY = height - position.bottom.resolveToPixel(height)
+    }
+
+    if (position.left != null) {
+      centerX = position.left.resolveToPixel(width)
+    } else if (position.right != null) {
+      centerX = width - position.right.resolveToPixel(width)
+    }
 
     val (radiusX, radiusY) = calculateRadius(centerX, centerY, width, height)
 

packages/react-native/ReactCommon/react/renderer/components/view/conversions.h

@@ -1291,13 +1291,26 @@ inline void fromRawValue(
         auto positionIt = rawBackgroundImageMap.find("position");
         if (positionIt != rawBackgroundImageMap.end() && positionIt->second.hasType<std::unordered_map<std::string, RawValue>>()) {
           auto positionMap = static_cast<std::unordered_map<std::string, RawValue>>(positionIt->second);
-          auto xIt = positionMap.find("x");
-          auto yIt = positionMap.find("y");
-          if (xIt != positionMap.end() && yIt != positionMap.end()) {
-            auto x = toValueUnit(xIt->second);
-            auto y = toValueUnit(yIt->second);
-            radialGradient.position.x = x;
-            radialGradient.position.y = y;
+          
+          auto topIt = positionMap.find("top");
+          auto bottomIt = positionMap.find("bottom");
+          auto leftIt = positionMap.find("left");
+          auto rightIt = positionMap.find("right");
+
+          if (topIt != positionMap.end()) {
+            auto topValue = toValueUnit(topIt->second);
+            radialGradient.position.top = topValue;
+          } else if (bottomIt != positionMap.end()) {
+            auto bottomValue = toValueUnit(bottomIt->second);
+            radialGradient.position.bottom = bottomValue;
+          }
+
+          if (leftIt != positionMap.end()) {
+            auto leftValue = toValueUnit(leftIt->second);
+            radialGradient.position.left = leftValue;
+          } else if (rightIt != positionMap.end()) {
+            auto rightValue = toValueUnit(rightIt->second);
+            radialGradient.position.right = rightValue;
           }
         }
       }

packages/react-native/ReactCommon/react/renderer/graphics/RadialGradient.h

@@ -13,6 +13,7 @@
 #include <string>
 #include <variant>
 #include <vector>
+#include <optional>
 
 namespace facebook::react {
 
@@ -58,11 +59,16 @@ struct RadialGradientSize {
 };
 
 struct RadialGradientPosition {
-  ValueUnit x;
-  ValueUnit y;
+  std::optional<ValueUnit> top;
+  std::optional<ValueUnit> left;
+  std::optional<ValueUnit> right;
+  std::optional<ValueUnit> bottom;
 
   bool operator==(const RadialGradientPosition& other) const {
-    return x == other.x && y == other.y;
+    return top == other.top && 
+           left == other.left && 
+           right == other.right && 
+           bottom == other.bottom;
   }
 
   bool operator!=(const RadialGradientPosition& other) const {

packages/rn-tester/js/examples/Playground/RNTesterPlayground.js

@@ -18,9 +18,7 @@ import {StyleSheet, View} from 'react-native';
 function Playground() {
   return (
     <View style={styles.container}>
-      <RNTesterText>
-        Edit "RNTesterPlayground.js" to change this file
-      </RNTesterText>
+      <View style={styles.gradientContainer} />
     </View>
   );
 }
@@ -29,6 +27,12 @@ const styles = StyleSheet.create({
   container: {
     padding: 10,
   },
+  gradientContainer: {
+    width: 300,
+    height: 200,
+    experimental_backgroundImage: `radial-gradient(circle at top right, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
+    linear-gradient(to bottom, #43cea2, #185a9d);`,
+  },
 });
 
 export default ({