@bothrs/react-native-layout

@bothrs/react-native-layout

Utility components for handling interface layouts in React Native.

Installation

yarn add @bothrs/react-native-layout

Usage

import { Padding, Margin, Spacing, Line } from "@bothrs/react-native-layout";

// ...

API

Padding | Margin

A container component that applies the margin or padding around its children.

Props

• amount
  • top?: number | string
  • right?: number | string
  • bottom?: number | string
  • left?: number | string
  • horizontal?: number | string
  • vertical?: number | string
• backgroundColor?: string
• onLayout?: (e: LayoutChangeEvent) => void

Spacing

A component that renders with the given width or height.

Props

• width?: number | string
• height?: number | string
• flex?: boolean

Line

A component that renders a line with a given color and thickness.

Props

• color: string
• direction?: 'horizontal' | 'vertical'
• thickness?: number

FlexRow | FlexColumn

A component that helps with aligning a Flex container.

FlexRowAlign | FlexColumnAlign

A component that helps with aligning a Flex container.

Props

• alignItems: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'

FlexRowAlignJustify | FlexColumnAlignJustify

A component that helps with aligning a Flex container.

Props

• alignItems: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
• justifyContent: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT