Navgiation Bar Example

IosStyleNav1.js

'use strict';

var React = require('react-native');
var {
  ActivityIndicatorIOS,
  ListView,
  Navigator,
  StyleSheet,
  Text,
  TextInput,
  View,
} = React;

var Screen3 = require('./Screen3');
var Screen4 = require('./Screen4');
var Screen5 = require('./Screen5');

var NavigationBar = require('react-native-navbar');

var IosStyleNav1 = React.createClass({
  componentDidMount : function(){
    console.log("ios style navigator mounted");
  },
  configureScene : function(route){
    // this method calls for transition animation
    // it's only 2 transition right now
    switch (route.id) {
      case 'empty':
        // this is the default transition
        return Navigator.SceneConfigs.FloatFromRight;
      case 'screen3':
        return Navigator.SceneConfigs.FloatFromBottom;
      case 'screen4':
        return Navigator.SceneConfigs.FloatFromBottom;
      case 'screen5':
          return Navigator.SceneConfigs.FloatFromBottom;
      }
  },
  renderScene: function(route, navigator) {
    var Component = route.component;
    var navBar = route.navigationBar;

    switch (route.id) {
      case 'empty':
        //Com <View />;
      case 'screen3':
        Component = Screen3;
        navBar = <NavigationBar
            customPrev = { <View style={styles.navBarLeftButton}></View> }
            title="Screen 3"/>;
        break;
      case 'screen4':
        Component = Screen4;
        navBar = < NavigationBar
            title="Screen 4"/>;
        break;
      // screen 5 is a full screen modal
      // so it has no navbar
      case 'screen5':
        Component = Screen5;
        navBar = null;
        break;

      }

    if (navBar) {
      navBar = React.addons.cloneWithProps(navBar, {
        navigator: navigator,
        route: route
      });
    }
    return (
      <View style={ styles.screenContainer }>
        {navBar}
        <Component
          navigator={navigator}
          route={route} />
      </View>
    );
  },
  render: function() {
    return (
      <Navigator
        debugOverlay={false}
        style={ styles.nav }
        initialRoute={{ id : 'screen3' }}
        renderScene={this.renderScene}
        configureScene={this.configureScene}
      />
    );
  }
});

var styles = StyleSheet.create({
  screenContainer : {
    flex:1,
  },
});

module.exports = IosStyleNav1;

Screen3.js

'use strict';

var React = require('react-native');
var {
  ActivityIndicatorIOS,
  ListView,
  TouchableHighlight,
  StyleSheet,
  Text,
  TextInput,
  View,
} = React;

var Screen3 = React.createClass({
  componentDidMount : function(){
    console.log("screen 3 mounted!");
  },
  goToScreen4 : function(){
    this.props.navigator.push({ id: 'screen4' });
    //this.props.navigator.replace({ id: 'screen4' });
    //this.props.navigator.jumpTo({ id: 'screen4' });
  },
  render: function() {
    return (
      <View style={styles.container}>
      <Text>
        Screen 3
      </Text>
      <TouchableHighlight onPress={this.goToScreen4}>
        <Text>
          Go to Screen 4
        </Text>
      </TouchableHighlight>
      <TextInput
          style={styles.default}
        />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  default: {
    height: 26,
    borderWidth: 0.5,
    borderColor: '#0f0f0f',
    padding: 4,
    fontSize: 13,
  }
});

module.exports = Screen3;

Screen4.js

'use strict';

var React = require('react-native');
var {
  ActivityIndicatorIOS,
  ListView,
  TouchableHighlight,
  StyleSheet,
  Text,
  TextInput,
  View,
} = React;


var Screen4 = React.createClass({
  componentDidMount : function(){
    console.log("screen 4 mounted!");
  },
  openScreen5Modal : function(){
    this.props.navigator.push({ id: 'screen5' });
  },
  render: function() {
    return (
      <View style={styles.container}>
      <Text>
        Screen 4
      </Text>
      <TouchableHighlight onPress={this.openScreen5Modal}>
        <Text>
          Open Screen 5 Modal
        </Text>
      </TouchableHighlight>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'green',
  },
});

module.exports = Screen4;

Screen5.js

'use strict';

var React = require('react-native');
var {
  ActivityIndicatorIOS,
  ListView,
  TouchableHighlight,
  StyleSheet,
  Text,
  TextInput,
  View,
} = React;

var Screen5 = React.createClass({
  componentDidMount : function(){
    console.log("screen 5 mounted!");
  },
  closeScreen5Modal : function(){
    this.props.navigator.pop();
  },
  render: function() {
    return (
      <View style={styles.container}>
      <Text>
        Screen 5 -- This is a modal
      </Text>
      <TouchableHighlight onPress={this.closeScreen5Modal}>
        <Text>
          Close Screen 5 Modal
        </Text>
      </TouchableHighlight>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'yellow',
  },
});

module.exports = Screen5;