bpk-component-navigation-bar
Backpack React Native navigation bar component.
Default
Day | Night |
---|---|
Modal
Day | Night |
---|---|
Subtitle view
Day | Night |
---|---|
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 |