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 — use Tailwind-style classes (rounded-*, border-*, opacity-*, shadow-*) for radius, borders, opacity, and elevation, just as on any other element.

<native:rect :width="120" :height="80" bg="#7C3AED" class="rounded-xl" />

Props#

The left / top position props are accepted by the PHP element but are not currently read by the iOS or Android renderers. To offset a rect inside a parent, use absolute-positioning classes instead — e.g. class="absolute top-[8] left-[8]".

<native:rect> is a self-closing element, so it doesn't accept tag children. To layer content on top of the fill, overlay the rect and your content inside a <native:stack>. In PHP, the Rect element accepts children via addChild() if you'd rather build the layering fluently.

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#

As with <native:rect>, the left / top position props exist on the PHP element but the renderers don't read them — position circles with absolute-positioning classes (class="absolute top-[8] left-[8]") or by centering them in a <native:stack>.

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

Line#

A horizontal rule. Style it with border-* classes:

<native:line class="border-2 border-theme-outline" />

Props#

All shared layout and style attributes are supported. Set the stroke through classes:

• border-theme-outline / border-[#94A3B8] - Line color (default: platform separator color)
• border / border-2 / border-4 - Stroke thickness in dp (default: 1)

Examples#

Status dot#

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

Colored badge background#

Overlay the label on a filled rect with a <native:stack>. Give the rect an explicit frame and center the text on top:

<native:stack class="items-center justify-center">
    <native:rect :width="52" :height="24" bg="#DBEAFE" class="rounded-xl" />
    <native:text :font-size="12" :font-weight="5" color="#2563EB">New</native:text>
</native:stack>

Decorative separator#

<native:line class="border border-theme-outline" />

For a full-width rule that renders consistently on both platforms today, use a divider instead:

<native:divider class="border-theme-outline" />

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.