Three Column Layout For React Native

An animated tree-column layout component designed for tablets.

How to use it:

1. Install and import the layout component.

# Yarn
$ yarn add react-native-three-column-layout

$ npm i react-native-three-column-layout
import ThreeColumnLayout from 'react-native-three-column-layout'

2. Add the tree-column layout component to the app.

  renderLeftView={() => <View style={[, styles.leftColumn]} />}
  renderMiddleView={() => <View style={[, styles.middleColumn]} />}
  renderRightView={() => <View style={[, styles.rightColumn]} />}

3. Default component props.

type Props = {
  renderLeftView: RenderView
  renderMiddleView: RenderView
  renderRightView: RenderView
  leftViewVisible?: boolean
  middleViewVisible?: boolean
  leftViewWidth?: number
  middleViewWidth?: number


Three Column Layout For React Native

Download Details:

Author: craftzdog

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

Add Comment