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

react-native/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts

Lines 165 to 171 in 5f75e9b

	interface SkewXTransform {
	skewX: AnimatableStringValue;
	}
	interface SkewYTransform {
	skewY: AnimatableStringValue;
	}

react-native/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts

Lines 129 to 143 in 5f75e9b

	interface RotateTransform {
	rotate: AnimatableStringValue;
	}
	interface RotateXTransform {
	rotateX: AnimatableStringValue;
	}
	interface RotateYTransform {
	rotateY: AnimatableStringValue;
	}
	interface RotateZTransform {
	rotateZ: AnimatableStringValue;
	}

[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]

react-native/packages/react-native/Libraries/StyleSheet/processTransform.js

Lines 257 to 267 in b7b5585

	case 'translateX':
	case 'translateY':
	case 'scale':
	case 'scaleX':
	case 'scaleY':
	invariant(
	typeof value === 'number',
	'Transform with key of "%s" must be a number: %s',
	key,
	stringifySafe(transformation),
	);

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