diff --git a/apps/common-app/src/apps/reanimated/examples/SynchronousPropsExample.tsx b/apps/common-app/src/apps/reanimated/examples/SynchronousPropsExample.tsx index b701a85c6677..ebb9f761847a 100644 --- a/apps/common-app/src/apps/reanimated/examples/SynchronousPropsExample.tsx +++ b/apps/common-app/src/apps/reanimated/examples/SynchronousPropsExample.tsx @@ -131,8 +131,6 @@ export default function SynchronousPropsExample() { source={require('./assets/logo.png')} /> - {/* TODO: support % for border(...)Radius */} - {/* TODO: test px and % */} {[ 'borderRadius', 'borderTopLeftRadius', @@ -149,7 +147,7 @@ export default function SynchronousPropsExample() { 'borderEndEndRadius', ].map((prop) => ( - {prop} + {prop} [px] + {prop} [%] + ))} diff --git a/packages/react-native-reanimated/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.cpp b/packages/react-native-reanimated/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.cpp index 5839d28e1a84..96b9bbeb34ed 100644 --- a/packages/react-native-reanimated/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.cpp +++ b/packages/react-native-reanimated/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.cpp @@ -930,19 +930,6 @@ void ReanimatedModuleProxy::performOperations() { case CMD_Z_INDEX: case CMD_SHADOW_OPACITY: case CMD_SHADOW_RADIUS: - case CMD_BORDER_RADIUS: - case CMD_BORDER_TOP_LEFT_RADIUS: - case CMD_BORDER_TOP_RIGHT_RADIUS: - case CMD_BORDER_TOP_START_RADIUS: - case CMD_BORDER_TOP_END_RADIUS: - case CMD_BORDER_BOTTOM_LEFT_RADIUS: - case CMD_BORDER_BOTTOM_RIGHT_RADIUS: - case CMD_BORDER_BOTTOM_START_RADIUS: - case CMD_BORDER_BOTTOM_END_RADIUS: - case CMD_BORDER_START_START_RADIUS: - case CMD_BORDER_START_END_RADIUS: - case CMD_BORDER_END_START_RADIUS: - case CMD_BORDER_END_END_RADIUS: intBuffer.push_back(command); doubleBuffer.push_back(value.asDouble()); break; @@ -961,6 +948,37 @@ void ReanimatedModuleProxy::performOperations() { intBuffer.push_back(value.asInt()); break; + case CMD_BORDER_RADIUS: + case CMD_BORDER_TOP_LEFT_RADIUS: + case CMD_BORDER_TOP_RIGHT_RADIUS: + case CMD_BORDER_TOP_START_RADIUS: + case CMD_BORDER_TOP_END_RADIUS: + case CMD_BORDER_BOTTOM_LEFT_RADIUS: + case CMD_BORDER_BOTTOM_RIGHT_RADIUS: + case CMD_BORDER_BOTTOM_START_RADIUS: + case CMD_BORDER_BOTTOM_END_RADIUS: + case CMD_BORDER_START_START_RADIUS: + case CMD_BORDER_START_END_RADIUS: + case CMD_BORDER_END_START_RADIUS: + case CMD_BORDER_END_END_RADIUS: + intBuffer.push_back(command); + if (value.isDouble()) { + intBuffer.push_back(CMD_UNIT_PX); + doubleBuffer.push_back(value.getDouble()); + } else if (value.isString()) { + const auto &valueStr = value.getString(); + if (!valueStr.ends_with("%")) { + throw std::runtime_error( + "Border radius string must be a percentage"); + } + intBuffer.push_back(CMD_UNIT_PERCENT); + doubleBuffer.push_back(std::stof(valueStr.substr(0, -1))); + } else { + throw std::runtime_error( + "Border radius value must be either a number or a string"); + } + break; + case CMD_START_OF_TRANSFORM: intBuffer.push_back(command); react_native_assert( @@ -990,7 +1008,7 @@ void ReanimatedModuleProxy::performOperations() { intBuffer.push_back(transformCommand); if (transformValue.isDouble()) { intBuffer.push_back(CMD_UNIT_PX); - doubleBuffer.push_back(transformValue.asDouble()); + doubleBuffer.push_back(transformValue.getDouble()); } else if (transformValue.isString()) { const auto &transformValueStr = transformValue.getString(); diff --git a/packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/NativeProxy.java b/packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/NativeProxy.java index 564620c8c473..a02506c561d7 100644 --- a/packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/NativeProxy.java +++ b/packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/NativeProxy.java @@ -308,19 +308,6 @@ public void synchronouslyUpdateUIProps(int[] intBuffer, double[] doubleBuffer) { case CMD_Z_INDEX: case CMD_SHADOW_OPACITY: case CMD_SHADOW_RADIUS: - case CMD_BORDER_RADIUS: - case CMD_BORDER_TOP_LEFT_RADIUS: - case CMD_BORDER_TOP_RIGHT_RADIUS: - case CMD_BORDER_TOP_START_RADIUS: - case CMD_BORDER_TOP_END_RADIUS: - case CMD_BORDER_BOTTOM_LEFT_RADIUS: - case CMD_BORDER_BOTTOM_RIGHT_RADIUS: - case CMD_BORDER_BOTTOM_START_RADIUS: - case CMD_BORDER_BOTTOM_END_RADIUS: - case CMD_BORDER_START_START_RADIUS: - case CMD_BORDER_START_END_RADIUS: - case CMD_BORDER_END_START_RADIUS: - case CMD_BORDER_END_END_RADIUS: { String name = commandToString(command); props.putDouble(name, doubleIterator.nextDouble()); @@ -343,6 +330,30 @@ public void synchronouslyUpdateUIProps(int[] intBuffer, double[] doubleBuffer) { break; } + case CMD_BORDER_RADIUS: + case CMD_BORDER_TOP_LEFT_RADIUS: + case CMD_BORDER_TOP_RIGHT_RADIUS: + case CMD_BORDER_TOP_START_RADIUS: + case CMD_BORDER_TOP_END_RADIUS: + case CMD_BORDER_BOTTOM_LEFT_RADIUS: + case CMD_BORDER_BOTTOM_RIGHT_RADIUS: + case CMD_BORDER_BOTTOM_START_RADIUS: + case CMD_BORDER_BOTTOM_END_RADIUS: + case CMD_BORDER_START_START_RADIUS: + case CMD_BORDER_START_END_RADIUS: + case CMD_BORDER_END_START_RADIUS: + case CMD_BORDER_END_END_RADIUS: + { + String name = commandToString(command); + double value = doubleIterator.nextDouble(); + switch (intIterator.nextInt()) { + case CMD_UNIT_PX -> props.putDouble(name, value); + case CMD_UNIT_PERCENT -> props.putString(name, value + "%"); + default -> throw new RuntimeException("Unknown unit command"); + } + break; + } + case CMD_START_OF_TRANSFORM: JavaOnlyArray transform = new JavaOnlyArray(); while (true) {