translate regex to support %

intergalacticspacehighway · Feb 25, 2024 · 927809d · 927809d
1 parent 3c03dca
commit 927809d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/packages/react-native/React/Views/RCTConvert+Transform.m b/packages/react-native/React/Views/RCTConvert+Transform.m
@@ -209,10 +209,9 @@ + (CATransform3D)CATransform3D:(id)json withWidth:(CGFloat)width height:(CGFloat
         transform = CATransform3DScale(transform, 1, scale, 1);
 
       } else if ([property isEqualToString:@"translate"]) {
-
-        NSArray *array = (NSArray<NSNumber *> *)value;
-        CGFloat translateX = [array[0] floatValue];
-        CGFloat translateY = [array[1] floatValue];
+        NSArray *array = (NSArray *)value;
+        CGFloat translateX = [self parseTranslate:array[0] withDimension:width];
+        CGFloat translateY = [self parseTranslate:array[1] withDimension:height];
         CGFloat translateZ = array.count > 2 ? [array[2] floatValue] : 0;
         transform = CATransform3DTranslate(transform, translateX, translateY, translateZ);
 

diff --git a/packages/rn-tester/js/examples/Transform/TransformExample.js b/packages/rn-tester/js/examples/Transform/TransformExample.js
@@ -139,6 +139,10 @@ function Flip() {
   );
 }
 
+function TranslatePercentage() {
+  return <View style={styles.translatePercentageView} />;
+}
+
 const styles = StyleSheet.create({
   container: {
     height: 500,
@@ -277,6 +281,12 @@ const styles = StyleSheet.create({
     height: 100,
     transformOrigin: 'top left',
   },
+  translatePercentageView: {
+    transform: 'translate(50%)',
+    padding: 50,
+    alignSelf: 'flex-start',
+    backgroundColor: 'lightblue',
+  },
 });
 
 exports.title = 'Transforms';
@@ -396,4 +406,11 @@ exports.examples = [
       return <TransformOriginExample />;
     },
   },
+  {
+    title: 'Translate Percentage',
+    description: "transform: 'translate(50%)'",
+    render(): Node {
+      return <TranslatePercentage />;
+    },
+  },
 ];