Updated Deprecated Navigator to React-Navigation

App.js

@@ -1,45 +1,19 @@
 import React, { Component } from 'react';
-import {
-  Navigator,    // Allows to navigate between different screens
-  StatusBar     // Allows to hide the status bar
-} from 'react-native';
+import { createStackNavigator } from 'react-navigation';
 import List from './List';
 import Movie from './Movie';
 
-const RouteMapper = (route, navigationOperations, onComponentRef) => {
-  if (route.name === 'list') {
-    return (
-      <List navigator={navigationOperations} />
-    );
-  } else if (route.name === 'movie') {
-    return (
-      <Movie
-        // Pass movie object passed with route down as a prop
-        movie={route.movie}
-        // Pass navigationOperations as navigator prop
-        navigator={navigationOperations}
-      />
-    );
-  }
-};
-
-export default class App extends Component {
-  componentDidMount() {
-    // Hide the status bar
-    StatusBar.setHidden(true);
-  }
-
-  render() {
-    return (
-      // Handle navigation between screens
-      <Navigator
-        // Default to list route
-        initialRoute={{name: 'list'}}
-        // Use FloatFromBottom transition between screens
-        configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromBottom}
-        // Pass a route mapper functions
-        renderScene={RouteMapper}
-      />
-    );
-  }
-}
+export default createStackNavigator({
+    Home: {
+      screen: List,
+    },
+    Movie: {
+      screen: Movie,
+    },
+  },
+  {
+    initialRouteName: 'Home',
+    navigationOptions: {
+      header: null,
+    },
+  });

List.js

@@ -1,9 +1,11 @@
 import React, { Component } from 'react';
 import {
   ListView,       // Renders a list
-  RefreshControl  // Refreshes the list on pull down
+  RefreshControl,  // Refreshes the list on pull down
+  StatusBar
 } from 'react-native';
 import Row from './Row';
+import Movie from './Movie';
 
 const demoData = [
   {
@@ -96,6 +98,7 @@ export default class List extends Component {
    * Call _fetchData after component has been mounted
    */
   componentDidMount() {
+    StatusBar.setHidden(true);
     // Fetch Data
     this._fetchData();
   }
@@ -125,8 +128,7 @@ export default class List extends Component {
         // Pass a function to handle row presses
         onPress={()=>{
           // Navigate to a separate movie detail screen
-          this.props.navigator.push({
-            name: 'movie',
+          this.props.navigation.navigate('Movie',{
             movie: movie,
           });
         }}

Movie.js

@@ -5,19 +5,21 @@ import {
   StyleSheet,         // CSS-like styles
   Text,               // Renders text
   TouchableOpacity,   // Handles button presses
-  View                // Container component
+  View,
+  ImageBackground                // Container component
 } from 'react-native';
 
 export default class Movie extends Component {
 
   // Extract movie object passed as a prop from Row component
-  render({ movie } = this.props) {
+  render({ navigation } = this.props) {
+    const movie = navigation.getParam('movie', {});
     // Extract values from movie object
     const { title, rating, large, plot } = movie;
     return (
       <View style={styles.container}>
         {/* Background image with large image */}
-        <Image source={{uri: large}} style={styles.imageBackground}>
+        <ImageBackground source={{uri: large}} style={styles.imageBackground}>
           {/* Use ScrollView in case plot is too large to fit on the screen */}
           <ScrollView
             style={{flex: 1}}
@@ -44,7 +46,7 @@ export default class Movie extends Component {
             {/* Press handler */}
             <TouchableOpacity
               // Go to the previous screen
-              onPress={() => {this.props.navigator.pop();}}
+              onPress={() => {this.props.navigation.pop();}}
               // Dim button a little bit when pressed
               activeOpacity={0.7}
               // Pass button style
@@ -53,7 +55,7 @@ export default class Movie extends Component {
               <Text style={styles.buttonText}>CLOSE</Text>
             </TouchableOpacity>
           </View>
-        </Image>
+        </ImageBackground>
       </View>
     );
   }

Row.js

@@ -4,7 +4,8 @@ import {
   StyleSheet,         // CSS-like styles
   Text,               // Renders text
   TouchableOpacity,   // Handles row presses
-  View                // Container component
+  View,                // Container component
+  ImageBackground
 } from 'react-native';
 import Dimensions from 'Dimensions';
 
@@ -28,7 +29,7 @@ export default class Row extends Component {
         activeOpacity={0.7}
       >
         {/* Background image */}
-        <Image source={{uri: image}} style={styles.imageBackground}>
+        <ImageBackground source={{uri: image}} style={styles.imageBackground}>
           {/* Title */}
           <Text style={[styles.text, styles.title]}>{title.toUpperCase()}</Text>
           {/* Rating */}
@@ -41,7 +42,7 @@ export default class Row extends Component {
             {/* Value */}
             <Text style={[styles.text, styles.value]}>{rating}%</Text>
           </View>
-        </Image>
+        </ImageBackground>
       </TouchableOpacity>
     );
   }
@@ -51,7 +52,8 @@ export default class Row extends Component {
 const styles = StyleSheet.create({
   // Row
   row: {
-    paddingBottom: 4,                   // Add padding at the bottom
+    paddingBottom: 25,                   // Add padding at the bottom
+    marginTop:-20
   },
   // Background image
   imageBackground: {