react-native-layout-components

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'))