# router-react-native

> Routing + Navigation Bar + Left Panel for react native apps

Latest version **1.0.8** (published 2017-01-31) · ISC license · 0 weekly downloads

## Install

```sh
npm install router-react-native
pnpm add router-react-native
yarn add router-react-native
bun add router-react-native
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2017-01-31 |
| First published | 2016-12-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Anubhav Dhawan |
| Maintainers | anubhav756 |
| Keywords | react, native, router, navigation, navbar, leftpanel, routing |

## Links

- npm: https://www.npmjs.com/package/router-react-native
- Repository: https://github.com/anubhav756/router-react-native
- Homepage: https://github.com/anubhav756/router-react-native#readme
- Issues: https://github.com/anubhav756/router-react-native/issues
- npm.io page: https://npm.io/package/router-react-native

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^15.4.2
- [react-native](https://npm.io/package/react-native.md) ^0.40.0
- [react-native-drawer](https://npm.io/package/react-native-drawer.md) ^2.3.0

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 1.0.8 (latest) — 2017-01-31
- 1.0.7 — 2017-01-31
- 1.0.6 — 2017-01-31
- 1.0.5 — 2017-01-19
- 1.0.4 — 2017-01-02
- 1.0.3 — 2016-12-28
- 1.0.2 — 2016-12-27
- 1.0.1 — 2016-12-27
- 1.0.0 — 2016-12-27

## README

## Install
`npm i router-react-native`

## Usage
`import Router from 'router-react-native';`

```
export default class MyApp extends Component {
  render() {
    return (
      <Router
        routes={[
            { index: Index },
            { login: Login },
            { users: Users },
                ...
            { defaultRouteName: DefaultRouteComponent }
        ]}
        defaultRoute='defaultRouteName'
        initialRoute='index'
        navBar={<NavBarComponent />}
        leftPanel={<LeftPanelComponent />}
        onOpen={() => { alert('Left panel opened!') }}
        onClose={() => { alert('Left panel closed!') }}
        leftPanelOffset={100}
        />
    );
  }
}

AppRegistry.registerComponent('MyApp', () => MyApp);
```
## Change routes
`import { pushRoute, popRoute } from 'router-react-native';`

```
handleNextClick() {
    const hideNavBar = true;
    const routeParameters = { ... };
        ...

    pushRoute('routeName', routeParameters, hideNavBar);
}

handleBackClick() {
    popRoute();
}
```

## Props
- `routes`: An array to map route ids with route's component
- `initialRoute`: id of the initial route
- `defaultRoute`: id of the default route (in case no matching route id is found)
- `navBar`: Component which will be rendered as the top navigation bar
- `leftPanel`: Component which will be rendered as the left panel
- `onOpen`: Event handler for left panel open
- `onClose`: Event handler for left panel close
- `leftPanelOffset`: Space to be left empty while opening left panel (default `100`)

## Exports
- `currentRoute`: Information about the current route
    - `currentRoute.id`: Unique route id
    - `currentRoute.params`: Route parameters
    - `currentRoute.index`: Index in the routing stack
- `pushRoute (id, params, hideNavBar)`: To go to a new route
    - `id`: The route's id
    - `params`: Optional routing parameters
    - `hideNavBar`: `true` for hiding the navigation bar for this new route
- `popRoute (n)`: Go back `n` routes (`1` by default). `0` to clear history, and go to initial route
- `updateLayoutData (Object)`: Update the `layoutData` prop of navBar/leftPanel components

## Props for `navBar` & `leftPanel`
- `toggleLeftPanel()`: Toggle left panel
- `showingLeftPanel`: Whether left panel is visible or not (`true/false`)
- `layoutData`: Any data which needs to be sent to the layout components (navBar/leftPanel)


[router-react-native](https://www.npmjs.com/package/router-react-native) NPM module

---
_Source: https://npm.io/package/router-react-native · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._