Fixed ScrollView not scrolling on IOS

App.js

@@ -4,17 +4,15 @@ import React, { Component } from 'react';
 import {
   ActivityIndicator,
   ListView,
-  Platform,
   StyleSheet,
   Text,
   View
 } from 'react-native';
+import {createStackNavigator} from 'react-navigation';
 import _ from 'lodash';
 import PetCell from './PetCell';
 import PetScreen from './PetScreen';
 
-import dismissKeyboard from 'dismissKeyboard';
-
 const API_KEY = 'cb55e117215c6eb73506d7164b0a3b6d';
 
 const convert = (obj) => {
@@ -33,7 +31,10 @@ const convert = (obj) => {
 
 let resultsCache = [];
 
-export default class App extends Component {
+class App extends Component {
+  static navigationOptions = {
+    title: 'Adopt Me',
+  };
 
   state = {
     isLoading: false,
@@ -82,20 +83,10 @@ export default class App extends Component {
   }
 
   selectPet = (pet: Object) => {
-    if (Platform.OS === 'ios') {
-      this.props.navigator.push({
-        title: pet.name,
-        component: PetScreen,
-        passProps: {pet},
-      });
-    } else {
-      dismissKeyboard();
-      this.props.navigator.push({
-        title: pet.name,
-        name: 'pet',
-        pet: pet,
-      });
-    }
+    this.props.navigation.navigate('PetScreen', {
+      pet: pet,
+      title: pet.name
+    })
   }
 
   onEndReached = () => {
@@ -157,9 +148,20 @@ export default class App extends Component {
 
 }
 
+export default createStackNavigator({
+    Home: {
+      screen: App,
+    },
+    PetScreen: {
+      screen: PetScreen,
+    },
+  },
+  {
+    initialRouteName: 'Home',
+  });
+
 const styles = StyleSheet.create({
   container: {
-    marginTop: Platform.OS === 'ios' ? 64 : 0,
     flex: 1,
     backgroundColor: 'white',
   },

PetScreen.js

@@ -13,16 +13,22 @@ import getImage from './getImage';
 import getBreeds from './getBreeds';
 
 export default class PetScreen extends Component {
+  static navigationOptions = ({ navigation }) => {
+    return {
+      title: navigation.getParam('title', ''),
+    };
+  };
 
-  render({ pet } = this.props) {
+  render({ navigation } = this.props) {
+    const pet = navigation.getParam('pet', {});
     const image = getImage(pet);
     const url = `https://www.petfinder.com/petdetail/${pet.id}`;
     return (
       <ScrollView contentContainerStyle={styles.contentContainer}>
         <View style={styles.imageContainer}>
           {image
-            ? <Image source={image} style={styles.petImage} />
-            : <View style={styles.noImage}><Text style={styles.noImageText}>No image</Text></View>
+              ? <Image source={image} style={[styles.petImage, {width:300, height:300}]} resizeMode={'contain'}/>
+              : <View style={styles.noImage}><Text style={styles.noImageText}>No image</Text></View>
           }
         </View>
         <View style={styles.mainSection}>
@@ -45,18 +51,12 @@ export default class PetScreen extends Component {
 
 const styles = StyleSheet.create({
   contentContainer: {
-    flex: 1,
+    flexGrow: 1,
   },
   imageContainer: {
     backgroundColor: '#dddddd',
     flex: 1,
-  },
-  petImage: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
+    alignItems: 'center'
   },
   noImage: {
     flex: 1,
@@ -67,6 +67,7 @@ const styles = StyleSheet.create({
     color: '#aaaaaa',
   },
   mainSection: {
+    backgroundColor: '#fff',
     flex: 1,
     padding: 10,
   },

index.android.js

@@ -4,75 +4,7 @@
  */
 'use strict';
 
-import React, { Component } from 'react';
-import {
-  AppRegistry,
-  BackAndroid,
-  Navigator,
-  StyleSheet,
-  ToolbarAndroid,
-  View,
-} from 'react-native';
-import App from './App';
-import PetScreen from './PetScreen';
+import { AppRegistry } from 'react-native';
+import App from './app';
 
-let _navigator;
-BackAndroid.addEventListener('hardwareBackPress', () => {
-  if (_navigator && _navigator.getCurrentRoutes().length > 1) {
-    _navigator.pop();
-    return true;
-  }
-  return false;
-});
-
-const RouteMapper = function(route, navigationOperations, onComponentRef) {
-  _navigator = navigationOperations;
-  if (route.name === 'app') {
-    return (
-      <App navigator={navigationOperations} />
-    );
-  } else if (route.name === 'pet') {
-    return (
-      <View style={{flex: 1}}>
-        <ToolbarAndroid
-          actions={[]}
-          onIconClicked={navigationOperations.pop}
-          style={styles.toolbar}
-          titleColor="white"
-          title={route.pet.name} />
-        <PetScreen
-          style={{flex: 1}}
-          navigator={navigationOperations}
-          pet={route.pet}
-        />
-      </View>
-    );
-  }
-};
-
-class AdoptMe extends Component {
-
-  render() {
-    return (
-      <Navigator
-        style={styles.container}
-        initialRoute={{name: 'app'}}
-        configureScene={() => Navigator.SceneConfigs.FadeAndroid}
-        renderScene={RouteMapper}
-      />
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-  },
-  toolbar: {
-    backgroundColor: '#a9a9a9',
-    height: 56,
-  },
-});
-
-AppRegistry.registerComponent('AdoptMe', () => AdoptMe);
+AppRegistry.registerComponent('AdoptMe', () => App);

index.ios.js

@@ -4,34 +4,7 @@
  */
 'use strict';
 
-import React, { Component } from 'react';
-import {
-  AppRegistry,
-  NavigatorIOS,
-  StyleSheet
-} from 'react-native';
-import App from './App';
+import { AppRegistry } from 'react-native';
+import App from './app';
 
-class AdoptMe extends Component {
-
-  render() {
-    return (
-      <NavigatorIOS
-        style={styles.container}
-        initialRoute={{
-          title: 'Adopt Me',
-          component: App,
-        }}
-      />
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-  }
-});
-
-AppRegistry.registerComponent('AdoptMe', () => AdoptMe);
+AppRegistry.registerComponent('AdoptMe', () => App);