React Native Layout Components

React Native Layout Components (RNLC) is a simple component library to help with responsive user interfaces. This component library contains several hooks aswell.

This library is greatly inspired by Material-UI.

API

• Breakpoints
• Breakpoint Ranges
• Components
  • Absolute
  • Center
  • Column
  • Container
  • Expander
  • Hidden
  • Row
• Hooks
  • useBreakpoints

Breakpoints

Breakpoints are predetermined widths within the window to describe the size of the window. Using breakpoints can make it easier to create a more responsive ui.

| Size | String | Pixel Size | Typical Device | | ----------- | ------ | ------------- | ----------------------- | | Extra Small | 'xs' | 0-599 px | Small Handset | | Small | 'sm' | 600-959 px | Tablets in portrait | | Medium | 'md' | 960-1279 px | Tablets in Landscape | | Large | 'lg' | 1280-1919 px | Laptops | | Extra Large | 'xl' | 1920+ px | Large screen monitors |

For more information about breakpoints specifications visit Material.io

Breakpoint Ranges

A Breakpoint Range establishes if a range of breakpoints are being used within a specific direction (up or down). The breakpoint is determined by a starting size and then all sizes either larger than that size (up) or smaller (down).

Examples of Breakpoint Range • 'mdDown' would be true if the size of the window's width is ('md') 1279 px or ('sm', 'xs') less. Sizes ('lg', 'xl') 1280px + would be false • 'smUp' would be true if the size of the window's width is ('sm') 600 px or ('md', 'lg', 'xl') more. The size ('xs') 599px - would be false.

Components

Absolute

An Absolute component is a that's position is set to 'absolute'.

| Prop | Default | Type | Description | | ---------------- | --------- | ------ | --------------------------------------------------------------------------------------------------------- | | bottom | | Number | The value of pixels from the bottom of the absolute component to the bottom of the parent component. | | children | | node | | | left | | Number | The value of pixels from the left of the absolute component to the left of the parent component. | | right | | Number | The value of pixels from the right of the absolute component to the right of the parent component. | | top | | Number | The value of pixels from the top of the absolute component to the top of the parent component. |

Center

A Center component will stretch itself from one end of the parent component to the other end, and will place the children within the center of itself.

| Prop | Default | Type | Description | | ---------------- | --------- | ------ | --------------------------------------------------------------------------------------------------------- | | children | | node | |

Column

Column component will place the children in a vertical relative position. From top to bottom.

| Prop | Default | Type | Description | | ---------------- | --------- | ------ | --------------------------------------------------------------------------------------------------------- | | align | 'flex-start' | 'flex-start', 'center', 'flex-end', 'stretch' | alignItems | | children | | node | | | justify | 'flex-start' | 'flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around' | justifyContent |

Container

Container adjusts to match the size of the parent component. When the container is set to fixed it will match up to the largest possible breakpoint that will fit within the parent component. It's suggested not to place scrollviews or lists within a container, but to place the container within scrollviews.

| Prop | Default | Type | Description | | ---------------- | --------- | ------ | --------------------------------------------------------------------------------------------------------- | | children | | node | | | fixed | false | bool | | | maxWidth | 'lg' | 'xs', 'sm', 'md', 'lg', 'xl' | The max width of the container to match the breakpoint |

Expander

The Expander expands from the row/column to force the next component to trail to the end.

| Prop | Default | Type | Description | | ---------------- | --------- | ------ | --------------------------------------------------------------------------------------------------------- | | children | | node | |

Hidden

The Hidden component will hide based on the size of the app's window width.

| Prop | Default | Type | Description | | ----------------- | --------- | --------- | --------------------------------------------------------------------------------------------------------- | | children | | node | | | xsDown | false | bool | Hides on window sizes 599 px and less. | | xsUp | false | bool | Hides on window sizes 0 px and more. | | smDown | false | bool | Hides on window sizes 959 px and less. | | smUp | false | bool | Hides on window sizes 600 px and more. | | mdDown | false | bool | Hides on window sizes 1279 px and less. | | mdUp | false | bool | Hides on window sizes 960 px and more. | | lgDown | false | bool | Hides on window sizes 1919 px and less. | | lgUp | false | bool | Hides on window sizes 1280 px and more. | | xlDown | false | bool | Hides on window sizes xl and less. | | xlUp | false | bool | Hides on window sizes 1920 and more. |

<Hidden smDown>
    <Text>I am Hidden if the window size is sm or less</Text>
</Hidden>

<Hidden mdUp>
    <Text>I am Hidden if the window size is md or more</Text>
</Hidden>

Row

A Row component will place the children in a horizontal relative position. From left to right.

| Prop | Default | Type | Description | | ---------------- | --------- | ------ | --------------------------------------------------------------------------------------------------------- | | align | 'center' | 'flex-start', 'center', 'flex-end', 'stretch' | alignItems | | children | | node | | | justify | 'flex-start' | 'flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around' | justifyContent |

Hooks

| Name | Arguments | Returns | | ---- | --------- | ------- | | useBreakpoints | | xs: bool, sm: bool, md: bool, lg: bool, xl: bool, xsDown: bool, xsUp: bool, smDown: bool, smUp: bool, mdDown: bool, mdUp: bool, lgDown: bool, lgUp: bool, xlDown: bool, xlUp: bool, isHidden(breakpointRange: Breakpoint Range): bool |

useBreakpoints

import { useBreakpoints } from 'react-native-layout-components'

const breakpoints = useBreakpoints()

console.log('is window small: ' + breakpoints.sm )
console.log('isHidden: ' + breakpoints.isHidden('smDown'))