react-native-bpk-component-navigation-bar

Backpack React Native navigation bar component.

Installation

npm install react-native-bpk-component-navigation-bar --save-dev

Usage

The component has slightly different APIs on iOS and Android. For both platforms the BpkNavigationBar is the main component to use. On Android we additionally provide BpkNavigationBarButtonAndroid to render the leading and trailing bar buttons. On iOS there are a few more variations of buttons and we provide three components:

• BpkNavigationBarBackButtonIOS for rendering a back item with an optional title.
• BpkNavigationBarTextButtonIOS for rendering a text button.
• BpkNavigationBarIconButtonIOS for rendering an icon only button.

Android

import React from "react";
import { I18nManager } from "react-native";
import BpkNavigationBar, {
  BpkNavigationBarButtonAndroid
} from "react-native-bpk-component-navigation-bar";

const backIcon = () =>
  I18nManager.isRTL ? "native-android--forward" : "native-android--back";

export default () => (
  <BpkNavigationBar
    leadingButton={
      <BpkNavigationBarButtonAndroid
        title={translationHelper.t("back-button-title")}
        icon={backIcon}
        onPress={() => null}
      />
    }
    title={translationHelper.t("navigation-bar-title")}
  />
);

iOS

import React from "react";
import { I18nManager } from "react-native";
import BpkNavigationBar, {
  BpkNavigationBarBackButtonIOS
} from "react-native-bpk-component-navigation-bar";

export default () => (
  <BpkNavigationBar
    leadingButton={
      <BpkNavigationBarBackButtonIOS
        title={translationHelper.t("back-button-title")}
        showTitle
        onPress={() => null}
      />
    }
    title={translationHelper.t("navigation-bar-title")}
  />
);

Components

BpkNavigationBar

Renders the navigation bar.

import BpkNavigationBar from 'react-native-bpk-component-navigation-bar'

Props

| Property | PropType | Required | Default Value | | -------------- | ------------------------------------ | -------- | ------------- | | title | oneOf(string, titleWithIcon shape) | true | - | | theme | object | false | null | | leadingButton | button element | false | null | | trailingButton | button element | false | null | | subtitleView | element | false | null |

titleWithIcon is an object with the shape

PropTypes.shape({
  value: PropTypes.string.isRequired, // The title to use
  icon: PropTypes.string.isRequired, // The name of a Backpack icon e.g "lock"
  iconPosition: PropTypes.oneOf(['leading', 'trailing']),
});

Theme Props

Common:

• navigationBarBackgroundColor
• navigationBarTintColor
• navigationBarDisabledTintColor

Android:

• navigationBarStatusBarColor

iOS:

• navigationBarShadowColor
• navigationBarPrimaryColor

BpkNavigationBarButtonAndroid

Renders bar buttons on Android only.

import { BpkNavigationBarButtonAndroid } from 'react-native-bpk-component-navigation-bar'

Props

| Property | PropType | Required | Default Value | | -------- | --------------------------------- | -------- | ------------- | | title | string | true | - | | icon | oneOf(Object.keys(BpkIcons.icon)) | true | - | | onPress | func | false | null | | disabled | bool | false | false |

BpkNavigationBarBackButtonIOS

Renders a back button on iOS with optional support to show a title.

import { BpkNavigationBarBackButtonIOS } from 'react-native-bpk-component-navigation-bar'

Props

| Property | PropType | Required | Default Value | | --------- | -------- | -------- | ------------- | | title | string | true | - | | showTitle | bool | false | false | | onPress | func | false | null |

BpkNavigationBarTextButtonIOS

Renders a text button on iOS.

import { BpkNavigationBarTextButtonIOS } from 'react-native-bpk-component-navigation-bar'

Props

| Property | PropType | Required | Default Value | | --------- | ---------------------------- | -------- | ------------- | | title | string | true | - | | disabled | bool | false | false | | emphasize | bool | false | false | | onPress | func | false | null | | type | oneOf('default', 'primary') | false | default |

BpkNavigationBarIconButtonIOS

Renders a text button on iOS.

import { BpkNavigationBarIconButtonIOS } from 'react-native-bpk-component-navigation-bar'

Props

| Property | PropType | Required | Default Value | | -------- | --------------------------------- | -------- | ------------- | | title | string | true | - | | icon | oneOf(Object.keys(BpkIcons.icon)) | true | - | | onPress | func | false | null | | disabled | bool | false | false |