Skip to content

[Android] Accept percentage-based border radius #4185

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
j-piasecki merged 1 commit into from
May 22, 2026
+43 −29
Merged

[Android] Accept percentage-based border radius #4185

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
38 changes: 20 additions & 18 deletions ...oid/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,10 @@ import android.view.accessibility.AccessibilityNodeInfo
import androidx.core.view.children
import androidx.interpolator.view.animation.FastOutSlowInInterpolator
import com.facebook.react.R
import com.facebook.react.bridge.Dynamic
import com.facebook.react.module.annotations.ReactModule
import com.facebook.react.uimanager.BackgroundStyleApplicator
import com.facebook.react.uimanager.LengthPercentage
import com.facebook.react.uimanager.LengthPercentageType
import com.facebook.react.uimanager.PixelUtil
import com.facebook.react.uimanager.PointerEvents
import com.facebook.react.uimanager.ReactPointerEventsView
Expand Down Expand Up @@ -178,74 +178,76 @@ class RNGestureHandlerButtonViewManager :
view.setOverflow(overflow)
}

private fun setBorderRadiusInternal(view: ButtonViewGroup, prop: BorderRadiusProp, value: Float) {
val isUnset = value.isNaN() || value < 0f
val lp = if (isUnset) null else LengthPercentage(value, LengthPercentageType.POINT)
private fun setBorderRadiusInternal(view: ButtonViewGroup, prop: BorderRadiusProp, value: Dynamic) {
// setFromDynamic returns null for null Dynamics, negative numbers, and
// unparseable strings — which is what we want for "unset" so that
// general / physical radii continue to cascade.
val lp = LengthPercentage.setFromDynamic(value)
BackgroundStyleApplicator.setBorderRadius(view, prop, lp)
Comment thread
j-piasecki marked this conversation as resolved.
}

@ReactProp(name = ViewProps.BORDER_RADIUS)
override fun setBorderRadius(view: ButtonViewGroup, borderRadius: Float) {
setBorderRadiusInternal(view, BorderRadiusProp.BORDER_RADIUS, borderRadius)
override fun setBorderRadius(view: ButtonViewGroup, value: Dynamic) {
setBorderRadiusInternal(view, BorderRadiusProp.BORDER_RADIUS, value)
}

@ReactProp(name = "borderTopLeftRadius")
override fun setBorderTopLeftRadius(view: ButtonViewGroup, value: Float) {
override fun setBorderTopLeftRadius(view: ButtonViewGroup, value: Dynamic) {
setBorderRadiusInternal(view, BorderRadiusProp.BORDER_TOP_LEFT_RADIUS, value)
}

@ReactProp(name = "borderTopRightRadius")
override fun setBorderTopRightRadius(view: ButtonViewGroup, value: Float) {
override fun setBorderTopRightRadius(view: ButtonViewGroup, value: Dynamic) {
setBorderRadiusInternal(view, BorderRadiusProp.BORDER_TOP_RIGHT_RADIUS, value)
}

@ReactProp(name = "borderBottomRightRadius")
override fun setBorderBottomRightRadius(view: ButtonViewGroup, value: Float) {
override fun setBorderBottomRightRadius(view: ButtonViewGroup, value: Dynamic) {
setBorderRadiusInternal(view, BorderRadiusProp.BORDER_BOTTOM_RIGHT_RADIUS, value)
}

@ReactProp(name = "borderBottomLeftRadius")
override fun setBorderBottomLeftRadius(view: ButtonViewGroup, value: Float) {
override fun setBorderBottomLeftRadius(view: ButtonViewGroup, value: Dynamic) {
setBorderRadiusInternal(view, BorderRadiusProp.BORDER_BOTTOM_LEFT_RADIUS, value)
}

@ReactProp(name = "borderTopStartRadius")
override fun setBorderTopStartRadius(view: ButtonViewGroup, value: Float) {
override fun setBorderTopStartRadius(view: ButtonViewGroup, value: Dynamic) {
setBorderRadiusInternal(view, BorderRadiusProp.BORDER_TOP_START_RADIUS, value)
}

@ReactProp(name = "borderTopEndRadius")
override fun setBorderTopEndRadius(view: ButtonViewGroup, value: Float) {
override fun setBorderTopEndRadius(view: ButtonViewGroup, value: Dynamic) {
setBorderRadiusInternal(view, BorderRadiusProp.BORDER_TOP_END_RADIUS, value)
}

@ReactProp(name = "borderBottomStartRadius")
override fun setBorderBottomStartRadius(view: ButtonViewGroup, value: Float) {
override fun setBorderBottomStartRadius(view: ButtonViewGroup, value: Dynamic) {
setBorderRadiusInternal(view, BorderRadiusProp.BORDER_BOTTOM_START_RADIUS, value)
}

@ReactProp(name = "borderBottomEndRadius")
override fun setBorderBottomEndRadius(view: ButtonViewGroup, value: Float) {
override fun setBorderBottomEndRadius(view: ButtonViewGroup, value: Dynamic) {
setBorderRadiusInternal(view, BorderRadiusProp.BORDER_BOTTOM_END_RADIUS, value)
}

@ReactProp(name = "borderEndEndRadius")
override fun setBorderEndEndRadius(view: ButtonViewGroup, value: Float) {
override fun setBorderEndEndRadius(view: ButtonViewGroup, value: Dynamic) {
setBorderRadiusInternal(view, BorderRadiusProp.BORDER_END_END_RADIUS, value)
}

@ReactProp(name = "borderEndStartRadius")
override fun setBorderEndStartRadius(view: ButtonViewGroup, value: Float) {
override fun setBorderEndStartRadius(view: ButtonViewGroup, value: Dynamic) {
setBorderRadiusInternal(view, BorderRadiusProp.BORDER_END_START_RADIUS, value)
}

@ReactProp(name = "borderStartEndRadius")
override fun setBorderStartEndRadius(view: ButtonViewGroup, value: Float) {
override fun setBorderStartEndRadius(view: ButtonViewGroup, value: Dynamic) {
setBorderRadiusInternal(view, BorderRadiusProp.BORDER_START_END_RADIUS, value)
}

@ReactProp(name = "borderStartStartRadius")
override fun setBorderStartStartRadius(view: ButtonViewGroup, value: Float) {
override fun setBorderStartStartRadius(view: ButtonViewGroup, value: Dynamic) {
setBorderRadiusInternal(view, BorderRadiusProp.BORDER_START_START_RADIUS, value)
}

Expand Down
34 changes: 23 additions & 11 deletions packages/react-native-gesture-handler/src/specs/RNGestureHandlerButtonNativeComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { ColorValue, ViewProps } from 'react-native';
import type {
Float,
Int32,
UnsafeMixed,
WithDefault,
} from 'react-native/Libraries/Types/CodegenTypes';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
Expand Down Expand Up @@ -56,17 +57,28 @@ interface NativeProps extends ViewProps {
borderBlockEndColor?: ColorValue;
borderBlockStartColor?: ColorValue;

// Border radius — logical variants beyond what ViewProps provides
// WithDefault -1 so the codegen sends -1 (our "unset" sentinel) instead of 0
// when the prop is absent, letting physical / general radii take effect.
borderTopStartRadius?: WithDefault<Float, -1>;
borderTopEndRadius?: WithDefault<Float, -1>;
borderBottomStartRadius?: WithDefault<Float, -1>;
borderBottomEndRadius?: WithDefault<Float, -1>;
borderEndEndRadius?: WithDefault<Float, -1>;
borderEndStartRadius?: WithDefault<Float, -1>;
borderStartEndRadius?: WithDefault<Float, -1>;
borderStartStartRadius?: WithDefault<Float, -1>;
// Border radius — declared as UnsafeMixed (folly::dynamic on iOS,
// DynamicFromObject on Android) so codegen forwards the raw value
// without coercing to Float. This lets the Android view manager parse
// both numeric points and percentage strings via
// LengthPercentage.setFromDynamic, matching RN's standard View. The
// non-logical variants are declared explicitly so they're dispatched
// through our delegate instead of falling through to
// BaseViewManagerDelegate, which casts to Double and would crash on a
// string value.
borderRadius?: UnsafeMixed;
borderTopLeftRadius?: UnsafeMixed;
borderTopRightRadius?: UnsafeMixed;
borderBottomLeftRadius?: UnsafeMixed;
borderBottomRightRadius?: UnsafeMixed;
borderTopStartRadius?: UnsafeMixed;
borderTopEndRadius?: UnsafeMixed;
borderBottomStartRadius?: UnsafeMixed;
borderBottomEndRadius?: UnsafeMixed;
borderEndEndRadius?: UnsafeMixed;
borderEndStartRadius?: UnsafeMixed;
borderStartEndRadius?: UnsafeMixed;
borderStartStartRadius?: UnsafeMixed;
}

export default codegenNativeComponent<NativeProps>('RNGestureHandlerButton');
Loading