translate regex to support %

intergalacticspacehighway · Feb 25, 2024 · 8879930 · 8879930
1 parent 6829aa2
commit 8879930
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/packages/react-native/Libraries/StyleSheet/processTransform.js b/packages/react-native/Libraries/StyleSheet/processTransform.js
@@ -69,7 +69,7 @@ const _getKeyAndValueFromCSSTransform: (
     | $TEMPORARY$string<'translateY'>,
   args: string,
 ) => {key: string, value?: number[] | number | string} = (key, args) => {
-  const argsWithUnitsRegex = new RegExp(/([+-]?\d+(\.\d+)?)([a-zA-Z]+)?/g);
+  const argsWithUnitsRegex = new RegExp(/([+-]?\d+(\.\d+)?)([a-zA-Z%]+)?/g);
 
   switch (key) {
     case 'matrix':
@@ -88,7 +88,11 @@ const _getKeyAndValueFromCSSTransform: (
           missingUnitOfMeasurement = true;
         }
 
-        parsedArgs.push(value);
+        if (unitOfMeasurement === '%') {
+          parsedArgs.push(`${value}%`);
+        } else {
+          parsedArgs.push(value);
+        }
       }
 
       if (__DEV__) {

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 />;
+    },
+  },
 ];