diff --git a/index.js b/index.js index e9e4350..b5b164a 100644 --- a/index.js +++ b/index.js @@ -5,166 +5,175 @@ var React = require('react-native'); var NavBarContainer = require('./components/NavBarContainer'); var { - StyleSheet, - Navigator, - StatusBarIOS, - View, -} = React; + StyleSheet, + Navigator, + StatusBarIOS, + View, + } = React; var Router = React.createClass({ - getInitialState: function() { - return { - route: { - name: null, - index: null - }, - dragStartX: null, - didSwitchView: null, + getInitialState: function () { + return { + route: { + name: null, + index: null + }, + hideHeader: false, + dragStartX: null, + didSwitchView: null, + } + }, + + /* + * This changes the title in the navigation bar + * It should preferrably be called for "onWillFocus" instad > + * > but a recent update to React Native seems to break the animation + */ + onDidFocus: function (route) { + this.setState({route: route}); + }, + + onBack: function (navigator) { + if (this.state.route.index > 0) { + navigator.pop(); + } + }, + + onForward: function (route, navigator) { + route.index = this.state.route.index + 1 || 1; + navigator.push(route); + }, + + customAction: function (opts) { + this.props.customAction(opts); + }, + + renderScene: function (route, navigator) { + var me = this; + var goForward = function (route) { + route.index = this.state.route.index + 1 || 1; + this.setState({hideHeader: route.hideNavigationBar}) + navigator.push(route); + }.bind(this); + + var goBackwards = function () { + this.onBack(navigator); + }.bind(this); + + var goToFirstRoute = function () { + navigator.popToTop() + }; + + var replaceRoute = function (route) { + me.setState({hideHeader: route.hideNavigationBar}) + navigator.replace(route) + }; + + var customAction = function (opts) { + this.customAction(opts); + }.bind(this); + + var didStartDrag = function (evt) { + var x = evt.nativeEvent.pageX; + if (x < 28) { + this.setState({ + dragStartX: x, + didSwitchView: false + }); + return true; + } + }.bind(this); + + // Recognize swipe back gesture for navigation + var didMoveFinger = function (evt) { + var draggedAway = ((evt.nativeEvent.pageX - this.state.dragStartX) > + 30); + if (!this.state.didSwitchView && draggedAway) { + this.onBack(navigator); + this.setState({didSwitchView: true}); + } + }.bind(this); + + // Set to false to prevent iOS from hijacking the responder + var preventDefault = function (evt) { + return true; + }; + + var Content = route.component; + + // Remove the margin of the navigation bar if not using navigation bar + var extraStyling = {}; + if (this.props.hideNavigationBar || this.state.hideHeader) { + extraStyling.marginTop = 0; + } + + return ( + + + + ) + + }, + + render: function () { + + // Status bar color + if (this.props.statusBarColor === "black") { + StatusBarIOS.setStyle(0); + } else { + StatusBarIOS.setStyle(1); + } + + var navigationBar; + + if (!this.props.hideNavigationBar && !this.state.hideHeader) { + navigationBar = + + } + + return ( + + ) } - }, - - /* - * This changes the title in the navigation bar - * It should preferrably be called for "onWillFocus" instad > - * > but a recent update to React Native seems to break the animation - */ - onDidFocus: function(route) { - this.setState({ route: route }); - }, - - onBack: function(navigator) { - if (this.state.route.index > 0) { - navigator.pop(); - } - }, - - onForward: function(route, navigator) { - route.index = this.state.route.index + 1 || 1; - navigator.push(route); - }, - - customAction: function(opts) { - this.props.customAction(opts); - }, - - renderScene: function(route, navigator) { - - var goForward = function(route) { - route.index = this.state.route.index + 1 || 1; - navigator.push(route); - }.bind(this); - - var goBackwards = function() { - this.onBack(navigator); - }.bind(this); - - var goToFirstRoute = function() { - navigator.popToTop() - }; - - var customAction = function(opts) { - this.customAction(opts); - }.bind(this); - - var didStartDrag = function(evt) { - var x = evt.nativeEvent.pageX; - if (x < 28) { - this.setState({ - dragStartX: x, - didSwitchView: false - }); - return true; - } - }.bind(this); - - // Recognize swipe back gesture for navigation - var didMoveFinger = function(evt) { - var draggedAway = ((evt.nativeEvent.pageX - this.state.dragStartX) > 30); - if (!this.state.didSwitchView && draggedAway) { - this.onBack(navigator); - this.setState({ didSwitchView: true }); - } - }.bind(this); - - // Set to false to prevent iOS from hijacking the responder - var preventDefault = function(evt) { - return true; - }; - - var Content = route.component; - - // Remove the margin of the navigation bar if not using navigation bar - var extraStyling = {}; - if (this.props.hideNavigationBar) { - extraStyling.marginTop = 0; - } - - return ( - - - - ) - - }, - - render: function() { - - // Status bar color - if (this.props.statusBarColor === "black") { - StatusBarIOS.setStyle(0); - } else { - StatusBarIOS.setStyle(1); - } - - var navigationBar; - - if (!this.props.hideNavigationBar) { - navigationBar = - - } - - return ( - - ) - } }); var styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#F5FCFF', - marginTop: 64 - }, + container: { + flex: 1, + backgroundColor: '#F5FCFF', + marginTop: 64 + }, });