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

16
src/views/CardStack.js
View File

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

8
src/views/Header.js
View File

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