expo-split-pane

Split pane for Expo, movable divider.

Install

npm i expo-split-pane or yarn add expo-split-pane

Demo

Usage

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <SplitPane
        style={{ flex: 0.3 }}
        orientation="vertical"
        pane1={
          <View
            style={{ flex: 1, flexGrow: 1, backgroundColor: "deepskyblue" }}
          >
            <Text>top1</Text>
          </View>
        }
        pane2={
          <View style={{ flex: 1, flexGrow: 1, backgroundColor: "dodgerblue" }}>
            <Text>top2</Text>
          </View>
        }
      />
      <SplitPane
        style={{ flex: 1 }}
        orientation="horizontal"
        pane1={
          <View
            style={{ flex: 1, flexGrow: 1, backgroundColor: "lightyellow" }}
          >
            <Text>center1</Text>
          </View>
        }
        pane2={
          <View style={{ flex: 1, flexGrow: 1, backgroundColor: "khaki" }}>
            <Text>center2</Text>
          </View>
        }
      />
      <SplitPane
        style={{ flex: 0.3 }}
        orientation="vertical"
        pane1={
          <View style={{ flex: 1, flexGrow: 1, backgroundColor: "lightgreen" }}>
            <Text>bottom1</Text>
          </View>
        }
        pane2={
          <View style={{ flex: 1, flexGrow: 1, backgroundColor: "limegreen" }}>
            <Text>bottom2</Text>
          </View>
        }
      />
    </SafeAreaView>
  );
}

Props

| prop | type | required | note | | ---------------- | -------------------------- | -------- | --------------------------- | | orientation | 'horizontal' or 'virtical' | false | default is 'horizontal' | | style | ViewStyle | false | container style | | dividerStyle | ViewStyle | false | divider style | | pane1 | JSX.Element | true | first element | | pane2 | JSX.Element | true | second element | | pane1InitialSize | JSX.Element | true | first element initial size | | pane2InitialSize | JSX.Element | true | second element initial size | | min | number | false | min size, default is 30 | | flipped | boolean | false | flip pane1 and pane2 | | onChange | (state) => void | false | callback of divider changed |