Skip to main content
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.
​
kind
'text'
required
Identifies this as a text content type.
​
text
string
required
The text content to display.
​
variant
TypographyVariant
Typography variant for styling the text.
​
bold
boolean
Whether to render the text in bold.
​
selectable
boolean
Whether the text can be selected by the user.
​
lines
number
Maximum number of lines to display before truncating.
Displays JSON data in a formatted, expandable view.
​
kind
'json'
required
Identifies this as a JSON content type.
​
data
Record<string, any>
required
The JSON data object to display.
​
expanded
boolean
Whether the JSON view should be expanded by default.
Displays a label-value pair.
​
kind
'label'
required
Identifies this as a label content type.
​
label
string
required
The label text (typically shown on the left).
​
value
string
required
The value text (typically shown on the right).
Displays a loading indicator with optional label.
​
kind
'loading'
required
Identifies this as a loading content type.
​
label
string
Optional text to display alongside the loading indicator.
​
size
number
Size of the loading indicator in pixels.

​
Layout Content Types

Groups content under an expandable section with a title.
​
kind
'section'
required
Identifies this as a section content type.
​
key
string
required
Unique identifier for this section.
​
title
string
required
The section header title.
​
expanded
boolean
Whether the section should be expanded by default.
​
children
Content[]
required
Array of content items within this section.
Container for laying out content in rows or columns.
​
kind
'box'
required
Identifies this as a box content type.
​
key
string
required
Unique identifier for this box.
​
direction
'row' | 'column'
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.
​
children
Content[]
required
Array of content items within this box.
Container for a list of content items, optionally including sections.
​
kind
'list'
required
Identifies this as a list content type.
​
key
string
required
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.
​
title
string
required
The tab label displayed in the tab bar.
​
content
ListContent
required
The content to display when this tab is active.
Creates a tabbed interface with multiple tabs.
​
kind
'tab-bar'
required
Identifies this as a tab bar content type.
​
tabs
Tab[]
required
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

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: '[email protected]'
    }
  ]
};

Build docs developers (and LLMs) love

Get started for freeTalk to us