pwa-navigator v1.0.1

pwa-navigator

React navigator for a pwa.

Install

npm install --save pwa-navigator

Usage

In App.ts import the Route provider from pwa-navigator and add the component with the routes as a child. Import the pwa stylesheet by adding a import 'pwa-navigator/dist/index.css';

import React from 'react'

import 'pwa-navigator/dist/index.css'
import { RouteProvider } from 'pwa-navigator'
import Application from './navGroups/Application'

const App = () => {
  return (
    <RouteProvider>
      <Application />
    </RouteProvider>
  )
}

export default App

Import Navigator and Route from pwa-navigator. The default transition is a slide transition. When you want to change that behaviour to a stack transition add the childrenTransition property to the parent and give it the stack value.

import React from 'react'
import { Navigator, Route } from 'pwa-navigator'
import MatchesScreen from '../screens/MatchesScreen'
import PublicMatchesScreen from '../screens/PublicMatchesScreen'
import MatchScreen from '../screens/MatchScreen'
import VideoScreen from '../screens/VideoScreen'
import MusicScreen from '../screens/MusicScreen'
import TournamentsScreen from '../screens/TournamentsScreen'
import FeedScreen from '../screens/FeedScreen'
import ProfileScreen from '../screens/ProfileScreen'

const Application = () => {
  return (
    <Navigator>
      <Route url='' component={MatchesScreen} childrenTransition='stack'>
        <Route url=':uuid' component={MatchScreen} childrenTransition='stack'>
          <Route url='video/:videoUuid' component={VideoScreen} />
          <Route url='music/:musicUuid' component={MusicScreen} />
        </Route>
        <Route url='tournaments' component={TournamentsScreen} />
      </Route>
      <Route url='feed' component={FeedScreen} />
      <Route url='profile' component={ProfileScreen} />
    </Navigator>
  )
}
export default Application

License

MIT © MaxEgg