React Native Mantine › Layout

Splitter

Resizable panes divided by draggable handles

Import: import { Splitter } from 'react-native-mantine';

Usage

import { Splitter } from 'react-native-mantine';

// Drag the handle between panes to resize
<Splitter onSizeChange={(sizes) => console.log(sizes)}>
  <Splitter.Pane defaultSize={60} min={20} max={80}>
    <FirstPane />
  </Splitter.Pane>
  <Splitter.Pane defaultSize={40} min={20}>
    <SecondPane />
  </Splitter.Pane>
</Splitter>

// Vertical layout with three panes
<Splitter orientation="vertical">
  <Splitter.Pane defaultSize={40}>{/* ... */}</Splitter.Pane>
  <Splitter.Pane defaultSize={35}>{/* ... */}</Splitter.Pane>
  <Splitter.Pane defaultSize={25}>{/* ... */}</Splitter.Pane>
</Splitter>

Props

Source on GitHub · npm