Nodes - EXPRESSO Docs

React intrinsic nodes are the native building blocks rendered by @napps/nodes. Use them as JSX elements inside a React component.

<column style={{ padding: 16, spacing: 12 }}>
  <text style={{ fontSize: 20, fontWeight: 700 }}>Featured</text>
  <row style={{ spacing: 8 }}>
    <box style={{ width: 80, height: 80, backgroundColor: "#dbeafe" }} />
    <text>Product details</text>
  </row>
</column>

Supported nodes

Node	Use it for	Status
`box`	Stacking and general-purpose containers	Supported
`column`	Vertical layout	Supported
`row`	Horizontal layout	Supported
`text`	Text content	Supported
`img`	Images	Supported
`video`	Video playback	Supported
`touchable`	Pressable content without built-in button chrome	Supported
`button`	Native button presentation	Supported
`textInput`	Text entry	Supported
`scrollable`	Scrollable content	Supported
`pager`	Paging and snapping	Supported
`bottomSheet`	Bottom-sheet content	Experimental
`gestureDetector`	Native gesture recognition	Experimental

Common properties

Every intrinsic node accepts these React properties:

Property	Type	Description
`style`	`StyleProperties`	Layout, color, typography, shape, and transform values. See React styling.
`key`	`string \| number`	React reconciliation key for dynamic children.
`class`	`string`	A registered style name. It applies only to the node where it is set.

Only container and content nodes render children: box, column, row, text, touchable, scrollable, pager, bottomSheet, and gestureDetector. The leaf nodes img, video, button, and textInput do not render children. Use their documented properties, such as src, text, or value, instead. Node-specific properties are documented on each page. Properties not listed for a node are not part of its typed JSX contract.

Layout guidance

Use column and row to express the primary layout direction.
Use box when children should stack on top of one another.
Use padding on scrollable and pager for content-edge spacing. Margins reduce the usable scroll area.
For pressed or gesture-driven feedback, use gestureDetector with shared values and animatedProps. For a non-animated selected state, update the style directly from React state.
Keep gestureDetector around the smallest subtree that needs gesture input.

Node pages

Each page lists the complete typed property surface and includes a runnable example:

​Supported nodes

​Common properties

​Layout guidance

​Node pages

Supported nodes

Common properties

Layout guidance

Node pages