react-native-bpk-component-horizontal-nav

Backpack React Native horizontal navigation component.

Usage no npm install needed!

<script type="module">
  import reactNativeBpkComponentHorizontalNav from 'https://cdn.skypack.dev/react-native-bpk-component-horizontal-nav';
</script>

README

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