Layout chooser

components/App/view.js

@@ -9,13 +9,15 @@ import BackStack from '../BackStack';
 import Editor from '../Editor';
 import ImagePicker from '../ImagePicker';
 import ImagePreview from '../ImagePreview';
+import Layout from '../Layout';
 
 export default class App extends Component {
 	static routes = {
 		FileList: FileList,
 		Editor: Editor,
 		ImagePicker: ImagePicker,
 		ImagePreview: ImagePreview,
+		Layout: Layout,
 	};
 
 	componentDidMount(){

components/Editor/view.js

@@ -57,6 +57,7 @@ export default class Editor extends Component {
 					<NavGroup>
 						<NavButton style={NavBarStyle.navButton} onPress={this._onAddButton}><Image style={NavBarStyle.navIcon} source={require('./ic_add_box_white.png')} /></NavButton>
 						<NavButton style={NavBarStyle.navButton} onPress={this._onDeleteButton}><Image style={NavBarStyle.navIcon} source={require('./ic_delete_white.png')} /></NavButton>
+						<NavButton style={NavBarStyle.navButton} onPress={this._onLayoutButton}><Image style={NavBarStyle.navIcon} source={require('./ic_featured_play_list_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>
@@ -127,4 +128,11 @@ export default class Editor extends Component {
 			this.file.slides[this.state.page].image = url;
 		});
 	};
+
+	_onLayoutButton = () => {
+		this.props.navigator.push({
+			name: 'Layout', index: this.props.index + 1,
+			slide: this.file.slides[this.state.page],
+		});
+	};
 }

components/Layout/package.json

@@ -0,0 +1,5 @@
+{
+	"name": "layout",
+	"private": true,
+	"main": "view.js"
+}

components/Layout/view.js

@@ -0,0 +1,66 @@
+import React, {
+	Component,
+	Text,
+	Image,
+	View,
+	StyleSheet,
+} from 'react-native';
+import NavBar, { NavButton, NavTitle, NavGroup } from 'react-native-nav';
+import NavBarStyle from '../navbarstyle';
+import TouchableFeedback from '../TouchableFeedback';
+import Realm from '../models';
+
+var styles = StyleSheet.create({
+	row: {
+		flexDirection: 'row',
+		flex: 1,
+	},
+	item: {
+		flex: 1,
+		padding: 10,
+		height: 50,
+	},
+});
+
+export default class ImagePicker extends Component {
+	render(){
+		let current = this.props.route.slide.layout;
+		return (
+			<View style={{flexDirection: 'column'}}>
+				<NavBar style={NavBarStyle}>
+					<NavButton onPress={this._onPreviousButton}><Image style={NavBarStyle.navIcon} source={require('../ic_navigate_before_white.png')} /></NavButton>
+					<NavTitle style={NavBarStyle.title}>Layout</NavTitle>
+					<NavGroup />
+				</NavBar>
+				<View style={styles.row}>
+					<TouchableFeedback onPress={this.onChoose(0)}><View style={styles.item}><Text>Top left</Text></View></TouchableFeedback>
+					<TouchableFeedback onPress={this.onChoose(1)}><View style={styles.item}><Text style={{textAlign: 'center'}}>Top center</Text></View></TouchableFeedback>
+					<TouchableFeedback onPress={this.onChoose(2)}><View style={styles.item}><Text style={{textAlign: 'right'}}>Top right</Text></View></TouchableFeedback>
+				</View>
+				<View style={styles.row}>
+					<TouchableFeedback onPress={this.onChoose(3)}><View style={styles.item}><Text>Middle left</Text></View></TouchableFeedback>
+					<TouchableFeedback onPress={this.onChoose(4)}><View style={styles.item}><Text style={{textAlign: 'center'}}>Middle center</Text></View></TouchableFeedback>
+					<TouchableFeedback onPress={this.onChoose(5)}><View style={styles.item}><Text style={{textAlign: 'right'}}>Middle right</Text></View></TouchableFeedback>
+				</View>
+				<View style={styles.row}>
+					<TouchableFeedback onPress={this.onChoose(6)}><View style={styles.item}><Text>Bottom left</Text></View></TouchableFeedback>
+					<TouchableFeedback onPress={this.onChoose(7)}><View style={styles.item}><Text style={{textAlign: 'center'}}>Bottom center</Text></View></TouchableFeedback>
+					<TouchableFeedback onPress={this.onChoose(8)}><View style={styles.item}><Text style={{textAlign: 'right'}}>Bottom right</Text></View></TouchableFeedback>
+				</View>
+			</View>
+		)
+	}
+
+	onChoose(layout){
+		return () => {
+			Realm.write(() => {
+				this.props.route.slide.layout = layout;
+			});
+			this.props.navigator.pop();
+		};
+	}
+
+	_onPreviousButton = () => {
+		this.props.navigator.pop();
+	};
+}