react-native-bpk-component-navigation-bar
v8.0.1react-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 |
npm i react-native-bpk-component-navigation-bar
Metadata
- Apache-2.0
- Whatever
- Backpack Design System
- released 2/26/2020