# react-native-enroute

> Simple and fast React Native router based on react-enroute and native navigation

Latest version **8.0.1** (published 2026-02-18) · WTFPL license · 0 weekly downloads

## Install

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

## Health

**Score 45/100 (D)** — status: stable.

Positive: no vulnerabilities.

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

## Facts

| | |
|---|---|
| Version | 8.0.1 |
| Published | 2026-02-18 |
| First published | 2017-08-20 |
| Weekly downloads | 0 |
| License | WTFPL |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | farwayer |
| Maintainers | farwayer |
| Keywords | react-native, router, navigation, navigator, enroute, react-navigation, stack |

## Links

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

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

- 8.0.1 (latest) — 2026-02-18
- 8.0.0 — 2026-02-18
- 7.1.0 — 2022-10-25
- 7.0.0 — 2021-04-21
- 6.0.3 — 2020-11-21
- 6.0.2 — 2020-11-21
- 6.0.1 — 2020-04-23
- 6.0.0 — 2020-04-21
- 5.0.0 — 2020-01-15
- 4.0.0 — 2019-10-31
- 3.0.0 — 2019-09-19
- 2.0.2 — 2018-06-05
- 2.0.1 — 2018-05-08
- 2.0.0 — 2018-05-07
- 1.1.1 — 2018-05-07
- … 2 more at https://npm.io/package/react-native-enroute/versions

## README

# React Native Enroute

_Simple and fast React Native router based on react-enroute and native navigation_

[![NPM version](https://img.shields.io/npm/v/react-native-enroute.svg)](https://www.npmjs.com/package/react-native-enroute)

To be honest it is not real router at all. This package contains some wrappers
for using [react-enroute](https://github.com/tj/react-enroute)
with [react-native-screens](https://github.com/software-mansion/react-native-screens).
Library plays well with Redux and MobX.

## Usage

```bash
yarn add react-native-enroute react-enroute react-native-screens @react-navigation/native @react-navigation/native-stack
```

```js
import {Router} from 'react-enroute'
import {State, createStack} from 'react-native-enroute'
import {ThemeProvider, PreventRemoveProvider} from '@react-navigation/core'
import {DefaultTheme} from '@react-navigation/native'

function Routes({
  location,
  paths,
  onNavigateBack,
}) {
  const ShopTab = createStack({paths, onNavigateBack})
  const QuestTab = createStack({paths, onNavigateBack})

  return (
    <ThemeProvider value={DefaultTheme}>
	    <PreventRemoveProvider>
				<Router {...{location}}>
					<ShopTab path='/shops'>
						<ShopList/>
						<Shop path=':id'/>
					</ShopTab>
					<QuestTab path='/quest'>
						<AllQuestions/>
						<Question path=':id'/>
					</QuestTab>
				</Router>
			</PreventRemoveProvider>
		</ThemeProvider>
  )
}

function App() {
  const routerState = useMemo(() => new State('/shops'), [])
  const pop = useCallback(() => {
    routerState.pop()
    return true
  }, [])
  
  const openShop123 = useCallback(() => {
    routerState.push('/shops/123')
  }, [])
  const resetToQuest1 = useCallback(() => {
    routerState.reset('/quest/1')
  }, []) 

  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', pop)

    return () => {
      BackHandler.removeEventListener('hardwareBackPress', pop)
    }
  }, [])

  return (
    <View>
      <Button onPress={openShop123}/>
      <Button onPress={resetToQuest1}/>
      <Routes
        location={routerState.current}
        paths={routerState.paths}
        onNavigateBack={pop}
      />
    </View>
  )
}
```

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