@bothrs/react-native-layout

Utility components for handling interface layouts in React Native.

Usage no npm install needed!

<script type="module">
  import bothrsReactNativeLayout from 'https://cdn.skypack.dev/@bothrs/react-native-layout';
</script>

README

@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

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

Contributing

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

License

MIT