Three-column layout with animation support for tablet displays
react-native-three-column-layout
This is a component that provides three-column layout with animation support for tablet displays.
Example
Check out an example project here
Installation
npm install react-native-three-column-layout
Usage
import ThreeColumnLayout from 'react-native-three-column-layout'
return (
<ThreeColumnLayout
renderLeftView={() => <View style={[styles.box, styles.leftColumn]} />}
renderMiddleView={() => <View style={[styles.box, styles.middleColumn]} />}
renderRightView={() => <View style={[styles.box, styles.rightColumn]} />}
/>
)
const styles = StyleSheet.create({
box: {
flex: 1,
},
leftColumn: { backgroundColor: 'red' },
middleColumn: { backgroundColor: 'yellow' },
rightColumn: { backgroundColor: 'blue' },
})
Props
type RenderView = (callbacks: ThreeColumnLayoutProps) => React.ReactNode
type Props = {
renderLeftView: RenderView
renderMiddleView: RenderView
renderRightView: RenderView
leftViewVisible?: boolean
middleViewVisible?: boolean
leftViewWidth?: number
middleViewWidth?: number
}
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT