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 40608ed..e01ab1c 100644 --- a/PetScreen.js +++ b/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 ( {image - ? - : No image + ? + : No image } @@ -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, }, 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);