Use NavBar instead of ToolBarAndroid

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

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}

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

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

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;

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>

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"
   }
 }