Content Types

Type definitions for representing content in React Native Beagle detail views

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

TextContent

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.

JsonContent

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.

LabelContent

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).

LoadingContent

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

SectionContent

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.

BoxContent

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.

ListContent

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

Tab

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.

TabBarContent

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

Simple List

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: '[e-mail]'
    }
  ]
};