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
60 Oct 9, 2022
47 Sep 5, 2022
11 Dec 28, 2020
179 Dec 7, 2022
45 Dec 18, 2022
24 Oct 30, 2022
2 Nov 19, 2021
3.1k Jan 5, 2023
1 Apr 18, 2022
2.1k Dec 25, 2022
1.3k Jan 6, 2023
2.1k Dec 24, 2022
260 Jul 29, 2022
56 Oct 20, 2021
97 Dec 21, 2022
6 Nov 15, 2021
462 Oct 9, 2022
185 Oct 9, 2022
121 Oct 9, 2022