CapDrive
User guide

RadialLayout

Distribute scales, numbers, or symbols around a circle. radius controls the distance from the center to the layout center of View, and startAngle and sweepAngle control the distribution range.

Example

function main() {
  return (
    <RadialLayout
      radius={70}
      startAngle={-90}
      sweepAngle={270}
      includeEnd={true}
    >
      {[0, 60, 120, 180].map((value) => (
        <Text key={value}>{value}</Text>
      ))}
    </RadialLayout>
  );
}

Usage

  • Radii position child centers, not the outer container edge. includeEnd=false divides the sweep into n parts; true uses n−1 and suits partial-scale endpoints. Including a full-circle endpoint overlaps first and last children. childRotation controls orientation.
  • Angles use degrees: 0 right, 90 down, positive sweeps clockwise. startAngle wraps modulo 360; sweepAngle preserves direction and clamps to −360…360. Zero draws nothing; ±360 closes a full turn. startAngle transitions may use wrap:360; sweepAngle cannot.
  • Use stable data identifiers as array keys so updates and animations retain View identity. An array index is unsuitable as permanent identity when items can reorder.

Properties

children?ViewContent

Child drawing content.

radius?number

Layout radius in points. radius applies to both axes; radiusX/radiusY override each axis. Negative radii become 0.

Example80
radiusX?number

Layout radius in points. radius applies to both axes; radiusX/radiusY override each axis. Negative radii become 0.

Example80
radiusY?number

Layout radius in points. radius applies to both axes; radiusX/radiusY override each axis. Negative radii become 0.

Example80
startAngle?number

Start angle in degrees, wrapped modulo 360 when sampled.

Example-90
sweepAngle?number

Sweep in degrees, clamped to -360…360 when sampled. Positive is clockwise; wrap is unsupported.

Example360
includeEnd?boolean

Include the sweep endpoint in child placement. Leave false for a full circle to avoid overlapping first and last items.

Examplefalse
childRotation?"none" | "radial" | "tangent"

Child rotation: none preserves orientation, radial follows the radius, tangent adds 90 degrees.

Example"none"
Common properties
width?number | "auto" | "fill"

Width in points, auto sizing or parent fill.

Example100
height?number | "auto" | "fill"

Height in points, auto sizing or parent fill.

Example80
padding?number

Content padding in points.

Example0
x?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0
y?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0
transform?ViewTransform

Transform the whole View without changing layout. Translation uses points; rotation/skew use degrees; scale 1 is unchanged; anchors use 0–1.

Example{rotation: 0}
background?Paint

Background paint; accepts a color or gradient. Use clear for transparency.

Example"clear"
opacity?number

Opacity of the whole View: 0 is transparent, 1 is opaque.

Example1
cornerRadius?number

Corner radius in points.

Example0
clipped?boolean

Clip drawing that extends beyond the View bounds.

Examplefalse
clip?"rectangle" | "ellipse"

Clipping shape: rectangle or ellipse. Material also accepts false to disable clipping.

Example"rectangle"
mask?View | null

Alpha mask View. Centered without affecting layout; null disables masking.

Example<Circle width="fill" height="fill" background="white"/>
zIndex?number

Drawing order among siblings; larger values appear in front.

Example0
blur?number

Blur radius in points; 0 disables blur.

Example4
innerShadow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Color of the outer shadow.

ExampleHDR("black")
shadowOpacity?number

Outer shadow opacity from 0 to 1; 0 hides it.

Example0
shadowRadius?number

Outer shadow blur radius in points.

Example4
shadowX?number

Outer shadow offset in points: x right, y down.

Example0
shadowY?number

Outer shadow offset in points: x right, y down.

Example2
animations?RadialLayoutAnimation[]

Animate a supported property when it changes. duration/delay use seconds; from/to set endpoints; repeat and autoreverse control repetition; wrap sets a periodic range.

Example[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Stable identity among siblings.

Practical example

function main() {
  return (
    <RadialLayout
      width={200}
      height={200}
      radius={76}
      startAngle={-135}
      sweepAngle={270}
      includeEnd={true}
    >
      {[0, 50, 100, 150, 200].map((value) => (
        <Text key={value} fontSize={14}>
          {value}
        </Text>
      ))}
    </RadialLayout>
  );
}

Animation

Animation

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYradiusradiusXradiusYstartAnglesweepAngletransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

When omitted

The table lists omission behavior verified against implementation. Property examples are copyable syntax, not defaults. Pass explicit values for a fixed result; contextual dimensions and theme colors are not fixed constants.

PropertiesWhen omitted
radius80
startAngle-90
sweepAngle360
includeEndfalse
childRotation"none"

Circle

Arc

RepeatedLayout

Previous

Circle

Next step

On this page

ExampleUsagePropertiesPractical exampleAnimationWhen omittedRelated APIs