testing

App.js

@@ -1,11 +1,25 @@
 import React from 'react';
+import {createStackNavigator, createAppContainer} from 'react-navigation'
 import HomeScreen from './components/HomeScreen';
+import PlayerScreen from './components/PlayerScreen'
+
+
+
+const rootStack = createStackNavigator({
+    Home: HomeScreen,
+    Player: PlayerScreen
+  },{
+    initalRouteName: 'Home'
+  }
+) 
+
+const AppContainer = createAppContainer(rootStack)
+
 
 export default class App extends React.Component {
   render() {
     return (
-      <HomeScreen/>
+      <AppContainer/>
     );
   }
 }
-

babel.config.js

@@ -4,3 +4,5 @@ module.exports = function(api) {
     presets: ['babel-preset-expo'],
   };
 };
+
+

components/Featured.js

@@ -27,7 +27,9 @@ render(){
         return(<View/>)
     }
     return(
+
         <View style={styles.container}>
+
         <ImageBackground style={styles.featuredImage}
         source={{uri: this.state.featured.image}}>
             <Text style={styles.title}> {this.state.featured.title}

components/Header.js

@@ -2,6 +2,10 @@ import * as React from 'react'
 import {View, Text, StyleSheet, Image} from 'react-native'
 
 export default class Header extends React.Component{
+    constructor(props){
+        super(props)
+    }
+
     render(){
         return(
             <View style={styles.container}>

components/HomeScreen.js

@@ -1,22 +1,36 @@
 import React from 'react';
-import {View, StyleSheet} from 'react-native'
+import {View, StyleSheet, TouchableOpacity} from 'react-native'
 import { Constants } from 'expo'
 import Featured from './Featured'
 import Header from './Header'
-
+import PodScrollView from './PodScrollView'
 
 
 export default class HomeScreen extends React.Component {
+  constructor(props){
+    super(props)
+  }
+
   render() {
     return (
         <View style={styles.container}>
         <Header/>
-        <Featured/>
+        <TouchableOpacity
+          onPress={()=>{this.props.navigation.navigate('Player', 
+            {pod: "1"}
+          )}}
+        >
+           <Featured/>
+        </TouchableOpacity>
+        <PodScrollView/>
       </View>
     )
   }
 }
 
+
+
+
 const styles = StyleSheet.create(
     {
         container: {
@@ -27,4 +41,5 @@ const styles = StyleSheet.create(
 
         }
     }
-)
+)
+

components/PlayerScreen.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import {View, Text} from 'react-native'
+
+
+export default class PlayerScreen extends React.Component{
+    constructor(props){
+        super(props)
+        var {navigation} = this.props
+        this.state = {
+            podID: navigation.getParam('pod', '0')
+        }
+    }
+
+
+    render(){
+        return(
+            <View style={ {flex: 1, justifyContent: 'center', alignItem:'center'} } >
+                <Text>Detail Screen {this.state.podID} </Text>  
+            </View>
+        )
+    }
+
+    componentWillUnmount(){
+        console.log("UnMounted")
+    }
+
+}

package.json

@@ -9,7 +9,8 @@
   "dependencies": {
     "expo": "^32.0.5",
     "react": "16.5.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
+    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
+    "react-navigation": "^3.3.0"
   },
   "devDependencies": {
     "babel-preset-expo": "^5.0.0"