feat(iOS/fabric): percentage support in translate

packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processTransform-test.js.snap

@@ -32,7 +32,7 @@ exports[`processTransform validation should throw when passing an invalid angle
 
 exports[`processTransform validation should throw when passing an invalid angle prop 4`] = `"Rotate transform must be expressed in degrees (deg) or radians (rad): {\\"skewX\\":\\"10drg\\"}"`;
 
-exports[`processTransform validation should throw when passing an invalid value to a number prop 1`] = `"Transform with key of \\"translateY\\" must be a number: {\\"translateY\\":\\"20deg\\"}"`;
+exports[`processTransform validation should throw when passing an invalid value to a number prop 1`] = `"Transform with key of \\"translateY\\" must be number or a percentage. Passed value: {\\"translateY\\":\\"20deg\\"}."`;
 
 exports[`processTransform validation should throw when passing an invalid value to a number prop 2`] = `"Transform with key of \\"scale\\" must be a number: {\\"scale\\":{\\"x\\":10,\\"y\\":10}}"`;
 

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

@@ -34,6 +34,11 @@ describe('processTransform', () => {
  );
  });
 
+ it('should accept a percentage translate transform', () => {
+ processTransform([{translateY: '20%'}, {translateX: '10%'}]);
+ processTransform('translateX(10%)');
+ });
+
  it('should throw on object with multiple properties', () => {
  expect(() =>
  processTransform([{scale: 0.5, translateY: 10}]),

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

@@ -68,8 +68,11 @@ const _getKeyAndValueFromCSSTransform: (
  | $TEMPORARY$string<'translateX'>
  | $TEMPORARY$string<'translateY'>,
  args: string,
-) => {key: string, value?: number[] | number | string} = (key, args) => {
- const argsWithUnitsRegex = new RegExp(/([+-]?\d+(\.\d+)?)([a-zA-Z]+)?/g);
+) => {key: string, value?: Array<string | number> | number | string} = (
+ key,
+ args,
+) => {
+ const argsWithUnitsRegex = new RegExp(/([+-]?\d+(\.\d+)?)([a-zA-Z]+|%)?/g);
 
  switch (key) {
  case 'matrix':
@@ -88,7 +91,11 @@ const _getKeyAndValueFromCSSTransform: (
  missingUnitOfMeasurement = true;
  }
 
- parsedArgs.push(value);
+ if (unitOfMeasurement === '%') {
+ parsedArgs.push(`${value}%`);
+ } else {
+ parsedArgs.push(value);
+ }
  }
 
  if (__DEV__) {
@@ -256,6 +263,14 @@ function _validateTransform(
  break;
  case 'translateX':
  case 'translateY':
+ invariant(
+ typeof value === 'number' ||
+ (typeof value === 'string' && value.endsWith('%')),
+ 'Transform with key of "%s" must be number or a percentage. Passed value: %s.',
+ key,
+ stringifySafe(transformation),
+ );
+ break;
  case 'scale':
  case 'scaleX':
  case 'scaleY':

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -415,7 +415,7 @@ - (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
  _contentView.frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
  }
 
- if (_props->transformOrigin.isSet()) {
+ if ((_props->transformOrigin.isSet() || _props->transform.operations.size() > 0) && layoutMetrics.frame.size != oldLayoutMetrics.frame.size) {
  auto newTransform = _props->resolveTransform(layoutMetrics);
  self.layer.transform = RCTCATransform3DFromTransformMatrix(newTransform);
  }

packages/react-native/ReactCommon/react/renderer/animations/LayoutAnimationKeyFrameManager.cpp

@@ -1113,12 +1113,15 @@ ShadowView LayoutAnimationKeyFrameManager::createInterpolatedShadowView(
  // Animate opacity or scale/transform
  PropsParserContext propsParserContext{
  finalView.surfaceId, *contextContainer_};
+ auto finalViewSize = Size{finalView.layoutMetrics.frame.size.width, finalView.layoutMetrics.frame.size.height};
  mutatedShadowView.props = interpolateProps(
  componentDescriptor,
  propsParserContext,
  progress,
  startingView.props,
- finalView.props);
+ finalView.props,
+ finalViewSize
+ );
 
  react_native_assert(mutatedShadowView.props != nullptr);
  if (mutatedShadowView.props == nullptr) {
@@ -1627,7 +1630,8 @@ Props::Shared LayoutAnimationKeyFrameManager::interpolateProps(
  const PropsParserContext& context,
  Float animationProgress,
  const Props::Shared& props,
- const Props::Shared& newProps) const {
+ const Props::Shared& newProps,
+ const Size& size) const {
 #ifdef ANDROID
  // On Android only, the merged props should have the same RawProps as the
  // final props struct
@@ -1640,11 +1644,11 @@ Props::Shared LayoutAnimationKeyFrameManager::interpolateProps(
  Props::Shared interpolatedPropsShared =
  componentDescriptor.cloneProps(context, newProps, {});
 #endif
-
+
  if (componentDescriptor.getTraits().check(
  ShadowNodeTraits::Trait::ViewKind)) {
  interpolateViewProps(
- animationProgress, props, newProps, interpolatedPropsShared);
+ animationProgress, props, newProps, interpolatedPropsShared, size);
  }
 
  return interpolatedPropsShared;

packages/react-native/ReactCommon/react/renderer/animations/LayoutAnimationKeyFrameManager.h

@@ -179,7 +179,8 @@ class LayoutAnimationKeyFrameManager : public UIManagerAnimationDelegate,
  const PropsParserContext& context,
  Float animationProgress,
  const Props::Shared& props,
- const Props::Shared& newProps) const;
+ const Props::Shared& newProps,
+ const Size& size) const;
 };
 
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp

@@ -401,19 +401,33 @@ Transform BaseViewProps::resolveTransform(
  const LayoutMetrics& layoutMetrics) const {
  float viewWidth = layoutMetrics.frame.size.width;
  float viewHeight = layoutMetrics.frame.size.height;
- if (!transformOrigin.isSet() || (viewWidth == 0 && viewHeight == 0)) {
- return transform;
+ auto transformMatrix = Transform{};
+
+ if (viewWidth == 0 && viewHeight == 0){
+ return transformMatrix;
  }
- std::array<float, 3> translateOffsets =
- getTranslateForTransformOrigin(viewWidth, viewHeight, transformOrigin);
- auto newTransform = Transform::Translate(
- translateOffsets[0], translateOffsets[1], translateOffsets[2]);
- newTransform = newTransform * transform;
- newTransform =
- newTransform *
+
+ // transform is matrix
+ if (transform.operations.size() == 1 && transform.operations[0].type == TransformOperationType::Arbitrary) {
+ transformMatrix = transform;
+ } else {
+ auto viewSize = Size{viewWidth, viewHeight};
+ for (size_t i = 0; i < transform.operations.size(); i++) {
+ transformMatrix = transformMatrix * transform.FromTransformOperation(transform.operations[i], viewSize);
+ }
+ }
+
+ if (transformOrigin.isSet()) {
+ std::array<float, 3> translateOffsets =
+ getTranslateForTransformOrigin(viewWidth, viewHeight, transformOrigin);
+ transformMatrix = 
  Transform::Translate(
- -translateOffsets[0], -translateOffsets[1], -translateOffsets[2]);
- return newTransform;
+ translateOffsets[0], translateOffsets[1], translateOffsets[2])
+ * transformMatrix
+ * Transform::Translate(-translateOffsets[0], -translateOffsets[1], -translateOffsets[2]);
+ }
+
+ return transformMatrix;
 }
 
 bool BaseViewProps::getClipsContentToBounds() const {

packages/react-native/ReactCommon/react/renderer/components/view/ViewPropsInterpolation.h

@@ -21,7 +21,8 @@ static inline void interpolateViewProps(
  Float animationProgress,
  const Props::Shared& oldPropsShared,
  const Props::Shared& newPropsShared,
- Props::Shared& interpolatedPropsShared) {
+ Props::Shared& interpolatedPropsShared,
+ const Size& size) {
  const ViewProps* oldViewProps =
  static_cast<const ViewProps*>(oldPropsShared.get());
  const ViewProps* newViewProps =
@@ -31,9 +32,8 @@ static inline void interpolateViewProps(
 
  interpolatedProps->opacity = oldViewProps->opacity +
  (newViewProps->opacity - oldViewProps->opacity) * animationProgress;
-
  interpolatedProps->transform = Transform::Interpolate(
- animationProgress, oldViewProps->transform, newViewProps->transform);
+ animationProgress, oldViewProps->transform, newViewProps->transform, size);
 
  // Android uses RawProps, not props, to update props on the platform...
  // Since interpolated props don't interpolate at all using RawProps, we need

packages/react-native/ReactCommon/react/renderer/components/view/conversions.h

@@ -503,6 +503,8 @@ inline void fromRawValue(
  auto pair = configurationPair.begin();
  auto operation = pair->first;
  auto& parameters = pair->second;
+ auto Zero = ValueUnit(0, UnitType::Point);
+ auto One = ValueUnit(1, UnitType::Point);
 
  if (operation == "matrix") {
  react_native_expect(parameters.hasType<std::vector<Float>>());
@@ -513,48 +515,52 @@ inline void fromRawValue(
  transformMatrix.matrix[i++] = number;
  }
  transformMatrix.operations.push_back(
- TransformOperation{TransformOperationType::Arbitrary, 0, 0, 0});
+ TransformOperation{TransformOperationType::Arbitrary, Zero, Zero, Zero});
  } else if (operation == "perspective") {
- transformMatrix =
-transformMatrix * Transform::Perspective((Float)parameters);
+ transformMatrix.operations.push_back(TransformOperation{
+TransformOperationType::Perspective, ValueUnit((Float)parameters, UnitType::Point), Zero, Zero});
  } else if (operation == "rotateX") {
- transformMatrix = transformMatrix *
-Transform::Rotate(toRadians(parameters, 0.0f), 0, 0);
+ transformMatrix.operations.push_back(
+TransformOperation{TransformOperationType::Rotate, ValueUnit(toRadians(parameters, 0.0f), UnitType::Point), Zero, Zero});
  } else if (operation == "rotateY") {
- transformMatrix = transformMatrix *
-Transform::Rotate(0, toRadians(parameters, 0.0f), 0);
+ transformMatrix.operations.push_back(
+TransformOperation{TransformOperationType::Rotate, Zero, ValueUnit(toRadians(parameters, 0.0f), UnitType::Point), Zero});
  } else if (operation == "rotateZ" || operation == "rotate") {
- transformMatrix = transformMatrix *
-Transform::Rotate(0, 0, toRadians(parameters, 0.0f));
+ transformMatrix.operations.push_back(
+TransformOperation{TransformOperationType::Rotate, Zero, Zero, ValueUnit(toRadians(parameters, 0.0f), UnitType::Point)});
  } else if (operation == "scale") {
- auto number = (Float)parameters;
- transformMatrix =
-transformMatrix * Transform::Scale(number, number, number);
+ auto number = ValueUnit((Float)parameters, UnitType::Point);
+ transformMatrix.operations.push_back(TransformOperation{
+TransformOperationType::Scale, number, number, number});
  } else if (operation == "scaleX") {
- transformMatrix =
-transformMatrix * Transform::Scale((Float)parameters, 1, 1);
+ transformMatrix.operations.push_back(TransformOperation{
+TransformOperationType::Scale, ValueUnit((Float)parameters, UnitType::Point), One, One});
  } else if (operation == "scaleY") {
- transformMatrix =
-transformMatrix * Transform::Scale(1, (Float)parameters, 1);
+ transformMatrix.operations.push_back(TransformOperation{
+TransformOperationType::Scale, One, ValueUnit((Float)parameters, UnitType::Point), One});
  } else if (operation == "scaleZ") {
- transformMatrix =
-transformMatrix * Transform::Scale(1, 1, (Float)parameters);
+ transformMatrix.operations.push_back(TransformOperation{
+TransformOperationType::Scale, One, One, ValueUnit((Float)parameters, UnitType::Point)});
  } else if (operation == "translate") {
- auto numbers = (std::vector<Float>)parameters;
- transformMatrix = transformMatrix *
- Transform::Translate(numbers.at(0), numbers.at(1), 0);
+ auto numbers = (std::vector<RawValue>)parameters;
+ auto valueX = ValueUnit::getValueUnitFromRawValue(numbers.at(0));
+ auto valueY = ValueUnit::getValueUnitFromRawValue(numbers.at(1));
+ transformMatrix.operations.push_back(TransformOperation{
+ TransformOperationType::Translate, valueX, valueY, Zero});
  } else if (operation == "translateX") {
- transformMatrix =
- transformMatrix * Transform::Translate((Float)parameters, 0, 0);
+ auto value = ValueUnit::getValueUnitFromRawValue(parameters);
+ transformMatrix.operations.push_back(TransformOperation{
+ TransformOperationType::Translate, value, Zero, Zero});
  } else if (operation == "translateY") {
- transformMatrix =
- transformMatrix * Transform::Translate(0, (Float)parameters, 0);
+ auto value = ValueUnit::getValueUnitFromRawValue(parameters);
+ transformMatrix.operations.push_back(TransformOperation{
+ TransformOperationType::Translate, Zero, value, Zero});
  } else if (operation == "skewX") {
- transformMatrix =
-transformMatrix * Transform::Skew(toRadians(parameters, 0.0f), 0);
+ transformMatrix.operations.push_back(
+TransformOperation{TransformOperationType::Skew, ValueUnit(toRadians(parameters, 0.0f), UnitType::Point), Zero, Zero});
  } else if (operation == "skewY") {
- transformMatrix =
-transformMatrix * Transform::Skew(0, toRadians(parameters, 0.0f));
+ transformMatrix.operations.push_back(
+TransformOperation{TransformOperationType::Skew, Zero, ValueUnit(toRadians(parameters, 0.0f), UnitType::Point), Zero});
  }
  }