open-index/open-npm huggingface dataset:
npm package: @roman01la/react-native-router
Description: Declarative router for React Native
Author: Roman Liutikov
Latest version: 1.0.0

# React Native Router

<img src="example.gif" width="225" />

## Installation
```
$ npm i @roman01la/react-native-router
```

## Usage

### Navigation structure
```js
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
```js
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
```js
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
```js
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

### &lt;Router /&gt;
`Router` component maintains navigation state and provides navigation API. It is built on top of `NavigationExperimental`.

### &lt;Tab /&gt;
`Tab` component should be used to group routes into tabs.

#### Props
- `key` — name of the tab
- `initial` — declare initial tab

### &lt;Route /&gt;
`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

### &lt;Link /&gt;
`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.
```js
{
  route: 'routeKey',
  tab: 'tabKey'
}
```
- `back` — go back in history

## License
MIT