React-native-bpk-component-horizontal-nav NPM | npm.io

7.0.1 • Published 6 years ago

Install

Weekly downloads

5

License

Apache-2.0

Repository

Last release

6 years ago

react-native-bpk-component-horizontal-nav

Backpack React Native horizontal navigation component.

Installation

npm install react-native-bpk-component-horizontal-nav --save-dev

Usage

import React, { Component } from 'react';
import BpkHorizontalNav, { BpkHorizontalNavItem } from 'react-native-bpk-component-horizontal-nav';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      selectedId: 'flights',
    };
  }

  render() {
    return (
      <BpkHorizontalNav selectedId={this.state.selectedId}>
        <BpkHorizontalNavItem
          id="flights"
          title="Flights"
          onPress={() => {
            this.setState({ selectedId: 'flights' });
          }}
        />
        <BpkHorizontalNavItem
          id="hotels"
          title="Hotels"
          onPress={() => {
            this.setState({ selectedId: 'hotels' });
          }}
        />
        <BpkHorizontalNavItem
          id="car-hire"
          title="Car hire"
          onPress={() => {
            this.setState({ selectedId: 'car-hire' });
          }}
        />
      </BpkHorizontalNav>
    );
  }
};

Props

BpkHorizontalNav

Property	PropType	Required	Default Value
children	node	true	-
selectedId	string (matching `id` prop of `BpkHorizontalNavItem` child)	true	-
spaceAround	bool	false	false

BpkHorizontalNavItem

Property	PropType	Required	Default Value
id	string	true	-
onPress	func	true	-
title	string	true	-
accessibilityLabel	string	false	props.title
small	bool	false	false
disabled	bool	false	false
theme	See Theme Props below	false	null

Theme Props

BpkHorizontalNav

horizontalNavSelectedTextColor

BpkHorizontalNavItem

horizontalNavSelectedTextColor

bpk-tokens prop-types react-native-bpk-theming react-native-bpk-component-text react-native-bpk-component-touchable-overlay react-native-bpk-component-touchable-native-feedback

@infinitebrahmanuniverse/nolb-react-native-b @everything-registry/sub-chunk-2573

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago