From 8e63aae87a7d3c5720c55d9d2ee479ecaa6ea840 Mon Sep 17 00:00:00 2001 From: Stanjhae Date: Thu, 6 Sep 2018 18:13:16 +0200 Subject: [PATCH 1/4] Fixed ScrollView not scrolling on IOS --- PetScreen.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/PetScreen.js b/PetScreen.js index 40608ed..27f3a30 100644 --- a/PetScreen.js +++ b/PetScreen.js @@ -13,15 +13,17 @@ import getImage from './getImage'; import getBreeds from './getBreeds'; export default class PetScreen extends Component { + state = {width: 0,height:0}; render({ pet } = this.props) { const image = getImage(pet); const url = `https://www.petfinder.com/petdetail/${pet.id}`; + Image.getSize(image, (width, height) => { this.setState({ width, height }) }); return ( {image - ? + ? : No image } @@ -51,13 +53,6 @@ const styles = StyleSheet.create({ backgroundColor: '#dddddd', flex: 1, }, - petImage: { - position: 'absolute', - top: 0, - left: 0, - bottom: 0, - right: 0, - }, noImage: { flex: 1, alignItems: 'center', From e7f9bb20f3d3375d5357761441a59aeb13dcc7e7 Mon Sep 17 00:00:00 2001 From: Stanjhae Date: Thu, 6 Sep 2018 18:16:03 +0200 Subject: [PATCH 2/4] Fixed ScrollView not scrolling on IOS --- PetScreen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/PetScreen.js b/PetScreen.js index 27f3a30..d7d023d 100644 --- a/PetScreen.js +++ b/PetScreen.js @@ -47,7 +47,7 @@ export default class PetScreen extends Component { const styles = StyleSheet.create({ contentContainer: { - flex: 1, + flexGrow: 1, }, imageContainer: { backgroundColor: '#dddddd', From 867be7b42372ab46ff36044bb97800ecaf08645f Mon Sep 17 00:00:00 2001 From: Stanjhae Date: Mon, 10 Sep 2018 20:51:09 +0200 Subject: [PATCH 3/4] Updated from Deprecated Navigator to react-navigation --- App.js | 40 +++++++++++++------------- PetScreen.js | 52 +++++++++++++++++++--------------- index.android.js | 74 ++---------------------------------------------- index.ios.js | 33 ++------------------- 4 files changed, 56 insertions(+), 143 deletions(-) diff --git a/App.js b/App.js index 29ab0c6..5556d12 100644 --- a/App.js +++ b/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', }, diff --git a/PetScreen.js b/PetScreen.js index d7d023d..b1460c9 100644 --- a/PetScreen.js +++ b/PetScreen.js @@ -13,33 +13,37 @@ import getImage from './getImage'; import getBreeds from './getBreeds'; export default class PetScreen extends Component { - state = {width: 0,height:0}; + 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}`; - Image.getSize(image, (width, height) => { this.setState({ width, height }) }); return ( - - - {image - ? - : No image - } - - - {pet.description} - {' '} - Age: {pet.age} - Breeds: {getBreeds(pet)} - Location: {pet.contact.city}, {pet.contact.state}, {pet.contact.zip} - Email: {pet.contact.email} - {' '} - Linking.openURL(url)}> - {url} - - - + + + {image + ? + : No image + } + + + {pet.description} + {' '} + Age: {pet.age} + Breeds: {getBreeds(pet)} + Location: {pet.contact.city}, {pet.contact.state}, {pet.contact.zip} + Email: {pet.contact.email} + {' '} + Linking.openURL(url)}> + {url} + + + ); } @@ -52,6 +56,7 @@ const styles = StyleSheet.create({ imageContainer: { backgroundColor: '#dddddd', flex: 1, + alignItems: 'center' }, noImage: { flex: 1, @@ -62,6 +67,7 @@ const styles = StyleSheet.create({ color: '#aaaaaa', }, mainSection: { + backgroundColor: '#fff', flex: 1, padding: 10, }, diff --git a/index.android.js b/index.android.js index 90019f9..5f99201 100644 --- a/index.android.js +++ b/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 ( - - ); - } else if (route.name === 'pet') { - return ( - - - - - ); - } -}; - -class AdoptMe extends Component { - - render() { - return ( - 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); diff --git a/index.ios.js b/index.ios.js index 1295fb1..5f99201 100644 --- a/index.ios.js +++ b/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 ( - - ); - } -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: 'white', - } -}); - -AppRegistry.registerComponent('AdoptMe', () => AdoptMe); +AppRegistry.registerComponent('AdoptMe', () => App); From f9f2450c288913891c52847f4cd479d275e7d5f5 Mon Sep 17 00:00:00 2001 From: Stanjhae Date: Mon, 10 Sep 2018 21:13:43 +0200 Subject: [PATCH 4/4] Update PetScreen.js --- PetScreen.js | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/PetScreen.js b/PetScreen.js index b1460c9..e01ab1c 100644 --- a/PetScreen.js +++ b/PetScreen.js @@ -24,26 +24,26 @@ export default class PetScreen extends Component { const image = getImage(pet); const url = `https://www.petfinder.com/petdetail/${pet.id}`; return ( - - - {image - ? - : No image - } - - - {pet.description} - {' '} - Age: {pet.age} - Breeds: {getBreeds(pet)} - Location: {pet.contact.city}, {pet.contact.state}, {pet.contact.zip} - Email: {pet.contact.email} - {' '} - Linking.openURL(url)}> - {url} - - - + + + {image + ? + : No image + } + + + {pet.description} + {' '} + Age: {pet.age} + Breeds: {getBreeds(pet)} + Location: {pet.contact.city}, {pet.contact.state}, {pet.contact.zip} + Email: {pet.contact.email} + {' '} + Linking.openURL(url)}> + {url} + + + ); }