Changed slide deck to use react-native-page-swiper

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "components/react-native-page-swiper"]
+	path = components/react-native-page-swiper
+	url = [email protected]:fixt/react-native-page-swiper.git

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

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={[

components/ImagePicker/view.js

@@ -22,7 +22,6 @@ var styles = StyleSheet.create({
 		padding: 5,
 	},
 	search: {
-		elevation: 5,
 		height: 30,
 		width: 300,
 		backgroundColor: 'white',

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>
 		);
 	}

components/navbarstyle.js

@@ -11,15 +11,14 @@ 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,
 		paddingRight: 5,
 	},
 	navBar: {
 		backgroundColor: '#00aa00',
-		elevation: 4,
 	},
 });