React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.

Last update: Dec 7, 2021

@themak/react-navigation

NPM

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

drawing drawing

Getting Started

Install

npm install @themak/react-navigation

Usage

Home
About
">
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

GitHub

https://github.com/makarimi76/react-navigation
You might also like...

Insomnia-react-app - A react app that will help you relax and sleep better

Insomnia-react-app - A react app that will help you relax and sleep better

insomnia - a sleep inducer app An app that will help you relax and sleep better.

May 30, 2022

Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates cool dashboards

Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates cool dashboards

Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates cool dashboards

Jul 20, 2022

Solana-base-app - Solana-base-app is for Solana beginners to get them up and running fast

Solana-base-app - Solana-base-app is for Solana beginners to get them up and running fast

solana-base-app solana-base-app is for Solana beginners to get them up and runni

Jun 29, 2022

React-Login-app - Create a Login and Registration Page with React Router

React-Login-app - Create a Login and Registration Page with React Router

About In this repo I was given a Task to create a Login and Registration page wh

Dec 31, 2021

This is a react app that I created for an intern test, involves using a search and price filter features

This is a react app that I created for an intern test, involves using a search and price filter features

FRONTEND ENGINEERING INTERN APPLICATION This is an application i created for an intern application test. VIEW APP Available Scripts In the project dir

Nov 4, 2021

A reference project to build a React Redux app in TypeScript, and deploy to GCP Cloud Run

A reference project to build a React Redux app in TypeScript, and deploy to GCP Cloud Run

Nov 27, 2021

Simple react native app to fetch and list contacts from an API

Contact list Simple react native app to fetch and list contacts from an API, and show each contact detail in a modal Can't wait to test, don't worry c

Jul 11, 2022

React-NFT-App - NFT-Web-Application built using Third web , ReactJs and use Crypto Punks with API

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Apr 25, 2022

This portfolio was built with React.JS and next. Many styled-components was created to be used everywhere on the app

This portfolio was built with React.JS and next. Many styled-components was created to be used everywhere on the app

Jun 9, 2022
Renders static content efficiently by allowing React to short-circuit the reconciliation process.

react-static-container Renders static content efficiently by allowing React to short-circuit the reconciliation process. This component should be used

Apr 15, 2022
A website made to display poems as a sharing website and resource for students in Singapore American School

7C Poems This is a website made to display poems as a sharing website and resource for students in Singapore American School. It’s made using React, T

May 20, 2022
✉️ Display e-mails in your React.js projects. (Targets Gmail rendering.)
✉️ Display e-mails in your React.js projects. (Targets Gmail rendering.)

react-letter is a React.js component that allows for an easy display of HTML e-mail content with automatic sanitization. Support for features should m

Jul 27, 2022
Navigation Viewer for Contentful Lifestyle Demo Environment
Navigation Viewer for Contentful Lifestyle Demo Environment

Navigation Viewer for Contentful Lifestyle Demo Environment An Entry Editor tab that shows an expanding tree view of your navigation menus within Cont

Feb 7, 2022
React Arts is a library of react functional component which provides canvas sketch board in the app.
React Arts is a library of react functional component which provides canvas sketch board in the app.

?? React Arts React Arts is a library of react functional component which provides canvas sketch board in the app. This library contains two react com

Jun 4, 2022
JSONX - Create React Elements, JSX and HTML from JSON

JSONX Description JSONX is a module that creates React Elements, JSX and HTML from JSON. Declarative The JSONX UMD comes with batteries included so yo

Jul 25, 2022
React components for Pelcro Elements
 React components for Pelcro Elements

Pelcro React Elements Tailor your Pelcro experience to the needs of your clients using our React components Features Integrates with our JS SDK out-of

May 26, 2022
Reactive DOM elements, based on mutableJS's state

mutableJS / DOM DOM elements, brought to life by @mutablejs/core FAQ Can mutableJS / DOM be standalone? In theory it can, but it is kinda pointless, s

Aug 4, 2022
A superset of JavaScript which gives you static types and powerful tooling in Visual Studio Code

TypeScript Example npx create-react-native-app -t with-typescript TypeScript is a superset of JavaScript which gives you static types and powerful too

Nov 21, 2021
Extension for vscode, which generates the value of a variable from a type definition
Extension for vscode, which generates the value of a variable from a type definition

Extension for vscode, which generates the value of a variable from a type definition

Feb 25, 2022