React Native Enroute

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

To be honest it is not real router at all. This package contains some wrappers for using react-enroute with react-native-screens. Library plays well with Redux and MobX.

Usage

yarn add react-native-enroute react-enroute react-native-screens @react-navigation/native

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 (
    <Router {...{location}}>
      <ShopTab path='/shops'>
        <ShopList/>
        <Shop path=':id'/>
      </ShopTab>
      <QuestTab path='/quest'>
        <AllQuestions/>
        <Question path=':id'/>
      </QuestTab>
    </Router>
  )
}

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>
  )
}