4
Three-column layout with animation support for tablet displays
source link: https://reactnativeexample.com/three-column-layout-with-animation-support-for-tablet-displays/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Three-column layout with animation support for tablet displays
Nov 08, 2022
1 min read
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
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK