From 2cfd1aecb113a95808ee044aae052527da46dd4b Mon Sep 17 00:00:00 2001
From: Manatsawin Hanmongkolchai <manatsawin+git@gmail.com>
Date: Mon, 28 Mar 2016 22:17:09 +0700
Subject: [PATCH] Changed slide deck to use react-native-page-swiper

---
 .gitmodules                         |  3 +++
 README.md                           |  3 +++
 components/Editor/view.js           |  6 +-----
 components/ImagePicker/view.js      |  1 -
 components/SlideDeck/view.js        | 30 ++++++++++++++++-------------
 components/navbarstyle.js           |  5 ++---
 components/react-native-page-swiper |  1 +
 7 files changed, 27 insertions(+), 22 deletions(-)
 create mode 100644 .gitmodules
 create mode 160000 components/react-native-page-swiper

diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..bef9627
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "components/react-native-page-swiper"]
+	path = components/react-native-page-swiper
+	url = git@github.com:fixt/react-native-page-swiper.git
diff --git a/README.md b/README.md
index c92f24a..dd7fc24 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,9 @@
 
 This project from mobile software development class.
 
+## Note on react-native-page-swiper
+Remove .babelrc before building. The npm version is too old and does not offer `pager` property.
+
 ## Goals
 ### Project proposal stage
 - [x] Slide layout
diff --git a/components/Editor/view.js b/components/Editor/view.js
index b8a915d..94fe965 100644
--- a/components/Editor/view.js
+++ b/components/Editor/view.js
@@ -13,10 +13,6 @@ import NavBar, { NavButton, NavTitle, NavGroup } from 'react-native-nav'
 import NavBarStyle from '../navbarstyle';
 
 var styles = StyleSheet.create({
-	root: {
-		flex: 1,
-		alignItems: 'stretch'
-	},
 });
 
 export default class Editor extends Component {
@@ -60,7 +56,7 @@ export default class Editor extends Component {
 			toolbar = null;
 		}
 		return (
-			<View style={styles.root}>
+			<View style={{flex: 1}}>
 				{toolbar}
 				<StatusBar hidden={this.state.preview} animated={false} />
 				<SlideDeck slides={[
diff --git a/components/ImagePicker/view.js b/components/ImagePicker/view.js
index 4e84c6d..8c5cdc5 100644
--- a/components/ImagePicker/view.js
+++ b/components/ImagePicker/view.js
@@ -22,7 +22,6 @@ var styles = StyleSheet.create({
 		padding: 5,
 	},
 	search: {
-		elevation: 5,
 		height: 30,
 		width: 300,
 		backgroundColor: 'white',
diff --git a/components/SlideDeck/view.js b/components/SlideDeck/view.js
index d785029..7891e4e 100644
--- a/components/SlideDeck/view.js
+++ b/components/SlideDeck/view.js
@@ -3,10 +3,11 @@ import React, {
 	StyleSheet,
 	Text,
 	View,
-	ViewPagerAndroid,
-	LayoutAnimation
+	LayoutAnimation,
+	Dimensions
 } from 'react-native';
 import Slide from '../Slide';
+import Swiper from '../react-native-page-swiper/src';
 
 var styles = StyleSheet.create({
 	deck: {
@@ -26,7 +27,7 @@ export default class SlideDeck extends Component {
 
 	componentWillReceiveProps(props){
 		if(this.pager && props.presenting != this.props.presenting){
-			this.pager.setPageWithoutAnimation(0);
+			this.pager.goToPage(0);
 		}
 	}
 
@@ -42,11 +43,9 @@ export default class SlideDeck extends Component {
 			);
 		});
 
-		let eop = null;
-
 		if(this.props.presenting){
-			eop = (
-				<View>
+			slides.push((
+				<View key="eop">
 					<Slide 
 					width={this.state.width} height={this.state.height}
 					editable={false} presenting={this.props.presenting}
@@ -56,19 +55,24 @@ export default class SlideDeck extends Component {
 						text2Color: 'white'
 					}} />
 				</View>
-			);
+			));
+		}
+
+		let {width, height} = Dimensions.get('window');
+		if(height > width){
+			width = height;
 		}
 
 		return (
 			<View style={styles.deck} onLayout={this._onLayout}>
-				<ViewPagerAndroid
-					initialPage={0}
+				<Swiper
+					index={0}
+					pager={false}
 					style={styles.slider}
-					keyboardDismissMode="on-drag"
+					springFriction={10}
 					ref={(pager) => this.pager = pager}>
 					{slides}
-					{eop}
-				</ViewPagerAndroid>
+				</Swiper>
 			</View>
 		);
 	}
diff --git a/components/navbarstyle.js b/components/navbarstyle.js
index 956fa49..9f4545c 100644
--- a/components/navbarstyle.js
+++ b/components/navbarstyle.js
@@ -11,8 +11,8 @@ export default StyleSheet.create({
 		color: '#ffffff',
 	},
 	navIcon: {
-		width: Platform.OS == 'ios' ? 32 : 48,
-		height: Platform.OS == 'ios' ? 32 : 48,
+		width: 32,
+		height: 32,
 	},
 	navButton: {
 		paddingLeft: 5,
@@ -20,6 +20,5 @@ export default StyleSheet.create({
 	},
 	navBar: {
 		backgroundColor: '#00aa00',
-		elevation: 4,
 	},
 });
\ No newline at end of file
diff --git a/components/react-native-page-swiper b/components/react-native-page-swiper
new file mode 160000
index 0000000..f7ff516
--- /dev/null
+++ b/components/react-native-page-swiper
@@ -0,0 +1 @@
+Subproject commit f7ff5162637eb1946cc92381b15893298472b656