baloran / react-router-navigation

⛵️ A complete navigation library for React Native and React Router

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

react-router-navigation

Build Status npm version

An update is coming (wip)

Check next branch for RN 0.44.0 support

react-router-navigation provides tools to navigate between multiple screens with navigators or tab views. This library is based on react-router, react-navigation, and react-native-tab-view.

Highlights

  • Just an add-on to react-router
  • Declarative composability
  • Allow you to call transitions anywhere in your code with simple components
  • Dynamic Routing
  • URL Driven Development
  • Easy-to-use navigation solution using react-navigation
  • Tab Bar Support using react-native-tab-view
  • Cross-platform
  • First class deep linking support
  • Nested Navigators

How to use

Install:

$ yarn add react-router react-router-native react-router-navigation

And then, enjoy it:

import React from 'react'
import { Text } from 'react-native'
import { NativeRouter, Link } from 'react-router-native'
import { Navigation, Card } from 'react-router-navigation'

const App = () => (
  <NativeRouter>
    <Navigation>
      <Card
        exact
        path="/"
        render={() => <Link to="/hello">Press it</Link>}
      />
      <Card
        path="/hello"
        render={() => <Text>Hello</Text>}
      />
    </Navigation>
  </NativeRouter>
)

Docs

  • <Navigation /> handles the transition between different scenes in your app
  • <Tabs /> make it easy to explore and switch between different views.
  • <BottomNavigation /> make it easy to explore and switch between top-level views in a single tap.

Advanced

Platform Support

react-router-navigation is cross-platform. It supports all platforms that react-navigation andreact-native-tab-view supports (Android and iOS).

Contributing

Want to hack on react-router-navigation? Awesome! We welcome contributions from anyone and everyone. 🚀

Questions

If you have any questions, feel free to get in touch on Twitter, @Leo_LeBras.

Thanks

react-router-navigation is based on React Router. Thanks to Ryan Florence @ryanflorence, Michael Jackson @mjackson and all the contributors for their work on react-router and history.

Special thanks to @ericvicenti, @skevy, @satya164 and @grabbou for their work on react-navigation and @satya164 for his work on react-native-tab-view

About

⛵️ A complete navigation library for React Native and React Router


Languages

Language:JavaScript 100.0%