Code snippets from ReactNav application as featured in http://platypus.is/posts/4

addBackButtonToRed.js

# App.js

...
class RedScreen extends Component {
  render() {
    return(
      <View style={styles.red}>
        <Text style={styles.text}>This is the Red Screen</Text>
        <TouchableHighlight
          style={styles.button}
          onPress={() => this.props.navigation.goBack()}
        >
          <Text style={styles.text}>Back to Green</Text>
        </TouchableHighlight>
      </View>
    );
  }
}
...

addButtonToStyles.js

# Styles.js

...
  button: {
    backgroundColor: '#1E90FF',
    padding: 20,
    borderRadius: 8,
    marginTop: 20
  }
...

addDrawerNavToApp.js

# App.js

...
class ReactNav extends Component {
  render() {
    return (
      <DrawerNav/>
    );
  }
}
...

addDrawerOpenButton.js

# App.js

...
class GreenScreen extends Component {
  render() {
    return(
      ....
        <TouchableHighlight
          style={styles.button}
          onPress={() => this.props.navigation.navigate('DrawerOpen')}
        >
          <Text style={styles.text}>Open Drawer</Text>
        </TouchableHighlight>
      ...
    );
  }
}
...

addHeaderTitles.js

# App.js

...
class GreenScreen extends Component {
  static navigationOptions = {
    title: 'Green'
  }
  render() {
    return(
      <View style={styles.green}>
        <Text style={styles.text}>This is the Green Screen</Text>
      </View>
    );
  }
}
...

addNestedNavToApp.js

# App.js

...
class ReactNav extends Component {
  render() {
    return (
      <NestedNav/>
    );
  }
}
...

addStackNavToApp.js

# App.js

...
class ReactNav extends Component {
  render() {
    return (
      <StackNav/>
    );
  }
}
...

addTabNavToApp.js

# App.js

...
class ReactNav extends Component {
  render() {
    return (
      <TabNav/>
    );
  }
}
...

addTouchableHighlightToGreen.js

# App.js

...
import {
...
  TouchableHighlight
} from 'react-native';
...

class GreenScreen extends Component {
  static navigationOptions = {
    title: 'Green'
  }
  render() {
    return(
      <View style={styles.green}>
        <Text style={styles.text}>This is the Green Screen</Text>
        <TouchableHighlight
          style={styles.button}
          onPress={() => this.props.navigation.navigate('Red')}
        >
          <Text style={styles.text}>Go to Red</Text>
        </TouchableHighlight>
      </View>
    );
  }
}
...

colorStyles.js

# Styles.js

...
green: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'green'
  },
  red: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red'
  },
  blue: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'blue'
  },
  purple: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'purple'
  },
  text: {
    color: 'white',
    fontSize: 20
  }
...

drawerNavCreate.js

# App.js

...
const DrawerNav = DrawerNavigator({
  Green: { screen: GreenScreen },
  Red: { screen: RedScreen },
  Blue: { screen: BlueScreen },
  Purple: { screen: PurpleScreen }
})
...

importApp.js

# index.ios.js and index.android.js

import './App.js'

importButton.js

# App.js

...
import {
...
  Button
} from 'react-native';
...

importDrawerNavigator.js

# App.js

...
import { StackNavigator, TabNavigator, DrawerNavigator } from 'react-navigation';
...

importTabNavigator.js

# App.js

...
import { StackNavigator, TabNavigator } from 'react-navigation';
...

initialApp.js

# App.js

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  Text
} from 'react-native';
import styles from './Styles.js';

class ReactNav extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello World</Text>
      </View>
    );
  }
}

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

initialColorScreens.js

# App.js

...
class GreenScreen extends Component {
  render() {
    return(
      <View style={styles.green}>
        <Text style={styles.text}>This is the Green Screen</Text>
      </View>
    );
  }
}

class RedScreen extends Component {
  render() {
    return(
      <View style={styles.red}>
        <Text style={styles.text}>This is the Red Screen</Text>
      </View>
    );
  }
}

class BlueScreen extends Component {
  render() {
    return(
      <View style={styles.blue}>
        <Text style={styles.text}>This is the Blue Screen</Text>
      </View>
    );
  }
}

class PurpleScreen extends Component {
  render() {
    return(
      <View style={styles.purple}>
        <Text style={styles.text}>This is the Purple Screen</Text>
      </View>
    );
  }
}
...

initialStyles.js

# Styles.js

'use strict';
import { StyleSheet } from 'react-native';

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

export default styles;

nestedNavCreate.js

# App.js

...
const NestedNav = StackNavigator(
  {
    Landing: { screen: GreenScreen },
    Drawer: { screen: DrawerNavigator(
      {
        Home: { screen: TabNavigator(
          {
            Red: { screen: RedScreen },
            Blue: { screen: BlueScreen }
          },
          {
            tabBarOptions: {
              labelStyle: {
                fontSize: 20,
                marginBottom: 10
              }
            }
          }
        )},
        Purple: { screen: PurpleScreen }
      }
    ) }
  },
  { headerMode: 'none' }
)
...

redScreenNavOptions.js

# App.js

...
RedScreen.navigationOptions = props => {
  const { navigation } = props;
  return {
    headerTitle: 'Red',
    headerRight: (<Button title='Purple' onPress={() => navigation.navigate('Purple')}/>),
    headerLeft: (<Button title='Blue' onPress={() => navigation.navigate('Blue')}/>)
  }
}
...

stackNavCreate.js

# App.js

...
const StackNav = StackNavigator({
  Green: { screen: GreenScreen },
  Red: { screen: RedScreen},
  Blue: { screen: BlueScreen },
  Purple: { screen: PurpleScreen }
})
...

stackNavImport.js

# App.js

...
import { StackNavigator } from 'react-navigation';
...

tabNavCreate.js

# App.js

...
const TabNav = TabNavigator(
  {
    Green: { screen: GreenScreen },
    Red: { screen: RedScreen },
    Blue: { screen: BlueScreen },
    Purple: { screen: PurpleScreen }
  },
  {
    tabBarOptions: {
      labelStyle: {
        fontSize: 20,
        marginBottom: 10
      }
    }
  }
)
...