https://reactnavigation.org/ sample for headerless <=> header display. movie: https://twitter.com/Nkzn/status/861952997563092993

app.js

import { StackNavigator } from 'react-navigation';
import Login from './login';
import Timeline from './timeline';

const App = StackNavigator({
  Login: {
    screen: Login,
  },
  Timeline: {
    screen: Timeline,
  }
});

export default App;

index.ios.js

import { AppRegistry } from 'react-native';
import App from './src/app';

AppRegistry.registerComponent('Sample', () => App);

login.jsx

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

export default class extends Component {

  static navigationOptions = {
    header: null
  };

  _onPressLogin() {
    this.props.navigation.navigate('Timeline');
  }

  render() {
    return (
      <View style={styles.container}>
        <Button
          onPress={() => this._onPressLogin()}
          title="Login"
          color="#841584" />
      </View>
    );
  }
}

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

timeline.jsx

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

export default class extends Component {

  static navigationOptions = {
    title: "Timeline"
  };

  _onPressBack() {
    this.props.navigation.dispatch(NavigationActions.back());
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Timeline</Text>
        <Button
          onPress={() => this._onPressBack()}
          title="Back"
          color="#841584" />
      </View>
    );
  }
}

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