Navigation bar

The navigation bar component encapsulates a title and icon/text actions for controlling views.

bpk-component-navigation-bar

Backpack React Native navigation bar component.

Default

Day Night
bpk-component-navigation-bar default iPhone 8 simulator bpk-component-navigation-bar default iPhone 8 simulator - dark mode
bpk-component-navigation-bar default Google Pixel emulator bpk-component-navigation-bar default Google Pixel emulator - dark mode
Day Night
bpk-component-navigation-bar modal iPhone 8 simulator bpk-component-navigation-bar modal iPhone 8 simulator - dark mode
bpk-component-navigation-bar modal Google Pixel emulator bpk-component-navigation-bar modal Google Pixel emulator - dark mode

Subtitle view

Day Night
bpk-component-navigation-bar subtitle-view iPhone 8 simulator bpk-component-navigation-bar subtitle-view iPhone 8 simulator - dark mode
bpk-component-navigation-bar subtitle-view Google Pixel emulator bpk-component-navigation-bar subtitle-view Google Pixel emulator - dark mode

Installation

Check the main Readme for a complete installation guide.

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 "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 "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 'backpack-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 'backpack-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 'backpack-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 'backpack-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 'backpack-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