react-native-columns

User resizable columns component for react native

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 | Left Column | react component | react component | | rightCol | Right Column | react component | react component |

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

supports iOS and Android