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

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

1import {Router} from 'react-enroute'
2import {State, createStack} from 'react-native-enroute'
3
4
5function Routes({
6  location,
7  paths,
8  onNavigateBack,
9}) {
10  const ShopTab = createStack({paths, onNavigateBack})
11  const QuestTab = createStack({paths, onNavigateBack})
12
13  return (
14    <Router {...{location}}>
15      <ShopTab path='/shops'>
16        <ShopList/>
17        <Shop path=':id'/>
18      </ShopTab>
19      <QuestTab path='/quest'>
20        <AllQuestions/>
21        <Question path=':id'/>
22      </QuestTab>
23    </Router>
24  )
25}
26
27function App() {
28  const routerState = useMemo(() => new State('/shops'), [])
29  const pop = useCallback(() => {
30    routerState.pop()
31    return true
32  }, [])
33  
34  const openShop123 = useCallback(() => {
35    routerState.push('/shops/123')
36  }, [])
37  const resetToQuest1 = useCallback(() => {
38    routerState.reset('/quest/1')
39  }, []) 
40
41  useEffect(() => {
42    BackHandler.addEventListener('hardwareBackPress', pop)
43
44    return () => {
45      BackHandler.removeEventListener('hardwareBackPress', pop)
46    }
47  }, [])
48
49  return (
50    <View>
51      <Button onPress={openShop123}/>
52      <Button onPress={resetToQuest1}/>
53      <Routes
54        location={routerState.current}
55        paths={routerState.paths}
56        onNavigateBack={pop}
57      />
58    </View>
59  )
60}