https://github.com/farwayer/react-native-enroute

Simple and fast React Native router
https://github.com/farwayer/react-native-enroute

enroute navigation navigator react-native react-navigation router stack

Last synced: 23 days ago
JSON representation

Simple and fast React Native router

• Host: GitHub
• URL: https://github.com/farwayer/react-native-enroute
• Owner: farwayer
• Created: 2016-11-04T00:53:50.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-10-25T11:23:55.000Z (about 2 years ago)
• Last Synced: 2024-11-19T11:02:53.685Z (about 1 month ago)
• Topics: enroute, navigation, navigator, react-native, react-navigation, router, stack
• Language: JavaScript
• Homepage:
• Size: 110 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

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

```

```js

import {Router} from 'react-enroute'

import {State, createStack} from 'react-native-enroute'

function Routes({

  location,

  paths,

  onNavigateBack,

}) {

  const ShopTab = createStack({paths, onNavigateBack})

  const QuestTab = createStack({paths, onNavigateBack})

  return (

    

      

        

        

      

      

        

        

      

    

  )

}

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 (

    

      

      

      

    

  )

}

```