diff --git a/components/NavBarContainer.js b/components/NavBarContainer.js
index f37ff72..5946412 100644
--- a/components/NavBarContainer.js
+++ b/components/NavBarContainer.js
@@ -1,6 +1,7 @@
import React, { StyleSheet, View, PropTypes, Platform, BackAndroid } from 'react-native';
import NavBarContent from './NavBarContent';
+import * as Styles from '../styles';
const propTypes = {
backButtonComponent: PropTypes.func,
@@ -39,14 +40,14 @@ class NavBarContainer extends React.Component {
top: 0,
left: 0,
right: 0,
- height: 64,
+ height: Styles.NAV_BAR_HEIGHT,
},
navbarContainerHidden: {
position: 'absolute',
- top: -64,
+ top: -Styles.NAV_BAR_HEIGHT,
left: 0,
right: 0,
- height: 64,
+ height: Styles.NAV_BAR_HEIGHT,
},
});
}
diff --git a/components/NavBarContent.js b/components/NavBarContent.js
index 4f6eed7..2696797 100644
--- a/components/NavBarContent.js
+++ b/components/NavBarContent.js
@@ -1,5 +1,6 @@
import React, { StyleSheet, Text, View, Animated, Easing, PropTypes } from 'react-native';
import NavButton from './NavButton';
+import * as Styles from '../styles';
const propTypes = {
backButtonComponent: PropTypes.func,
@@ -35,19 +36,20 @@ class NavBarContent extends React.Component {
top: 0,
left: 0,
right: 0,
- height: 64, // Default iOS navbar height
+ height: Styles.NAV_BAR_HEIGHT,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
- paddingTop: 13,
+ paddingTop: Styles.NAV_BAR_PADDING_TOP,
},
navbarText: {
color: 'white',
fontSize: 17,
margin: 10,
- marginTop: 14,
+ marginTop: Styles.NAV_BAR_TEXT_MARGIN_TOP,
+ marginBottom: Styles.NAV_BAR_TEXT_MARGIN_TOP,
fontWeight: '600',
- textAlign: 'center',
+ textAlign: Styles.NAV_BAR_TEXT_ALIGN,
alignItems: 'center',
},
corner: {
@@ -141,11 +143,13 @@ class NavBarContent extends React.Component {
);
}
- leftCorner = (
-
- {leftCornerContent}
-
- );
+ if (this.props.route.leftCorner || this.props.route.index > 0) {
+ leftCorner = (
+
+ {leftCornerContent}
+
+ );
+ }
/**
* Set rightCorner
@@ -161,13 +165,13 @@ class NavBarContent extends React.Component {
{...this.props.route.rightCornerProps}
/>
);
- }
- rightCorner = (
-
- {rightCornerContent}
-
- );
+ rightCorner = (
+
+ {rightCornerContent}
+
+ );
+ }
/**
* Set title message
@@ -185,7 +189,7 @@ class NavBarContent extends React.Component {
}
titleComponent = (
-
+
{titleContent}
);
diff --git a/index.js b/index.js
index 251bbd7..4afa592 100644
--- a/index.js
+++ b/index.js
@@ -9,6 +9,7 @@ import React, {
import { EventEmitter } from 'fbemitter';
import NavBarContainer from './components/NavBarContainer';
+import * as Styles from './styles';
const propTypes = {
backButtonComponent: PropTypes.func,
@@ -156,7 +157,7 @@ class Router extends React.Component {
} else if (this.props.hideNavigationBar || route.hideNavigationBar) {
margin = this.props.noStatusBar ? 0 : 20;
} else {
- margin = 64;
+ margin = Styles.NAV_BAR_HEIGHT;
}
return (
diff --git a/styles.android.js b/styles.android.js
new file mode 100644
index 0000000..200b689
--- /dev/null
+++ b/styles.android.js
@@ -0,0 +1,5 @@
+export const NAV_BAR_HEIGHT = 56;
+export const NAV_BAR_TEXT_ALIGN = 'left';
+export const NAV_BAR_TEXT_MARGIN_TOP = 0;
+export const NAV_BAR_TEXT_MARGIN_BOTTOM = 20;
+export const NAV_BAR_PADDING_TOP = 0;
diff --git a/styles.ios.js b/styles.ios.js
new file mode 100644
index 0000000..9c7f648
--- /dev/null
+++ b/styles.ios.js
@@ -0,0 +1,5 @@
+export const NAV_BAR_HEIGHT = 64;
+export const NAV_BAR_TEXT_ALIGN = 'center';
+export const NAV_BAR_TEXT_MARGIN_TOP = 14;
+export const NAV_BAR_TEXT_MARGIN_BOTTOM = 0;
+export const NAV_BAR_PADDING_TOP = 13;