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