mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Gabriel Donadel Dall'Agnol
34db2d4e93
Summary: This updates the `transform` property to support string values as requested on https://github.com/facebook/react-native/issues/34425. This also updates the existing unit tests of the `processTransform` function ensuring the style processing works as expected and updates the TransformExample on RNTester in order to facilitate the manual QA of this. ## Changelog [General] [Added] - Add string support to the transform property Pull Request resolved: https://github.com/facebook/react-native/pull/34660 Test Plan: 1. Open the RNTester app and navigate to the Transforms page 2. Check the transform style through the `Transform using a string` section https://user-images.githubusercontent.com/11707729/189550548-ee3c14dd-11c6-4fd1-bd74-f6b52ecb9eae.mov Reviewed By: lunaleaps Differential Revision: D39423409 Pulled By: cipolleschi fbshipit-source-id: 0d7b79178eb33f34ae55a070ce094360b544361f
56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict-local
|
|
* @format
|
|
*/
|
|
|
|
import type AnimatedNode from '../../Animated/nodes/AnimatedNode';
|
|
|
|
export type ____TransformStyle_Internal = $ReadOnly<{|
|
|
/**
|
|
* `transform` accepts an array of transformation objects. Each object specifies
|
|
* the property that will be transformed as the key, and the value to use in the
|
|
* transformation. Objects should not be combined. Use a single key/value pair
|
|
* per object.
|
|
*
|
|
* The rotate transformations require a string so that the transform may be
|
|
* expressed in degrees (deg) or radians (rad). For example:
|
|
*
|
|
* `transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }])`
|
|
*
|
|
* The skew transformations require a string so that the transform may be
|
|
* expressed in degrees (deg). For example:
|
|
*
|
|
* `transform([{ skewX: '45deg' }])`
|
|
*/
|
|
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|}
|
|
| {|+skewY: string|}
|
|
// TODO: what is the actual type it expects?
|
|
| {|
|
|
+matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,
|
|
|},
|
|
>
|
|
| string,
|
|
|}>;
|