From 259741e90403572da774f8f67cf7e750ac6e71b4 Mon Sep 17 00:00:00 2001
From: Manatsawin Hanmongkolchai <manatsawin+git@gmail.com>
Date: Mon, 28 Mar 2016 21:17:15 +0700
Subject: [PATCH] Use NavBar instead of ToolBarAndroid

---
 components/Editor/.png                     |   0
 components/Editor/view.js                  |  72 ++++++++-------------
 components/FileList/view.js                |  30 ++++-----
 components/ImagePicker/view.js             |  51 +++++++++++----
 components/ic_navigate_before_white.png    | Bin 0 -> 136 bytes
 components/ic_navigate_before_white@2x.png | Bin 0 -> 197 bytes
 components/ic_navigate_before_white@3x.png | Bin 0 -> 242 bytes
 components/ic_navigate_before_white@4x.png | Bin 0 -> 324 bytes
 components/navbarstyle.js                  |  25 +++++++
 ios/koandeck.xcodeproj/project.pbxproj     |  10 +--
 ios/koandeck/Base.lproj/LaunchScreen.xib   |   4 +-
 package.json                               |   1 +
 12 files changed, 112 insertions(+), 81 deletions(-)
 delete mode 100644 components/Editor/.png
 create mode 100644 components/ic_navigate_before_white.png
 create mode 100644 components/ic_navigate_before_white@2x.png
 create mode 100644 components/ic_navigate_before_white@3x.png
 create mode 100644 components/ic_navigate_before_white@4x.png
 create mode 100644 components/navbarstyle.js

diff --git a/components/Editor/.png b/components/Editor/.png
deleted file mode 100644
index e69de29..0000000
diff --git a/components/Editor/view.js b/components/Editor/view.js
index 401a8a6..b8a915d 100644
--- a/components/Editor/view.js
+++ b/components/Editor/view.js
@@ -2,25 +2,21 @@ import React, {
 	Component,
 	View,
 	StyleSheet,
-	ToolbarAndroid,
 	StatusBar,
+	Platform,
+	Image
 } from 'react-native';
 import Orientation from 'react-native-orientation';
 import BackStack from '../BackStack';
 import SlideDeck from '../SlideDeck';
-
-var navBgColor = '#00aa00';
+import NavBar, { NavButton, NavTitle, NavGroup } from 'react-native-nav'
+import NavBarStyle from '../navbarstyle';
 
 var styles = StyleSheet.create({
 	root: {
 		flex: 1,
 		alignItems: 'stretch'
 	},
-	toolbar: {
-		height: 56,
-		backgroundColor: navBgColor,
-		elevation: 4
-	}
 });
 
 export default class Editor extends Component {
@@ -48,38 +44,25 @@ export default class Editor extends Component {
 	render(){
 		let toolbar = [];
 		if(!this.state.preview){
-			toolbar = [
-				<ToolbarAndroid
-					key="toolbar"
-					title={this.props.route.file}
-					titleColor="white"
-					actions={[{
-						title: 'Add slide',
-						show: 'always',
-						icon: require('./ic_add_box_white.png'),
-					}, {
-						title: 'Delete',
-						show: 'always',
-						icon: require('./ic_delete_white.png'),
-					}, {
-						title: 'Change background',
-						show: 'always',
-						icon: require('./ic_image_white.png'),
-					}, {
-						title: 'Preview',
-						show: 'always',
-						icon: require('./ic_play_arrow_white.png'),
-					}]}
-					style={styles.toolbar}
-					onActionSelected={this._onActionSelected} />,
-				<StatusBar key="statusbar" hidden={false} backgroundColor={navBgColor} animated={false} />
-			];
+			toolbar = (
+				<NavBar style={NavBarStyle}>
+					<NavButton onPress={this._onPreviousButton}><Image style={NavBarStyle.navIcon} source={require('../ic_navigate_before_white.png')} /></NavButton>
+					<NavTitle style={NavBarStyle.title}>{this.props.route.file}</NavTitle>
+					<NavGroup>
+						<NavButton style={NavBarStyle.navButton}><Image style={NavBarStyle.navIcon} source={require('./ic_add_box_white.png')} /></NavButton>
+						<NavButton style={NavBarStyle.navButton}><Image style={NavBarStyle.navIcon} source={require('./ic_delete_white.png')} /></NavButton>
+						<NavButton onPress={this._onImagePickerButton} style={NavBarStyle.navButton}><Image style={NavBarStyle.navIcon} source={require('./ic_image_white.png')} /></NavButton>
+						<NavButton onPress={this._onPreviewButton} style={NavBarStyle.navButton}><Image style={NavBarStyle.navIcon} source={require('./ic_play_arrow_white.png')} /></NavButton>
+					</NavGroup>
+				</NavBar>
+			);
 		}else{
-			toolbar = [<StatusBar key="statusbar" hidden={true} animated={false} />];
+			toolbar = null;
 		}
 		return (
 			<View style={styles.root}>
 				{toolbar}
+				<StatusBar hidden={this.state.preview} animated={false} />
 				<SlideDeck slides={[
 					{text1: 'Hello world!!', text2: 'This is example of koan deck'},
 					{text1: 'Slide 2', text2: 'Woah this is awesome'},
@@ -88,14 +71,15 @@ export default class Editor extends Component {
 		);
 	}
 
-	_onActionSelected = (pos) => {
-		switch(pos){
-		case 2:
-			this.props.navigator.push({name: 'ImagePicker', index: this.props.index + 1});
-			break;
-		case 3:
-			this.setState({preview: true});
-			break;
-		}
+	_onImagePickerButton = () => {
+		this.props.navigator.push({name: 'ImagePicker', index: this.props.index + 1});
+	};
+
+	_onPreviewButton = () => {
+		this.setState({preview: true});
+	};
+
+	_onPreviousButton = () => {
+		this.props.navigator.pop();
 	};
 }
\ No newline at end of file
diff --git a/components/FileList/view.js b/components/FileList/view.js
index 6a78d50..122b408 100644
--- a/components/FileList/view.js
+++ b/components/FileList/view.js
@@ -1,17 +1,18 @@
 import React, {
 	Component,
 	View,
-	ToolbarAndroid,
 	ListView,
 	Text,
 	StatusBar,
 	StyleSheet,
 	TouchableNativeFeedback,
-	RecyclerViewBackedScrollView
+	RecyclerViewBackedScrollView,
+	Image,
+	Platform
 } from 'react-native';
+import NavBar, { NavButton, NavTitle, NavGroup } from 'react-native-nav'
 import TouchableFeedback from '../TouchableFeedback';
-
-var navBgColor = '#00aa00';
+import NavBarStyle from '../navbarstyle';
 
 var styles = StyleSheet.create({
 	row: {
@@ -31,11 +32,6 @@ var styles = StyleSheet.create({
 		flex: 1,
 		alignItems: 'stretch'
 	},
-	toolbar: {
-		height: 56,
-		backgroundColor: navBgColor,
-		elevation: 4
-	}
 });
 
 export default class FileList extends Component {
@@ -57,16 +53,12 @@ export default class FileList extends Component {
 	render(){
 		return (
 			<View style={styles.root}>
-				<ToolbarAndroid
-					title="Koan Deck"
-					titleColor="white"
-					actions={[{
-						title: 'Add',
-						show: 'always',
-						icon: require('./ic_add_white.png'),
-					}]}
-					style={styles.toolbar} />
-				<StatusBar backgroundColor={navBgColor} />
+				<NavBar style={NavBarStyle}>
+					<NavTitle style={NavBarStyle.title}>Koan Deck</NavTitle>
+					<NavGroup>
+						<NavButton style={NavBarStyle.navButton}><Image style={NavBarStyle.navIcon} source={require('./ic_add_white.png')} /></NavButton>
+					</NavGroup>
+				</NavBar>
 				<ListView
 					pageSize={100}
 					dataSource={this.state.dataSource}
diff --git a/components/ImagePicker/view.js b/components/ImagePicker/view.js
index eb17e1d..4e84c6d 100644
--- a/components/ImagePicker/view.js
+++ b/components/ImagePicker/view.js
@@ -6,22 +6,28 @@ import React, {
 	View,
 	Image,
 	ScrollView,
-	TouchableHighlight
+	TouchableHighlight,
+	Dimensions
 } from 'react-native';
+import NavBar, { NavButton, NavTitle, NavGroup } from 'react-native-nav'
 import GridView from 'react-native-grid-view';
 import Unsplash from '../unsplash';
+import NavBarStyle from '../navbarstyle';
 
 var styles = StyleSheet.create({
 	container: {
 		flex: 1,
 	},
 	gallery: {
-		width: 200,
-		height: 200,
 		padding: 5,
 	},
 	search: {
 		elevation: 5,
+		height: 30,
+		width: 300,
+		backgroundColor: 'white',
+		borderRadius: 5,
+		padding: 5,
 	},
 	scroll: {
 		backgroundColor: '#424242',
@@ -42,20 +48,28 @@ export default class ImagePicker extends Component {
 		page: 1,
 	};
 	loading = false;
+	perRow = 3;
 
 	render(){
 		return (
 			<View style={styles.container}>
-				<TextInput
-					style={styles.search}
-					value={this.state.query}
-					onChangeText={this.onQueryChange}
-					onSubmitEditing={this.onSearch}
-					placeholder="Search Unsplash. Use comma to separate terms" />
+				<NavBar style={NavBarStyle}>
+					<NavButton onPress={this._onPreviousButton}><Image style={NavBarStyle.navIcon} source={require('../ic_navigate_before_white.png')} /></NavButton>
+					<TextInput
+						style={styles.search}
+						value={this.state.query}
+						onChangeText={this.onQueryChange}
+						onSubmitEditing={this.onSearch}
+						autoFocus={true}
+						autoCapitalize="none"
+						returnKeyType="search"
+						placeholder="Use comma to separate terms" />
+					<NavGroup />
+				</NavBar>
 				<GridView
 					style={styles.scroll}
 					items={this.state.images}
-					itemsPerRow={3}
+					itemsPerRow={this.perRow}
 					renderItem={this.renderItem}
 					onEndReached={this.state.end ? null : this.loadMore}
 					/>
@@ -64,11 +78,22 @@ export default class ImagePicker extends Component {
 	}
 
 	renderItem = (item) => {
+		let {width, height} = Dimensions.get('window');
+
+		// react native does not update dimensions!
+		if(height > width){
+			width = height;
+		}
+		
+		let imageWidth = width / this.perRow;
+
 		return (
 			<TouchableHighlight onPress={() => {this.onSelect(item)}} key={item.id} underlayColor={item.color}>
 				<Image 
 					style={[styles.gallery, {
-						backgroundColor: item.color
+						backgroundColor: item.color,
+						width: imageWidth,
+						height: imageWidth,
 					}]}
 					source={{uri: item.urls.small}}>
 					<Text style={styles.credit}>{item.user.name}</Text>
@@ -112,4 +137,8 @@ export default class ImagePicker extends Component {
 	onSelect(item){
 		console.log(item);
 	}
+
+	_onPreviousButton = () => {
+		this.props.navigator.pop();
+	};
 }
\ No newline at end of file
diff --git a/components/ic_navigate_before_white.png b/components/ic_navigate_before_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..62f3590eef334980b01a178f9479afb3a389d383
GIT binary patch
literal 136
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA0wn)(8}a}te@_?3kch)?&mQD$FyLW1_?jz7
zLP);Fn@?2YlA~SwlZ@pJv78L2PM!GhtR09h&wjsiqPqXSV-MaR-FzY`KIvk_86Ccp
jJ9j+!teeN^AgRCaAJ3g9ySr}zjb`w4^>bP0l+XkKZbLLy

literal 0
HcmV?d00001

diff --git a/components/ic_navigate_before_white@2x.png b/components/ic_navigate_before_white@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..a68bc5fb5f3f79165ed908b0443fb85cf623faa4
GIT binary patch
literal 197
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD0wg^q?%xcgdOTemLn>~)J-?Cnkb?;8!FYx*
z8NV2c_cE5sZgVNvq$8-%#BMD5CX5lN_Q3V8*P_e*txA2qT#x5xC->|>TUzJ-xvFXX
z{~G_Nr>Cdu$M38831<9X&#n`(;X~TPyn{`x*AHE6V&(2`XXO^FOHEwm6=xAX?d+kY
ppLn=Ce;z&*vvXQ&HrVvz^WNAq$9(*;<T%hS22WQ%mvv4FO#ritQs)2w

literal 0
HcmV?d00001

diff --git a/components/ic_navigate_before_white@3x.png b/components/ic_navigate_before_white@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..42a4e219e51fd5b580e9b8207e470ca59f0dd26e
GIT binary patch
literal 242
zcmeAS@N?(olHy`uVBq!ia0vp^6F``Q1xWh(YZ(Knot`d^Ar-gYUhoucFc4tfz~wAq
zT^c9H_U}%nlHyuMpb7}^$^LRtcgei|MK>0&coP`%O+%|%WU6h~DLL2F^XV5Suc`X-
z;^JcWemPrQj0p;^T_T!6U$!suou~w6nz&zF=K*2QTKpnl350z%aEpf5IX8_<!rgkt
uD?R*mcJ(e%vfcQ?aAMaNm}3|i>_0J0O<ntZTK??oAVE)8KbLh*2~7Z{$XX)+

literal 0
HcmV?d00001

diff --git a/components/ic_navigate_before_white@4x.png b/components/ic_navigate_before_white@4x.png
new file mode 100644
index 0000000000000000000000000000000000000000..7d3ec64799f97a840262850f27b1ba0f661a6483
GIT binary patch
literal 324
zcmeAS@N?(olHy`uVBq!ia0vp^2SAvG8AvYpRA>UER04cLT!Hj|LSPGL?@ORM?vfzC
zV1|ZwM#k^!YHB6xV;D{-1BH)xx;TbZ#J#<>H<Q^>r1j!VzA5_yyr%4A5nXs>rgs6S
zo~v%pLHmkX#!fo3^>;BH{3*3#j_3U?)+(NpK<I0%M1V5S3}f#VmhKW0RIijKxG+XK
z-DPtV0CJ2Bk{WatUTaL2`0!JR?F}Q)Iyhir-l*<$Lyidu4k`Ls*tRt^G!*y=@0-`$
z(C}fF+Mew?50|IDiag-;!*~82`=~Wh41tHDe>^@`?tM+%Va>1Xo4-<-9l%cT{Kfus
W^Xz@^6+ayWneOT8=d#Wzp$Pzz42lW>

literal 0
HcmV?d00001

diff --git a/components/navbarstyle.js b/components/navbarstyle.js
new file mode 100644
index 0000000..956fa49
--- /dev/null
+++ b/components/navbarstyle.js
@@ -0,0 +1,25 @@
+import React, {
+	StyleSheet,
+	Platform
+} from 'react-native';
+
+export default StyleSheet.create({
+	statusBar: {
+		backgroundColor: '#00aa00',
+	},
+	title: {
+		color: '#ffffff',
+	},
+	navIcon: {
+		width: Platform.OS == 'ios' ? 32 : 48,
+		height: Platform.OS == 'ios' ? 32 : 48,
+	},
+	navButton: {
+		paddingLeft: 5,
+		paddingRight: 5,
+	},
+	navBar: {
+		backgroundColor: '#00aa00',
+		elevation: 4,
+	},
+});
\ No newline at end of file
diff --git a/ios/koandeck.xcodeproj/project.pbxproj b/ios/koandeck.xcodeproj/project.pbxproj
index 8088234..3c29f0a 100644
--- a/ios/koandeck.xcodeproj/project.pbxproj
+++ b/ios/koandeck.xcodeproj/project.pbxproj
@@ -117,7 +117,7 @@
 		00E356F21AD99517003FC87E /* koandeckTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = koandeckTests.m; sourceTree = "<group>"; };
 		139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = "<group>"; };
 		139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = "<group>"; };
-		13B07F961A680F5B00A75B9A /* koandeck.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = koandeck.app; sourceTree = BUILT_PRODUCTS_DIR; };
+		13B07F961A680F5B00A75B9A /* Koan Deck.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "Koan Deck.app"; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = koandeck/AppDelegate.h; sourceTree = "<group>"; };
 		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = koandeck/AppDelegate.m; sourceTree = "<group>"; };
 		13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = "<group>"; };
@@ -303,7 +303,7 @@
 		83CBBA001A601CBA00E9B192 /* Products */ = {
 			isa = PBXGroup;
 			children = (
-				13B07F961A680F5B00A75B9A /* koandeck.app */,
+				13B07F961A680F5B00A75B9A /* Koan Deck.app */,
 				00E356EE1AD99517003FC87E /* koandeckTests.xctest */,
 			);
 			name = Products;
@@ -354,7 +354,7 @@
 			);
 			name = "Koan Deck";
 			productName = "Hello World";
-			productReference = 13B07F961A680F5B00A75B9A /* koandeck.app */;
+			productReference = 13B07F961A680F5B00A75B9A /* Koan Deck.app */;
 			productType = "com.apple.product-type.application";
 		};
 /* End PBXNativeTarget section */
@@ -639,7 +639,7 @@
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_BUNDLE_IDENTIFIER = th.in.whs.koandeck;
-				PRODUCT_NAME = koandeck;
+				PRODUCT_NAME = "Koan Deck";
 				TARGETED_DEVICE_FAMILY = "1,2";
 			};
 			name = Debug;
@@ -658,7 +658,7 @@
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_BUNDLE_IDENTIFIER = th.in.whs.koandeck;
-				PRODUCT_NAME = koandeck;
+				PRODUCT_NAME = "Koan Deck";
 				TARGETED_DEVICE_FAMILY = "1,2";
 			};
 			name = Release;
diff --git a/ios/koandeck/Base.lproj/LaunchScreen.xib b/ios/koandeck/Base.lproj/LaunchScreen.xib
index b823fc9..5ab7132 100644
--- a/ios/koandeck/Base.lproj/LaunchScreen.xib
+++ b/ios/koandeck/Base.lproj/LaunchScreen.xib
@@ -15,13 +15,13 @@
                 <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
                     <rect key="frame" x="20" y="439" width="441" height="21"/>
                     <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
                     <nil key="highlightedColor"/>
                 </label>
                 <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="koandeck" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
                     <rect key="frame" x="20" y="140" width="441" height="43"/>
                     <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
-                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
                     <nil key="highlightedColor"/>
                 </label>
             </subviews>
diff --git a/package.json b/package.json
index b4f069a..0db1a77 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "react": "^0.14.7",
     "react-native": "^0.22.2",
     "react-native-grid-view": "^0.3.7",
+    "react-native-nav": "^1.0.9",
     "react-native-orientation": "^1.14.0"
   }
 }