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

customizing navigationOptions

static navigationOptions = {
    title: 'Welcome',
    headerTintColor: 'white',
    headerStyle: {
      backgroundColor: 'red',
    },
  };

StackNavigator Tutorial

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

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };

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

        <Button style={{flex:1}}
        onPress={() => navigate('Chat', {user: 'Khalid'})}
        title="Chat with.." />
      </View>
    );
  }
}

class ChatScreen extends React.Component {
  static navigationOptions = ({navigation}) =>({ 
    title: `Chat with ${navigation.state.params.user}`,
  });

  render() {
    const { params } = this.props.navigation.state;
    return (
      <View style={styles.container}>
        <View style={[styles.adjust, {flex: 2, backgroundColor: '#c1bf38'}]}>
          <Text>Chat with {params.user}</Text>
        </View>
      </View>
    );
  }
}

const SelfNavigation = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});

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

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