react-native-bpk-component-horizontal-nav
v2.0.17react-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
npm i [email protected]
Metadata
- Apache-2.0
- Whatever
- Backpack Design System
- released 2/23/2018