Divider | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Typography

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Community Integration

React Hook Forms

Formik

Recipes

Designs

Forms

Layout

Migration

Components Migration

If you are starting a new project, please try gluestack-ui for better performance and new design.

Divider

Divider is used to visually separate content in a list or group.

Import

Copy
import { Divider } from 'native-base';

Examples

Basic

The Divider displays a thin horizontal or vertical line.


Playground
const Example = () => {
  return <Box w={190}>
      <Heading mx={3} d="flex" alignItems="center" flexDirection="row">
        Chrome <Icon ml="auto" as={<AntDesign name="chrome" />} />
      </Heading>
      <Divider my={2} />
      <Heading mx={3} d="flex" alignItems="center" flexDirection="row">
        Firefox {"  "}
        <Icon ml="auto" as={<FontAwesome name="firefox" />} />
      </Heading>
    </Box>;
};const Example = () => {
  return <Box w={190}>
      <Heading mx={3} d="flex" alignItems="center" flexDirection="row">
        Chrome <Icon ml="auto" as={<AntDesign name="chrome" />} />
      </Heading>
      <Divider my={2} />
      <Heading mx={3} d="flex" alignItems="center" flexDirection="row">
        Firefox {"  "}
        <Icon ml="auto" as={<FontAwesome name="firefox" />} />
      </Heading>
    </Box>;
};

Divider Orientation

Pass the orientation prop and set it to either horizontal or vertical.

Note: If the horizontal orientation is used, make sure that the parent element is assigned a width. If the vertical orientation is used, make sure that the parent element is assigned a height.


Playground
const Example = () => {
  return <Box w={160}>
      <Heading mx="auto">Browser</Heading>
      <Divider my={2} />
      <Flex mx={3} direction="row" justify="space-evenly">
        <Icon as={<AntDesign name="chrome" />} />
        <Divider orientation="vertical" />
        <Icon as={<FontAwesome name="firefox" />} />
      </Flex>
    </Box>;
};const Example = () => {
  return <Box w={160}>
      <Heading mx="auto">Browser</Heading>
      <Divider my={2} />
      <Flex mx={3} direction="row" justify="space-evenly">
        <Icon as={<AntDesign name="chrome" />} />
        <Divider orientation="vertical" />
        <Icon as={<FontAwesome name="firefox" />} />
      </Flex>
    </Box>;
};

Composition

You can use bg or backgroundColor to change the divider's color and width and height to change its width and height respectively.


Playground
const Example = () => {
  return <Flex direction="row" p={4}>
      <Text>Simple</Text>
      <Divider bg="red.500" size={3} mx={4} orientation="vertical" />
      <Text>Easy</Text>
      <Divider bg="blue.500" size={3} mx={4} orientation="vertical" />
      <Text>Beautiful</Text>
    </Flex>;
};const Example = () => {
  return <Flex direction="row" p={4}>
      <Text>Simple</Text>
      <Divider bg="red.500" size={3} mx={4} orientation="vertical" />
      <Text>Easy</Text>
      <Divider bg="blue.500" size={3} mx={4} orientation="vertical" />
      <Text>Beautiful</Text>
    </Flex>;
};