From b133bf60245f2b497fecf464c8a8f491294a750f Mon Sep 17 00:00:00 2001
From: D N <4661784+retyui@users.noreply.github.com>
Date: Tue, 30 Jan 2024 07:10:47 -0800
Subject: [PATCH] fix: [TS] Update `translateX` & `translateY` types to support
 `%` (#42671)

Summary:
After update to the latest `react-native` version
we discover that we are unable to use `number%` value for `translate*` props :

```tsx
StyleSheet.create({
  root: {
    transform: [
      { translateX: '-50%'  },
      // ^^^^^^ TS Error: Type string is not assignable to type AnimatableNumericValue | undefined
    ],
  }
});
```

 ---

percentage values are supported, demo: https://snack.expo.dev/retyui/test-tstransform

## Changelog:

[GENERAL] [FIXED] - Update typescript definition of `translateX` & `translateX` to be able to use percentage values

Pull Request resolved: https://github.com/facebook/react-native/pull/42671

Test Plan: `yarn tsc --noEmit`

Reviewed By: rozele, cortinico

Differential Revision: D53146046

Pulled By: NickGerleman

fbshipit-source-id: 3486e7a9b55b98c36cc96b2bca4bb27841061e80
---
 .../react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
index 17c8becd176..d104d679ea7 100644
--- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
+++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
@@ -155,11 +155,11 @@ interface ScaleYTransform {
 }
 
 interface TranslateXTransform {
-  translateX: AnimatableNumericValue;
+  translateX: AnimatableNumericValue | `${number}%`;
 }
 
 interface TranslateYTransform {
-  translateY: AnimatableNumericValue;
+  translateY: AnimatableNumericValue | `${number}%`;
 }
 
 interface SkewXTransform {