Skip to content

(cherry-pick) Add support for percentage values for border radius in fast path on Android #7997

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 5, 2025
Merged

(cherry-pick) Add support for percentage values for border radius in fast path on Android #7997

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions apps/common-app/src/apps/reanimated/examples/SynchronousPropsExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,8 +131,6 @@ export default function SynchronousPropsExample() {
source={require('./assets/logo.png')}
/>

{/* TODO: support % for border(...)Radius */}
{/* TODO: test px and % */}
{[
'borderRadius',
'borderTopLeftRadius',
Expand All @@ -149,7 +147,7 @@ export default function SynchronousPropsExample() {
'borderEndEndRadius',
].map((prop) => (
<React.Fragment key={prop}>
<Text>{prop}</Text>
<Text>{prop} [px]</Text>
<Animated.View
style={{
width: 50,
Expand All @@ -158,6 +156,15 @@ export default function SynchronousPropsExample() {
[prop]: fiftySv,
}}
/>
<Text>{prop} [%]</Text>
<Animated.View
style={{
width: 50,
height: 50,
borderWidth: 1,
[prop]: percentSv,
}}
/>
</React.Fragment>
))}

Expand Down
46 changes: 32 additions & 14 deletions ...ges/react-native-reanimated/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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(
Expand Down Expand Up @@ -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();
Expand Down
37 changes: 24 additions & 13 deletions ...s/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/NativeProxy.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand All @@ -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) {
Expand Down
Loading