Shapes

Overview#

Shape primitives for drawing simple geometric forms. Three primitives are available:

• <native:rect> — rectangle
• <native:circle> — circle
• <native:line> — horizontal rule

These are typically placed inside a <native:canvas> or used standalone for decorative accents.

Rect#

A rectangle filled with bg. All shared layout and style attributes apply, so border, radius, opacity, and elevation behave as on any other element.

<native:rect :width="120" :height="80" bg="#7C3AED" :border-radius="12" />

Props#

• left - X position offset in dp (optional, float). Used inside an absolutely-positioned parent
• top - Y position offset in dp (optional, float)

<native:rect> may optionally wrap children if you need to layer content on top of the fill.

Circle#

A circle filled with bg. Defaults to border-radius: 9999 so any square-ish frame appears as a circle. For a perfect circle use equal width and height.

<native:circle :width="64" :height="64" bg="#22C55E" />

Props#

• left - X position offset in dp (optional, float)
• top - Y position offset in dp (optional, float)

<native:circle> is a self-closing element. It does not accept children.

Line#

A 1pt horizontal rule across the available width.

<native:line :border-width="2" border-color="#94A3B8" />

Props#

All shared layout and style attributes are supported. The most useful:

• border-color - Line color as hex string (optional, default: platform separator color)
• border-width - Stroke thickness in dp (optional, float, default: 1)

Examples#

Status dot#

<native:circle :width="12" :height="12" bg="#22C55E" />

Colored badge background#

<native:rect :padding="[4, 12]" bg="#DBEAFE" :border-radius="12">
    <native:text :font-size="12" :font-weight="5" color="#2563EB">New</native:text>
</native:rect>

Decorative separator#

<native:line :border-width="1" border-color="#E2E8F0" />

Element#

use Native\Mobile\Edge\Elements\Rect;
use Native\Mobile\Edge\Elements\Circle;
use Native\Mobile\Edge\Elements\Line;
 
Rect::make();
Circle::make();
Line::make();

All three expose make() and inherit the standard layout / style fluent API.