https://github.com/craftzdog/react-native-three-column-layout

Three-column layout with animation support for tablet displays
https://github.com/craftzdog/react-native-three-column-layout

react-native

Last synced: 19 days ago
JSON representation

Three-column layout with animation support for tablet displays

• Host: GitHub
• URL: https://github.com/craftzdog/react-native-three-column-layout
• Owner: craftzdog
• License: mit
• Created: 2022-11-04T02:03:23.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-05T00:14:40.000Z (about 2 years ago)
• Last Synced: 2024-10-12T22:16:49.207Z (about 1 month ago)
• Topics: react-native
• Language: TypeScript
• Homepage: https://github.com/craftzdog/inkdrop-ui-mockup-react-native
• Size: 286 KB
• Stars: 48
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# react-native-three-column-layout

![thumb](./thumb.svg)

This is a component that provides three-column layout with animation support for tablet displays.

## Example

Check out [an example project here](https://github.com/craftzdog/inkdrop-ui-mockup-react-native)

## Installation

```sh

npm install react-native-three-column-layout

```

## Usage

```jsx

import ThreeColumnLayout from 'react-native-three-column-layout'

return (

   }

    renderMiddleView={() => }

    renderRightView={() => }

  />

)

const styles = StyleSheet.create({

  box: {

    flex: 1,

  },

  leftColumn: { backgroundColor: 'red' },

  middleColumn: { backgroundColor: 'yellow' },

  rightColumn: { backgroundColor: 'blue' },

})

```

## Props

```ts

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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT