Skip to content

Instantly share code, notes, and snippets.

@wolverineks

wolverineks/declarativeRouterAPI.ts

Last active April 27, 2018 14:07
Show Gist options
  • Save wolverineks/b4c074092f39fc9492a9e395414cc96f to your computer and use it in GitHub Desktop.
Save wolverineks/b4c074092f39fc9492a9e395414cc96f to your computer and use it in GitHub Desktop.
Download ZIP
Declarative Router API
Raw
declarativeRouterAPI.ts
import { Bodies, Body, Drawers, Drawer, Headers, Header, Router, Route, Tabs, Tab } from 'declarative-router'
import { Scene1, Scene2 } from './myScenes'
import { Main } from './myRoutes'
<Router>{(route) =>
// ROUTES ////////////////////////////////////////////////////////////////
<Route isActive={route === 'main'}>{(scene) =>
<Scene isActive={scene === '1'}>
// DRAWERS ////////////////////////////////////////////////////////////////
<Drawers>
<Drawer isActive={scene === '1'}>
<Scene1.Drawer />
</Drawer>
<Drawer isActive={scene === '2'}>
<Scene2.Drawer />
</Drawer>
</Drawers>
// HEADERS ////////////////////////////////////////////////////////////////
<Headers>
<Header isActive={scene === '1'}>
<Scene1.Header>
<Scene1.Header.Left onPress={headersScene1LeftPressed} />
<Scene1.Header.Center onPress={headersScene1CenterPressed} />
<Scene1.Header.Right onPress={headersScene1RightPressed} />
</Scene1.Header>
</Header>
<Header isActive={scene === '2'}>
<Scene2.Header>
<Scene2.Header.Left onPress={headersScene2LeftPressed} />
<Scene2.Header.Center onPress={headersScene2CenterPressed} />
<Scene2.Header.Right onPress={headersScene2RightPressed} />
</Scene2.Header>
</Header>
</Headers>
// BODIES ////////////////////////////////////////////////////////////////
<Bodies>
<Body isActive={scene === '1'}>
<Scene1.Body onPress={headersScene1Pressed} /> // Could be another router
</Body>
<Body isActive={scene === '2'}>
<Scene2.Body onPress={headersScene2Pressed} />
</Body>
</Bodies>
// TABS ////////////////////////////////////////////////////////////////
<Tabs>
<Tab isActive={scene === '1'}>
<Scene1.Tab onPress={scene1TabButtonPressed} />
</Tab>
<Tab isActive={scene === '2'}>
<Scene2.Tab onPress={scene2TabButtonPressed} />
</Tab>
</Tabs>
</Main>
}</Route>
}</Router>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment