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

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

import './App.js'

ridgeO

# App.js

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  Text
} from 'react-native';

ridgeO

# Styles.js

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

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

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

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

ridgeO

# App.js

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

ridgeO

# App.js

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

ridgeO

# App.js

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

ridgeO

# App.js

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