wwwwwwwwwwwwwwwwwww

Separator

Create borders between components

 
import React from 'react'

import { Paragraph, Separator, XStack, YStack } from 'tamagui'



export function SeparatorDemo() {

  return (

    <YStack width="100%" maxWidth={300} marginHorizontal={15}>

      <Paragraph fontWeight="800">Tamagui</Paragraph>

      <Paragraph>A cross-platform component library.</Paragraph>

      <Separator marginVertical={15} />

      <XStack height={20} alignItems="center">

        <Paragraph>Blog</Paragraph>

        <Separator alignSelf="stretch" vertical marginHorizontal={15} />

        <Paragraph>Docs</Paragraph>

        <Separator alignSelf="stretch" vertical marginHorizontal={15} />

        <Paragraph>Source</Paragraph>

      </XStack>

    </YStack>

  )

}

Features

  • Supports horizontal and vertical orientation.

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 props

Separators extend Stack views inheriting all the Tamagui standard props, plus:

Props

  • vertical

    boolean

    Show vertical separator.

    • Previous

    LinearGradient

    Next

    Square & Circle

    Edit this page on GitHub.