# react-native-split-pane-view

> Split pane component for two window in React Native

Latest version **1.0.3** (published 2021-11-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-split-pane-view
pnpm add react-native-split-pane-view
yarn add react-native-split-pane-view
bun add react-native-split-pane-view
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2021-11-22 |
| First published | 2021-11-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 494.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | ombodgan |
| Maintainers | ombogdan |
| Keywords | react-native, split, pane, view |

## Links

- npm: https://www.npmjs.com/package/react-native-split-pane-view
- Repository: https://github.com/ombogdan/react-native-split-pane-view
- Homepage: https://github.com/ombogdan/react-native-split-pane-view#readme
- Issues: https://github.com/ombogdan/react-native-split-pane-view/issues
- npm.io page: https://npm.io/package/react-native-split-pane-view

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-native](https://npm.io/package/react-native.md) ^0.63.1

## Recent versions

- 1.0.3 (latest) — 2021-11-22
- 1.0.2 — 2021-11-06
- 1.0.1 — 2021-11-06
- 1.0.0 — 2021-11-06

## README

# react-native-split-pane-view

Split pane component for two window in React Native

# Install

`npm i react-native-split-pane-view`
or
`yarn add react-native-split-pane-view`

It depends on `react-native-app-interface`, so should execute `pod install` after install script

# Shortcuts

![open](https://raw.githubusercontent.com/ombogdan/react-native-split-pane-view/master/assets/example.gif)

# Usage

```jsx harmony
import React, {useState} from "react";
import {Dimensions, View, Text} from "react-native";
import SplitPane from 'react-native-split-pane-view';

export default () => {
    const [sliderValue, setSliderValue] = useState(Dimensions.get('window').height * 0.4);
    const [orientation, setOrientation] = useState("PORTRAIT");

    onChangeSliderValue = (value, finish) => {
        try {
            if (finish === true) {
                setSliderValue(value)
            }
        } catch (e) {
            console.log(e);
        }
    }

    return (
        <SplitPane
            splitSource={require('./assets/horizontal-split.png')}
            splitContainerStyle={{width: '100%', alignItems: "center", bottom: 5, zIndex: 2000}}
            split="v"
            primary='first'
            defaultValue={Dimensions.get('window').height * 0.6}
            min={Dimensions.get('window').height * 0.05}
            max={Dimensions.get('window').height * 0.8}
            onChange={this.onChangeSliderValue.bind(this)}
            onFinish={this.onChangeSliderValue.bind(this)}
            orientation={orientation}
        >
            <View style={{height: sliderValue}}><Text>A</Text></View>
            <View style={{height: Dimensions.get('window').height - sliderValue}}><Text>B</Text></View>
        </SplitPane>
    );
}
```

# Props

| prop | type | required | default |
| ---- | ---- | ----     | ----    |
|splitSource | string | false | './assets/horizontal-split.png'|
|splitContainerStyle | object | false | {width: '100%', alignItems: "center", bottom: 5, zIndex: 2000} |
|split  | 'h' or 'v' | false | 'h' |
|primary  | 'first' or 'second' | false | 'first' |
|defaultValue | number | true | |
|min  | number | false | 0 |
|max | number | false | 0|
|onChange | (value)=>void | true | |
|onFinish | (value)=>void | false | |
|orientation | string | false | |

---
_Source: https://npm.io/package/react-native-split-pane-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._