Divider | NativeBase | Universal Components for React and React Native
IMPORTANT MESSAGE
Upgrade to gluestack-ui
If you are starting a new project with NativeBase, we recommend using gluestack-ui
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase.
Migrate to gluestack-ui
If you are working on a project with NativeBase, we recommend using @gluestack-ui/themed
NativeBase
3.4.x
Light mode active 🚨
Do you really want to stay here? Really? Really? Pakka? Sure? Are you a true developer?
No
Back to DarkMode
Disclosure
If you are starting a new project, please try gluestack-ui for better performance and new design.
Divider
Divider can visually separate content in a given list or group.
Show Codeconst Example = () => {return <Box alignItems="center"><Flex direction="row" h="58" p="4"><Text>Simple</Text><Divider bg="emerald.500" thickness="2" mx="2" orientation="vertical" /><Text>Easy</Text><Divider bg="amber.500" thickness="2" mx="2" orientation="vertical" /><Text>Beautiful</Text></Flex></Box>;};
Import
Copyimport { Divider } from 'native-base';
Examples
Basic
The Divider displays a thin horizontal or vertical line.
Playgroundconst Example = () => {return <Box alignItems="center"><Box w="140"><Heading mx="3" alignItems="center" flexDirection="row">Chrome</Heading><Divider my="2" _light={{bg: "muted.800"}} _dark={{bg: "muted.50"}} /><Heading mx="3" alignItems="center" flexDirection="row">Firefox</Heading></Box></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.
Playgroundconst Example = () => {return <Box alignItems="center"><Box w="160"><Heading mx="auto">Shoes</Heading><Divider my="2" _light={{bg: "muted.800"}} _dark={{bg: "muted.50"}} /><Flex mx="3" direction="row" justify="space-evenly" h="60"><Heading py="2">Girls</Heading><Divider orientation="vertical" mx="3" _light={{bg: "muted.800"}} _dark={{bg: "muted.50"}} /><Heading py="2">Boys</Heading></Flex></Box></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.
Playgroundconst Example = () => {return <Box alignItems="center"><Flex direction="row" h="58" p="4"><Text>Simple</Text><Divider bg="emerald.500" thickness="2" mx="2" orientation="vertical" /><Text>Easy</Text><Divider bg="indigo.500" thickness="2" mx="2" orientation="vertical" /><Text>Beautiful</Text></Flex></Box>;};
Props
Divider implements , , , , , , , , ,
orientation
The orientation of the divider.
Type: "horizontal" | "vertical"
thickness
The thickness of the divider.
Type: SpaceType
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the divider.
Info: We can easily extend the divider component theme using extendTheme function as described in the documentation .
Accessibility
Divider has role set to separator and aria-orientation to either horizontal or vertical.
MadeWithNativeBase
gluestack-ui