@themak/react-navigation

React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content. Such items include:

Currently only Home activity indicator on iOS is supported

The area not overlapped by such items is referred to as "safe area".

Bottom Navigation in new iPhones

Getting Started

Install

npm install @themak/react-navigation

Usage

import Navigation from '@themak/react-navigation'

;<Navigation variant="bottom" columns={2} breakPoint="lg">
  <div>Home</div>
  <div>About</div>
</Navigation>

Props

Name	Type	Default	Description
backgroundColor	`string`	`#ffffff`	The color of the component background can be customized by changing.
breakPoint	`false` `sm` `md` `lg`	`false`	Each breakpoint (a key) matches with a fixed screen width (a value): `sm`: 640px `md`: 768px `lg`: 978px
children	`node`	`-`	Contents to be displayed within root element.
className	`false` `string`	`false`	Apply classes to the Navigation component.
columns	`false` `number`	`false`	Set number of columns of grid.
safeAriaHeight	`string`	`84px`	The height of bottom navigation when is in safe area (for new iPhones)
height	`string`	`56px`	The height of navigation
shadow	`false` `string`	`0px 0px 6px 0px rgba(0,0,0,0.1)`	Set shadow for Navigation component
style	`object`	`{}`	Apply styles to the Navigation component.
variant	`top` `bottom`	`top`	Select position of Navigation component
zIndex	`false` `number`	`10`	Employing a z-index scale for Navigation component