ridgeO

# 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}

ridgeO

# Styles.js

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

ridgeO

# App.js

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

class GreenScreen extends Component {

ridgeO

# App.js

...
class GreenScreen extends Component {
  static navigationOptions = {
    title: 'Green'
  }
  render() {
    return(
      <View style={styles.green}>

ridgeO

# App.js

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

ridgeO

# App.js

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

ridgeO

# App.js

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

ridgeO

# Styles.js

...
green: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'green'
  },
  red: {

ridgeO

# App.js

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

ridgeO

# Styles.js

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

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