Component Properties - NativeFlow Docs

Every component type in NativeFlow Studio’s general component registry, and every property Studio exposes for it anywhere in the editor — not specific to Themed Components. See the Themed Component Property Reference for the narrower schema the Create Themed Component dialog itself exposes. 53 component types · 432 schema properties · 72 shared style keys · 354 events across all types See Create Themed Component for how a subset of these become reusable presets, and Themed Component Property Reference for that dialog’s own, more precise schema.

Available Widgets, by Category

Charts

Component	Accepts Children	Web Support	Own Properties	Events
AreaChart	No	Degraded	20	5
BarChart	No	Degraded	18	5
LineChart	No	Degraded	21	5
PieChart	No	Degraded	10	5
StackedBarChart	No	Degraded	17	5

Data Display

Component	Accepts Children	Web Support	Own Properties	Events
Badge	No	Supported	4	5
Card	Yes	Supported	3	6
CardList	Yes	Supported	10	12
LanguageSwitcher	No	Supported	2	5
List	Yes	Supported	11	12
Table	No	Supported	15	5

Disclosure

Component	Accepts Children	Web Support	Own Properties	Events
Accordion	No	Supported	6	6
Actionsheet	No	Degraded	3	7

Feedback

Component	Accepts Children	Web Support	Own Properties	Events
Alert	No	Supported	3	5
Progress	No	Supported	5	5
Spinner	No	Supported	2	5
Toast	No	Supported	6	5

Forms

Component	Accepts Children	Web Support	Own Properties	Events
Button	No	Supported	8	7
Checkbox	No	Supported	8	6
Form	Yes	Supported	0	6
FormControl	Yes	Supported	8	6
IconButton	No	Supported	10	7
Input	No	Supported	9	10
Link	No	Supported	5	7
Pressable	Yes	Supported	4	7
Radio	No	Supported	8	6
SearchInput	No	Supported	16	11
Select	No	Supported	8	8
Slider	No	Supported	8	8
Switch	No	Supported	4	6
Textarea	No	Supported	7	10

Layout

Component	Accepts Children	Web Support	Own Properties	Events
Box	Yes	Supported	0	6
Center	Yes	Supported	0	6
Column	Yes	Supported	1	6
Divider	No	Supported	2	5
Grid	Yes	Supported	1	6
Row	Yes	Supported	1	6

Media And Icons

Component	Accepts Children	Web Support	Own Properties	Events
Avatar	No	Supported	3	7
Carousel	Yes	Supported	30	13
CircleImage	No	Supported	12	7
Icon	No	Supported	3	5
Image	No	Supported	4	7
Video	No	Supported	7	8

Others

Component	Accepts Children	Web Support	Own Properties	Events
Fab	No	Degraded	5	7
Skeleton	No	Supported	4	5

Overlay

Component	Accepts Children	Web Support	Own Properties	Events
AlertDialog	No	Supported	4	7
Drawer	No	Supported	3	7
Menu	No	Supported	4	7
Modal	Yes	Supported	4	7
Popover	No	Supported	5	7
Tooltip	No	Supported	2	7

Typography

Component	Accepts Children	Web Support	Own Properties	Events
Heading	No	Supported	7	5
Text	No	Supported	9	5

Universal Style Properties

Every one of the 53 component types above shares this exact same set of 72 style properties (Style panel: Appearance, Spacing, Sizing, and more) — confirmed identical across all of them in this schema snapshot, not just “usually the same.” They’re documented once here instead of repeated under every component below.

Appearance

Property	Panel Section	Type	Notes
`color`	Style › Appearance › Text	color	Hidden on non-text widgets.
`backgroundColor`	Style › Appearance › Background	color	Hex, rgba() or theme token; supports opacity.
`borderColor`	Style › Appearance › Border	color
`borderWidth`	Style › Appearance › Border	number
`opacity`	Style › Appearance › Opacity	number	0..1 in the model; the slider shows 0–100%.
`overflow`		enum	Containers author this as a prop; the native `<View>` ignores “scroll”.

Border

Property	Panel Section	Type	Notes
`borderTopWidth`		number
`borderRightWidth`		number
`borderBottomWidth`		number
`borderLeftWidth`		number
`borderTopLeftRadius`		number
`borderTopRightRadius`		number
`borderBottomLeftRadius`		number
`borderBottomRightRadius`		number
`borderStyle`		enum

Effects

Property	Type	Notes
`shadowColor`	color
`shadowOpacity`	number	iOS
`shadowRadius`	number	iOS
`shadowOffset`	object	`{ width, height }`
`elevation`	number	Android
`transform`	array	`[{ rotate: "45deg" }, { scale: 1.1 }]`

Flexbox

Property	Panel Section	Type	Notes
`flex`	Layout › Sizing (Hug / Fill / Expand)	number
`alignSelf`	Layout › cross-axis hint action	enum
`flexBasis`		number\|string
`flexGrow`		number
`flexShrink`		number
`flexDirection`		enum	Authored as a prop on containers; the style key is the codegen fallback.
`flexWrap`		enum
`justifyContent`		enum
`alignItems`		enum
`alignContent`		enum

Geometry

Property	Panel Section	Type	Notes
`width`	Style › Geometry › Size	number\|string	px in the panel; “50%” accepted in the schema.
`height`	Style › Geometry › Size	number\|string
`borderRadius`	Style › Geometry › Radius	number	Presets 0, 4, 8, 16, 999 + custom px.
`minHeight`	Layout › Min height	number\|string
`minWidth`		number\|string
`maxWidth`		number\|string
`maxHeight`		number\|string
`aspectRatio`		number
`display`		enum

Position

Property	Panel Section	Type	Notes
`position`		enum
`top`		number\|string
`right`		number\|string
`bottom`		number\|string
`left`		number\|string
`zIndex`		number

Spacing

Property	Panel Section	Type	Notes
`padding`	Layout › Padding	number	Default 0 (opt-in spacing).
`paddingTop`	Layout › Padding	number
`paddingRight`	Layout › Padding	number
`paddingBottom`	Layout › Padding	number
`paddingLeft`	Layout › Padding	number
`margin`	Layout › Margin	number
`marginTop`	Layout › Margin	number
`marginRight`	Layout › Margin	number
`marginBottom`	Layout › Margin	number
`marginLeft`	Layout › Margin	number
`gap`		number	On Row/Column the panel writes props.space / props.gap; the style key is the fallback.
`rowGap`		number
`columnGap`		number
`paddingHorizontal`		number
`paddingVertical`		number
`marginHorizontal`		number
`marginVertical`		number

Typography

Property	Type	Notes
`fontSize`	number	Panel authors typography via the text-style picker (theme styles), not raw px.
`fontWeight`	enum
`fontStyle`	enum
`fontFamily`	string
`lineHeight`	number	Locked to 1 on typography leaves (removes half-leading).
`letterSpacing`	number
`textAlign`	enum
`textTransform`	enum
`textDecorationLine`	enum

Component Details

Accordion

Category: Disclosure
Accepts children: No

Properties specific to this component (plus every Universal Style Property above):

Property	Label	Type	Default	Options / Description
`title`	Title	string	`Accordion Item`	Header text of the accordion section
`defaultValue`	Default Value	string	“	Key of the section that is expanded by default
`type`	Type	select	`single`	`single`, `multiple`
`variant`	Variant	select	`filled`	`filled`, `unfilled`
`isCollapsible`	Collapsible	boolean	`true`	Allow the open section to be collapsed by clicking again
`isDisabled`	Disabled	boolean	`false`	Prevent user interaction with the accordion

Events

Event	Category	Web Supported
On Tap	Touch	Yes
On Double Tap	Touch	Yes
On Long Press	Touch	Yes
On Touch Start	Touch	Yes
On Touch End	Touch	Yes
On Value Change	Disclosure	Yes

Property	Label	Type	Default	Options / Description
`text`	Text	string	`This is an alert`	The alert message text
`action`	Action	select	`info`	`error`, `warning`, `success`, `info`, `muted`
`variant`	Variant	select	`solid`	`solid`, `outline`, `accent`

Property	Label	Type	Default	Options / Description
`chartData`	Chart Data (JSON)	string	`[]`	JSON array of data points
`title`	Title	string	“	Chart title displayed above the chart
`lineColor`	Line Color	color	`#56D0A0`	Color of the area line
`startFillColor`	Fill Color	color	`#56D0A0`	Color of the area fill
`startOpacity`	Fill Opacity	number	`0.3`	Opacity of the area fill (0-1)
`thickness`	Line Thickness	number	`2`	Thickness of the line
`curved`	Curved	boolean	`true`	Use curved lines
`hideDataPoints`	Hide Data Points	boolean	`false`	Hide data point dots
`dataPointsColor`	Points Color	color	`#56D0A0`	Color of data point dots
`dataPointsRadius`	Points Radius	number	`3`	Radius of data point dots
`isAnimated`	Animated	boolean	`true`	Enable animation on render
`chartWidth`	Chart Width	number	`280`	Total chart width in pixels
`chartHeight`	Chart Height	number	`200`	Total chart height in pixels
`rulesColor`	Grid Color	color	`#F0F0F0`	Color of horizontal grid lines
`xAxisLabelColor`	X Label Color	color	`#999`	Color of X-axis labels
`yAxisLabelColor`	Y Label Color	color	`#999`	Color of Y-axis labels
`axisColor`	Axis Color	color	`#E0E0E0`	Color of the X and Y axis lines
`hideAxes`	Hide Axes	boolean	`false`	Hide X and Y axis lines entirely
`hideXAxisLabels`	Hide X Labels	boolean	`false`	Hide the X-axis text labels (e.g. months)
`hideYAxisLabels`	Hide Y Labels	boolean	`false`	Hide the Y-axis numeric tick labels

Property	Label	Type	Default	Options / Description
`src`	Image URL	string	“	URL of the avatar image
`size`	Size	select	`md`	`xs`, `sm`, `md`, `lg`, `xl`, `2xl`
`fallbackText`	Fallback Text	string	`AB`	Initials shown when no image is available

Property	Label	Type	Default	Options / Description
`text`	Text	string	`Badge`	The label text inside the badge
`variant`	Variant	select	`solid`	`solid`, `outline`
`action`	Action	select	`info`	`error`, `warning`, `success`, `info`, `muted`
`size`	Size	select	`md`	`sm`, `md`, `lg`

​Available Widgets, by Category

​Charts

​Data Display

​Disclosure

​Feedback

​Forms

​Layout

​Media And Icons

​Others

​Overlay

​Typography

​Universal Style Properties

​Appearance

​Border

​Effects

​Flexbox

​Geometry

​Position

​Spacing

​Typography

​Component Details

​Accordion

​Actionsheet

​Alert

​AlertDialog

​AreaChart

​Avatar

​Badge

​BarChart

​Box

​Button

​Card

​CardList

​Carousel

​Center

​Checkbox

​CircleImage

​Column

​Divider

​Drawer

​Fab

​Form

​FormControl

​Grid

​Heading

​Icon

​IconButton

​Image

​Input

​LanguageSwitcher

​LineChart

​Link

​List

​Menu

​Modal

​PieChart

​Popover

​Pressable

​Progress

​Radio

​Row

​SearchInput

​Select

​Skeleton

​Slider

​Spinner

​StackedBarChart

​Switch

​Table

​Text

​Textarea

​Toast

​Tooltip

​Video

​Related

Themed component properties

Style and tokens

Available Widgets, by Category

Charts

Data Display

Disclosure

Feedback

Forms

Layout

Media And Icons

Others

Overlay

Typography

Universal Style Properties

Appearance

Border

Effects

Flexbox

Geometry

Position

Spacing

Typography

Component Details

Accordion

Actionsheet

Alert

AlertDialog

AreaChart

Avatar

Badge

BarChart

Box

Button

Card

CardList

Carousel

Center

Checkbox

CircleImage

Column

Divider

Drawer

Fab

Form

FormControl

Grid

Heading

Icon

IconButton

Image

Input

LanguageSwitcher

LineChart

Link

List

Menu

Modal

PieChart

Popover

Pressable

Progress

Radio

Row

SearchInput

Select

Skeleton

Slider

Spinner

StackedBarChart

Switch

Table

Text

Textarea

Toast

Tooltip

Video

Related