@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 |

License

MIT Licensed. © Copyright MohammadAli Karimi