React Native Router

Installation

$ npm i @roman01la/react-native-router

Usage

Navigation structure

import { Router, Tab, Route } from '@roman01la/react-native-router';

const App = () => (
  <Router>
    <Tab key='home' initial>
      <Route key='profile' component={ProfileLayout} initial />
      <Route key='settings' component={SettingsLayout} />
    </Tab>
    <Tab key='search'>
      <Route key='search' component={SearchLayout} initial />
      <Route key='search_results' component={SearchResultsLayout} />
    </Tab>
  </Router>
);

Declarative navigation

import { Link } from '@roman01la/react-native-router';

// navigate within the same tab
<Link to={{ route: 'settings' }}>
  <Text>settings</Text>
</Link>

// navigate to another tab
<Link to={{ tab: 'search' }}>
  <Text>settings</Text>
</Link>

// navigate to specific route in another tab
<Link to={{ tab: 'search', route: 'search_results' }}>
  <Text>settings</Text>
</Link>

// navigate back
<Link back>
  <Text>settings</Text>
</Link>

Programmatic navigation

class MyComponent extends Component {
  static contextTypes = {
    navigate: PropTypes.func,
    back: PropTypes.func,
  }
  _navigateTo({ tab, route }) {
    this.context.navigate({ tab, route });
  }
  _goBack() {
    this.context.back();
  }
}

Tab Bar

import { Link } from '@roman01la/react-native-router';

const Tab = ({ children, active, ...props }) => (
  <Link style={active ? styles.activeTab : styles.tabBase} {...props}>
    {children}
  </Link>
);

class TabBar extends Component {
  static contextTypes = {
    currentTabIdx: PropTypes.number,
  }
  render() {

    const { currentTabIdx } = this.context;

    return (
      <View>

        <Tab active={currentTabIdx === 0} to={{ tab: 'home' }}>
          <Text>home</Text>
        </Tab>

        <Tab active={currentTabIdx === 1} to={{ tab: 'settings' }}>
          <Text>settings</Text>
        </Tab>

      </View>
    );
  }
}

Components

<Router />

Router component maintains navigation state and provides navigation API. It is built on top of NavigationExperimental.

<Tab />

Tab component should be used to group routes into tabs.

Props

• key — name of the tab
• initial — declare initial tab

<Route />

Route component should be used to declare a view routes.

Props

• key — name of the route
• component — component which should be rendered by the route
• initial — declare initial route

<Link />

Link component should be used for navigation between routes and tabs.

Props

• to — navigation target described as an object which consists of route and tab properties.

{
  route: 'routeKey',
  tab: 'tabKey'
}

• back — go back in history

License

MIT