fix: [TS] Update translateX & translateY types to support %

[retyui]

Summary:

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

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

Test Plan:

yarn tsc --noEmit

[mdvacca]

@NickGerleman can you review this?

[NickGerleman]

@retyui thanks for the change!

I took a look at StyleSheetTypes.js as the source of truth for these. Flow doesn't have template literal types, but it looks like we probably also want to make this same change for rotate and skew.

  transform?:
    | $ReadOnlyArray<
        | {|+perspective: number | AnimatedNode|}
        | {|+rotate: string | AnimatedNode|}
        | {|+rotateX: string | AnimatedNode|}
        | {|+rotateY: string | AnimatedNode|}
        | {|+rotateZ: string | AnimatedNode|}
        | {|+scale: number | AnimatedNode|}
        | {|+scaleX: number | AnimatedNode|}
        | {|+scaleY: number | AnimatedNode|}
        | {|+translateX: number | AnimatedNode|}
        | {|+translateY: number | AnimatedNode|}
        | {|
            +translate:
              | [number | AnimatedNode, number | AnimatedNode]
              | AnimatedNode,
          |}
        | {|+skewX: string | AnimatedNode|}
        | {|+skewY: string | AnimatedNode|}
        // TODO: what is the actual type it expects?
        | {|
            +matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,
          |},
      >
    | string,

[retyui]

@NickGerleman

but it looks like we probably also want to make this same change for rotate and skew.

No, rotate and skew allow to pass any string because use AnimatableStringValue = string | Animated.AnimatedNode

https://github.com/facebook/react-native/blob/5f75e9b90d4f998403101ae92924778df31d36fb/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts#L165-L171

https://github.com/facebook/react-native/blob/5f75e9b90d4f998403101ae92924778df31d36fb/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts#L129-L143

[facebook-github-bot]

@NickGerleman has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[github-actions]

This pull request was successfully merged by @retyui in b133bf6.

^{When will my fix make it into a release? | Upcoming Releases}

[burakgormek]

https://github.com/facebook/react-native/blob/b7b55854feabef02ef0a2ed1962739c0aaa2cfe3/packages/react-native/Libraries/StyleSheet/processTransform.js#L257-L267

I think percentage is not supported based on processTransform 🤔 or do we need to update processTransform?

[retyui]

@burakgormek Do you check all code ? I think it works well and don't need to be update

https://github.com/facebook/react-native/blob/b7b55854feabef02ef0a2ed1962739c0aaa2cfe3/packages/react-native/Libraries/StyleSheet/processTransform.js#L123C5-L143C27