react-native-resizable-panels

React Native components for resizable panel groups/layouts, using react-native-reanimated and react-native-gesture-handler.

This library is a port of the popular react-resizable-panels for web, and aims to provide the same powerful and flexible API for native applications.

Supported input methods include touch gestures.

This project is a direct translation of the great react-resizable-panels library by Brian Vaughn. All credit for the API design and implementation goes to him. If you find this library useful, please consider supporting the original project.

Installation

# yarn
yarn add react-native-resizable-panels react-native-reanimated react-native-gesture-handler

# npm
npm install react-native-resizable-panels react-native-reanimated react-native-gesture-handler

You also need to ensure react-native-reanimated and react-native-gesture-handler are set up correctly. Please follow their respective installation instructions.

Example App

You can find a comprehensive example app in the apps/example directory of this repository.

Live Examples

• Web apр: View the example application running in your browser.
• Expo Go: Open the example app on your device using the Expo Go app by scanning the QR code below.

API

PanelGroup

| prop | type | description | | ---------- | -------------------------- | ---------------------------------------------------------------- | | autoSaveId | ?string | Unique id used to auto-save group arrangement via AsyncStorage | | children | ReactNode | Arbitrary React element(s) | | direction | "horizontal" | "vertical" | Group orientation | | id | ?string | Group id; falls back to useId when not provided | | onLayout | ?(sizes: number[]) => void | Called when group layout changes | | style | ?ViewStyle | Style to attach to root element |

PanelGroup components also expose an imperative API for manual resizing:

| method | description | | ----------------------- | ---------------------------------------------------------------- | | getId(): string | Gets the panel group's ID. | | getLayout(): number[] | Gets the panel group's current layout ([0 - 100, ...]). | | setLayout(number[]) | Resize panel group to the specified layout ([0 - 100, ...]). |

Panel

| prop | type | description | | ------------- | ----------------------- | ----------------------------------------------------------------------------------- | | children | ReactNode | Arbitrary React element(s) | | collapsedSize | ?number=0 | Panel should collapse to this size | | collapsible | ?boolean=false | Panel should collapse when resized beyond its minSize | | defaultSize | ?number | Initial size of panel (numeric value between 0-100) | | id | ?string | Panel id (unique within group); falls back to useId when not provided | | maxSize | ?number = 100 | Maximum allowable size of panel (numeric value between 0-100) | | minSize | ?number = 10 | Minimum allowable size of panel (numeric value between 0-100) | | onCollapse | ?() => void | Called when panel is collapsed | | onExpand | ?() => void | Called when panel is expanded | | onResize | ?(size: number) => void | Called when panel is resized; size parameter is a numeric value between 0-100. | | order | ?number | Order of panel within group; required for groups with conditionally rendered panels | | style | ?ViewStyle | Style to attach to root element |

Panel components also expose an imperative API for manual resizing:

| method | description | | ------------------------ | ------------------------------------------------------------------------------ | | collapse() | If panel is collapsible, collapse it fully. | | expand() | If panel is currently collapsed, expand it to its most recent size. | | getId(): string | Gets the ID of the panel. | | getSize(): number | Gets the current size of the panel as a percentage (0 - 100). | | isCollapsed(): boolean | Returns true if the panel is currently collapsed (size === collapsedSize). | | isExpanded(): boolean | Returns true if the panel is currently not collapsed (!isCollapsed()). | | resize(size: number) | Resize panel to the specified percentage (0 - 100). |

PanelResizeHandle

| prop | type | description | | ---------- | ------------------------------ | ----------------------------------------------------- | | children | ?ReactNode | Custom drag UI; can be any arbitrary React element(s) | | disabled | ?boolean | Disable drag handle | | id | ?string | Resize handle id (unique within group) | | onDragging | ?(isDragging: boolean) => void | Called when group layout changes | | style | ?ViewStyle | Style to attach to root element |

FAQ

Can panel sizes be specified in pixels?

No. Pixel-based constraints added significant complexity to the initialization and validation logic and so they are not supported.

How can I fix layout/sizing problems with conditionally rendered panels?

The Panel API doesn't require id and order props because they aren't necessary for static layouts. When panels are conditionally rendered though, it's best to supply these values.

import { Panel, PanelGroup, PanelResizeHandle } from 'react-native-resizable-panels';

<PanelGroup direction="horizontal">
  {renderSideBar && (
    <>
      <Panel id="sidebar" minSize={25} order={1}>
        <Sidebar />
      </Panel>
      <PanelResizeHandle />
    </>
  )}
  <Panel minSize={25} order={2}>
    <Main />
  </Panel>
</PanelGroup>;

Why don't I see any resize UI?

This likely means that you haven't applied any styling to the resize handles. By default, a resize handle is just an empty View. To add styling, use the style prop:

import { PanelResizeHandle } from 'react-native-resizable-panels';
import { StyleSheet } from 'react-native';

<PanelResizeHandle style={styles.resizeHandle} />;

const styles = StyleSheet.create({
  resizeHandle: {
    width: 4,
    backgroundColor: '#888888',
  },
});

Can panel sizes be persistent?

Yes. Panel groups with an autoSaveId prop will automatically save and restore their layouts on mount using AsyncStorage.