Separator

Create borders between components

Supports horizontal and vertical orientation.

Installation

Separator is already installed in @hanzo/gui, or you can install it independently:

npm install @hanzogui/separator

Usage

Separator uses the borderWidth and borderColor attribute for its style, so be sure to override those when extending it.

export default () => (
  <XStack alignItems="center">
    <Paragraph>Blog</Paragraph>
    <Separator alignSelf="stretch" vertical />
    <Paragraph>Docs</Paragraph>
    <Separator alignSelf="stretch" vertical />
    <Paragraph>Source</Paragraph>
  </XStack>
)

API Reference

Separator

Separator extends Stack views inheriting all the Gui standard props, plus:

Prop	Type	Default	Required
vertical	boolean	-	-

Last updated on

ScrollView

React Native ScrollView with Hanzo GUI props

Unspaced

Avoids spacing for children inside a spacing container

On this page