new native based react-navigation component for smooth navigation....

TabNavigator Tutorial

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Button } from 'react-native';
import { TabNavigator } from 'react-navigation';

class HomeScreen extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.adjust, {flex: 2, backgroundColor: '#68bc43'}]}>
          <Text>Hello, Navigation!</Text>
        </View>
      </View>
    );
  }
}

class ChatScreen extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.adjust, {flex: 2, backgroundColor: '#c1bf38'}]}>
          <Text>Chat with Noone!</Text>
        </View>
      </View>
    );
  }
}

const SelfNavigator = TabNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});

const styles = StyleSheet.create({
  container:{
    flex: 1,
  },
  adjust: {
    justifyContent: 'center',
    alignItems: 'center',
  }
});

AppRegistry.registerComponent('SelfNavigator', () => SelfNavigator);