Documentation Index Fetch the complete documentation index at: https://mintlify.com/ailtonvivaz/react-native-beagle/llms.txt
Use this file to discover all available pages before exploring further.
The content type system provides a flexible way to define structured content for detail views in React Native Beagle. Each content type has a unique kind field that identifies its type.
Core Content Types
Displays plain or formatted text. Identifies this as a text content type.
The text content to display.
Typography variant for styling the text.
Whether to render the text in bold.
Whether the text can be selected by the user.
Maximum number of lines to display before truncating.
Displays JSON data in a formatted, expandable view. Identifies this as a JSON content type.
data
Record<string, any>
required
The JSON data object to display.
Whether the JSON view should be expanded by default.
Displays a label-value pair. Identifies this as a label content type.
The label text (typically shown on the left).
The value text (typically shown on the right).
Displays a loading indicator with optional label. Identifies this as a loading content type.
Optional text to display alongside the loading indicator.
Size of the loading indicator in pixels.
Layout Content Types
Groups content under an expandable section with a title. Identifies this as a section content type.
Unique identifier for this section.
The section header title.
Whether the section should be expanded by default.
Array of content items within this section.
Container for laying out content in rows or columns. Identifies this as a box content type.
Unique identifier for this box.
Layout direction for children (defaults to column).
justifyContent
'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around'
How to distribute space along the main axis.
Array of content items within this box.
Container for a list of content items, optionally including sections. Identifies this as a list content type.
Unique identifier for this list.
children
(Content | SectionContent)[]
required
Array of content items or sections within this list.
Tab Navigation Types
Defines a single tab with its content. The tab label displayed in the tab bar.
The content to display when this tab is active.
Creates a tabbed interface with multiple tabs. Identifies this as a tab bar content type.
Array of tabs to display in the tab bar.
Union Types Content The base union type for simple content items:
type Content = TextContent | JsonContent | LabelContent | LoadingContent ;
DetailContent Union type for top-level detail view content:
type DetailContent = ListContent | TabBarContent ;
This type represents the root content that can be returned from detail providers. It supports either a simple list or a tabbed interface.
Type Relationships DetailContent ├── ListContent │ └── children: (Content | SectionContent)[] │ ├── Content (TextContent | JsonContent | LabelContent | LoadingContent) │ └── SectionContent │ └── children: Content[] └── TabBarContent └── tabs: Tab[] └── content: ListContent
Example Usage Simple List
Sectioned List
Tabbed Content
JSON Data
import { ListContent , TextContent , LabelContent } from 'react-native-beagle' ; const detailContent : ListContent = { kind: 'list' , key: 'user-details' , children: [ { kind: 'text' , text: 'User Information' , variant: 'h2' , bold: true }, { kind: 'label' , label: 'Name' , value: 'John Doe' }, { kind: 'label' , label: 'Email' , value: 'john@example.com' } ] };