status-im/react-navigation
2
0
Fork 0
mirror of https://github.com/status-im/react-navigation.git synced 2025-02-24 17:18:09 +00:00
Code Issues Projects Releases Wiki Activity

Replace header.bar with headerComponent

Browse Source
This commit is contained in:
Mike Grabowski 2017-01-27 12:46:11 +01:00 committed by Satyajit Sahoo
parent a60607385b
commit 23ca61679d
3 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/TypeDefinition.js
View File

@ -8,6 +8,7 @@ import {
import type {
HeaderMode,
HeaderProps,
} from './views/Header';
/**
@ -242,7 +243,7 @@ export type NavigationContainerConfig = {
export type NavigationStackViewConfig = {
mode?: 'card' | 'modal',
headerMode?: HeaderMode,
headerComponent?: ReactClass<*>,
headerComponent?: ReactClass<HeaderProps>,
};
export type NavigationStackRouterConfig = {

16
src/views/CardStack.js
View File

@ -30,6 +30,7 @@ import type {
import type {
HeaderMode,
HeaderProps,
} from './Header';
import type { TransitionConfig } from './TransitionConfigs';
@ -41,6 +42,7 @@ const NativeAnimatedModule = NativeModules && NativeModules.NativeAnimatedModule
type Props = {
screenProps?: {};
headerMode: HeaderMode,
headerComponent?: ReactClass<HeaderProps>,
mode: 'card' | 'modal',
navigation: NavigationScreenProp<NavigationState, NavigationAction>,
router: NavigationRouter,
@ -61,6 +63,7 @@ type Props = {
type DefaultProps = {
mode: 'card' | 'modal',
gesturesEnabled: boolean,
headerComponent: ReactClass<HeaderProps>,
};
class CardStack extends React.Component<DefaultProps, Props, void> {
@ -87,6 +90,11 @@ class CardStack extends React.Component<DefaultProps, Props, void> {
*/
headerMode: PropTypes.oneOf(['float', 'screen', 'none']),
/**
* Custom React component to be used as a header
*/
headerComponent: PropTypes.func,
/**
* Style of the cards movement. Value could be `card` or `modal`.
* Default value is `card`.
@ -138,6 +146,7 @@ class CardStack extends React.Component<DefaultProps, Props, void> {
static defaultProps: DefaultProps = {
mode: 'card',
gesturesEnabled: Platform.OS === 'ios',
headerComponent: Header,
};
componentWillMount() {
@ -186,13 +195,8 @@ class CardStack extends React.Component<DefaultProps, Props, void> {
const navigation = this._getChildNavigation(props.scene);
const header = this.props.router.getScreenConfig(navigation, 'header') || {};
let HeaderComponent = Header;
if (header.bar) {
HeaderComponent = header.bar;
}
return (
<HeaderComponent
<this.props.headerComponent
{...props}
style={header.style}
mode={headerMode}

8
src/views/Header.js
View File

@ -39,7 +39,7 @@ type DefaultProps = {
renderTitleComponent: SubViewRenderer,
};
type Props = NavigationSceneRendererProps & {
export type HeaderProps = NavigationSceneRendererProps & {
mode: HeaderMode,
onNavigateBack: ?Function,
renderLeftComponent: SubViewRenderer,
@ -53,7 +53,7 @@ type SubViewName = 'left' | 'title' | 'right';
const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
class Header extends React.Component<DefaultProps, Props, *> {
class Header extends React.Component<DefaultProps, HeaderProps, *> {
static HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
static Title = HeaderTitle;
@ -89,9 +89,9 @@ class Header extends React.Component<DefaultProps, Props, *> {
style: PropTypes.any,
};
props: Props;
props: HeaderProps;
shouldComponentUpdate(nextProps: Props, nextState: any): boolean {
shouldComponentUpdate(nextProps: HeaderProps, nextState: any): boolean {
return ReactComponentWithPureRenderMixin.shouldComponentUpdate.call(
this,
nextProps,