Skip to content

Toolbar Primitive

A container designed for organizing a collection of controls, such as buttons, toggle groups, or dropdown menus.

Installation

Install the component via your command line.

Terminal window
npx expo install @rn-primitives/toolbar

Usage

import * as React from 'react';
import { Text, View } from 'react-native';
import * as ToolbarPrimitive from '@rn-primitives/toolbar';
function Example() {
const [singleValue, setSingleValue] = React.useState<string>();
const [multipleValue, setMultipleValue] = React.useState<string[]>([]);
return (
<ToolbarPrimitive.Root>
<ToolbarPrimitive.ToggleGroup type='multiple' value={multipleValue} onValueChange={setMultipleValue}>
<ToolbarPrimitive.ToggleItem value='bold'>
<Text>Bold</Text>
</ToolbarPrimitive.ToggleItem>
<ToolbarPrimitive.ToggleItem value='italic'>
<Text>Italic</Text>
</ToolbarPrimitive.ToggleItem>
</ToolbarPrimitive.ToggleGroup>
<ToolbarPrimitive.Separator />
<ToolbarPrimitive.ToggleGroup type='single' value={singleValue} onValueChange={setSingleValue}>
<ToolbarPrimitive.ToggleItem value='left'>
<Text>AlignLeft</Text>
</ToolbarPrimitive.ToggleItem>
<ToolbarPrimitive.ToggleItem value='center'>
<Text>AlignCenter</Text>
</ToolbarPrimitive.ToggleItem>
</ToolbarPrimitive.ToggleGroup>
<ToolbarPrimitive.Separator />
<View>
<ToolbarPrimitive.Button>
<Text>Button</Text>
</ToolbarPrimitive.Button>
</View>
</ToolbarPrimitive.Root>
);
}

Props

Root

Extends View props

PropTypeNote
asChildboolean(optional)
orientation’horizontal’ | ‘vertical’Web Only (optional)
dir(value: boolean) => voidWeb Only (optional)
loopbooleanWeb Only (optional)

ToggleGroup

Extends View props

PropTypeNote
type’single’ | ‘multiple’
valuestring | undefined | string[]
onValueChange(val: string | undefined | string[]) => void
asChildboolean(optional)
disabledboolean(optional)

ToggleItem

Extends Pressable props

PropTypeNote
asChildboolean(optional)
valuestring

Separator

Extends View props

PropTypeNote
asChildboolean(optional)

Extends Pressable props

PropTypeNote
asChildboolean(optional)