# react-native-columns

> User resizable columns for react native

Latest version **1.0.6** (published 2018-11-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-columns
pnpm add react-native-columns
yarn add react-native-columns
bun add react-native-columns
```

## 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.6 |
| Published | 2018-11-30 |
| First published | 2018-11-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 90.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Ken Kotch |
| Maintainers | kenkotch |
| Keywords | android, column, columns, ios, react-native, react-native-component, resize |

## Links

- npm: https://www.npmjs.com/package/react-native-columns
- Repository: https://github.com/kenkotch/react-native-columns
- Homepage: https://github.com/kenkotch/react-native-columns#readme
- Issues: https://github.com/kenkotch/react-native-columns/issues
- npm.io page: https://npm.io/package/react-native-columns

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2018-11-30
- 1.0.5 — 2018-11-27
- 1.0.4 — 2018-11-25
- 1.0.3 — 2018-11-25
- 1.0.2 — 2018-11-25

## README

![version](https://img.shields.io/badge/version-1.0.6-green.svg)
![license](https://img.shields.io/github/license/mashape/apistatus.svg)
![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)

# react-native-columns
User resizable columns component for react native

![](react-native-columns.gif)

## Installation
```
yarn add react-native-columns
```

OR (npm install does not work consistently)

```
npm i -S react-native-columns
```

## Example
```
import React from 'react'
import {
  Text,
  View
} from 'react-native'
import SomeComponent from './SomeComponent'
import Columns from 'react-native-columns'

export default class Main extends React.Component {
  leftCol = (
    <View>
      <Text>
        This is the left column
      </Text>
    </View>
  )

  render() {
    return (
      <Columns
        initialLeft={ 0.4 }
        max={ 85 }
        min={ 15 }
        leftCol={ this.leftCol }
        rightCol={ <SomeComponent /> }
      />
    )
  }
}
```

## Props
| property    | default                     | type                    | description                           |
| :---------: |:---------------------------:| :----------------------:| :------------------------------------ |
| min         |   20                        |            number x/100 | left column minimum % of screen width |
| max         |   75                        |            number x/100 | left column maximum % of screen width |
| initialLeft | 0.35                        | decimal between 0 and 1 | initial left col width x/1            |
| leftCol     | <Text>Left Column</Text>  |         react component | react component                       |
| rightCol    | <Text>Right Column</Text> |         react component | react component                       |


#### currently only supports full screen width. PR's welcome (to develop branch please)
#### supports iOS and Android

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