@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

Flex

A component that helps with aligning a Flex container.

Props

• All style properties that are specific to Flex;
• • 'alignContent'
• • 'alignItems'
• • 'alignSelf'
• • 'flex'
• • 'flexBasis'
• • 'flexDirection'
• • 'flexGrow'
• • 'flexShrink'
• • 'flexWrap'
• • 'justifyContent'

FlexColumn

A component that helps with aligning a Flex container.

• Sets flexDirection: 'column' as default.

FlexRow

A component that helps with aligning a Flex Row container.

• Sets flexDirection: 'row' as default.

Contributing

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

License

MIT