Skip to main content

Divider

Surfaces & Layout

Divider

Thin separator for lists, toolbars, and stacked layouts.

Usage

Use `mode` to switch between horizontal rules and vertical rules.

Highlights

  • Horizontal by default
  • Shared tokens for both orientations

When to use it

  • Separate list rows or settings sections.
  • Split inline actions in an Appbar or toolbar.

Related components

SurfaceListAppbar

Examples​

Horizontal (default)​

Preview (Web)
import { View } from 'react-native';
import { Divider } from 'react-native-molecules/components/Divider';
import { Text } from 'react-native-molecules/components/Text';

export default function Example() {
  return (
      <View>
          <Text>Above</Text>
          <Divider spacing={10} />
          <Text>Below</Text>
      </View>
  );
}

Vertical​

Preview (Web)
import { StyleSheet, View } from 'react-native';
import { Divider } from 'react-native-molecules/components/Divider';
import { Text } from 'react-native-molecules/components/Text';

const styles = StyleSheet.create({
  container: {
      flexDirection: 'row',
      gap: 12,
  },
});

export default function Example() {
  return (
      <View style={styles.container}>
          <Text>Left</Text>
          <Divider mode="vertical" bold spacing={10} />
          <Text>Right</Text>
      </View>
  );
}
PropTypeDefaultDescription
hitSlopnumber | Insets | null | undefined——
idstring | undefined——
needsOffscreenAlphaCompositingboolean | undefined——
onLayout((event: LayoutChangeEvent) => void) | undefined——
pointerEvents"box-none" | "none" | "box-only" | "auto" | undefined——
removeClippedSubviewsboolean | undefined——
styleRequiredStyleProp<ViewStyle>——
testIDstring | undefined——
nativeIDstring | undefined——
collapsableboolean | undefined——
collapsableChildrenboolean | undefined——
onBlur((e: BlurEvent) => void) | null | undefined——
onFocus((e: FocusEvent) => void) | null | undefined——
renderToHardwareTextureAndroidboolean | undefined——
focusableboolean | undefined——
tabIndex0 | -1 | undefined——
shouldRasterizeIOSboolean | undefined——
isTVSelectableboolean | undefined——
hasTVPreferredFocusboolean | undefined——
tvParallaxShiftDistanceXnumber | undefined——
tvParallaxShiftDistanceYnumber | undefined——
tvParallaxTiltAnglenumber | undefined——
tvParallaxMagnificationnumber | undefined——
onStartShouldSetResponder((event: GestureResponderEvent) => boolean) | undefined——
onMoveShouldSetResponder((event: GestureResponderEvent) => boolean) | undefined——
onResponderEnd((event: GestureResponderEvent) => void) | undefined——
onResponderGrant((event: GestureResponderEvent) => void) | undefined——
onResponderReject((event: GestureResponderEvent) => void) | undefined——
onResponderMove((event: GestureResponderEvent) => void) | undefined——
onResponderRelease((event: GestureResponderEvent) => void) | undefined——
onResponderStart((event: GestureResponderEvent) => void) | undefined——
onResponderTerminationRequest((event: GestureResponderEvent) => boolean) | undefined——
onResponderTerminate((event: GestureResponderEvent) => void) | undefined——
onStartShouldSetResponderCapture((event: GestureResponderEvent) => boolean) | undefined——
onMoveShouldSetResponderCapture((event: GestureResponderEvent) => boolean) | undefined——
onTouchStart((event: GestureResponderEvent) => void) | undefined——
onTouchMove((event: GestureResponderEvent) => void) | undefined——
onTouchEnd((event: GestureResponderEvent) => void) | undefined——
onTouchCancel((event: GestureResponderEvent) => void) | undefined——
onTouchEndCapture((event: GestureResponderEvent) => void) | undefined——
onPointerEnter((event: PointerEvent) => void) | undefined——
onPointerEnterCapture((event: PointerEvent) => void) | undefined——
onPointerLeave((event: PointerEvent) => void) | undefined——
onPointerLeaveCapture((event: PointerEvent) => void) | undefined——
onPointerMove((event: PointerEvent) => void) | undefined——
onPointerMoveCapture((event: PointerEvent) => void) | undefined——
onPointerCancel((event: PointerEvent) => void) | undefined——
onPointerCancelCapture((event: PointerEvent) => void) | undefined——
onPointerDown((event: PointerEvent) => void) | undefined——
onPointerDownCapture((event: PointerEvent) => void) | undefined——
onPointerUp((event: PointerEvent) => void) | undefined——
onPointerUpCapture((event: PointerEvent) => void) | undefined——
accessibleboolean | undefined——
accessibilityActionsreadonly Readonly<{ name: AccessibilityActionName | string; label?: string | undefined; }>[] | undefined——
accessibilityLabelstring | undefined——
aria-labelstring | undefined——
accessibilityRoleAccessibilityRole | undefined——
accessibilityStateAccessibilityState | undefined——
aria-busyboolean | undefined——
aria-checkedboolean | "mixed" | undefined——
aria-disabledboolean | undefined——
aria-expandedboolean | undefined——
aria-selectedboolean | undefined——
accessibilityHintstring | undefined——
accessibilityValueAccessibilityValue | undefined——
aria-valuemaxnumber | undefined——
aria-valueminnumber | undefined——
aria-valuenownumber | undefined——
aria-valuetextstring | undefined——
onAccessibilityAction((event: AccessibilityActionEvent) => void) | undefined——
importantForAccessibility"auto" | "yes" | "no" | "no-hide-descendants" | undefined——
aria-hiddenboolean | undefined——
aria-modalboolean | undefined——
roleRole | undefined——
accessibilityLabelledBystring | string[] | undefined——
aria-labelledbystring | undefined——
accessibilityLiveRegion"none" | "polite" | "assertive" | undefined——
aria-live"polite" | "assertive" | "off" | undefined——
screenReaderFocusableboolean | undefined——
accessibilityElementsHiddenboolean | undefined——
accessibilityViewIsModalboolean | undefined——
onAccessibilityEscape(() => void) | undefined——
onAccessibilityTap(() => void) | undefined——
onMagicTap(() => void) | undefined——
accessibilityIgnoresInvertColorsboolean | undefined——
accessibilityLanguagestring | undefined——
accessibilityShowsLargeContentViewerboolean | undefined——
accessibilityLargeContentTitlestring | undefined——
accessibilityRespondsToUserInteractionboolean | undefined——
mode"horizontal" | "vertical" | undefined——
leftInsetnumber | undefined——
rightInsetnumber | undefined——
topInsetnumber | undefined——
bottomInsetnumber | undefined——
boldboolean | undefined——
spacingnumber | undefined——
Defined in react-native-molecules/components/Divider