Add example usage of app to example page

src/actions/actionTypes.js

@@ -5,3 +5,4 @@ export const MENUOPEN = 'MENUOPEN';
 export const MENUCLOSE = 'MENUCLOSE';
 export const MAIN = 'MAIN';
 export const HELP = 'HELP';
+export const EXAMPLE = 'EXAMPLE';

src/actions/menuActions.js

@@ -23,3 +23,9 @@ export function help() {
 		type: types.HELP
 	};
 }
+
+export function example() {
+	return {
+		type: types.EXAMPLE
+	};
+}

src/components/example.js

@@ -0,0 +1,95 @@
+import React, {Component} from 'react';
+import {Dimensions, Image, ScrollView, StyleSheet, View, TouchableOpacity} from 'react-native';
+
+import MyText from './mytext.js';
+import MyImage from './myimage.js';
+import Section from './section.js';
+
+const images = {
+	img1: {
+		source: require('../images/example1.png'),
+		width: 1857,
+		height: 574,
+	},
+	img2: {
+		source: require('../images/example2.png'),
+		width: 1857,
+		height: 574,
+	},
+	img3: {
+		source: require('../images/example3.png'),
+		width: 1857,
+		height: 574,
+	},
+	img4: {
+		source: require('../images/example4.png'),
+		width: 1857,
+		height: 574,
+	},
+	img5: {
+		source: require('../images/example5.png'),
+		width: 1857,
+		height: 574,
+	},
+	img6: {
+		source: require('../images/example6.png'),
+		width: 1857,
+		height: 574,
+	},
+	img7: {
+		source: require('../images/example7.png'),
+		width: 1857,
+		height: 574,
+	},
+};
+
+export default class Example extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			viewInfo: {},
+		};
+	}
+
+	render() {
+		const {viewInfo} = this.state;
+
+		return (
+			<ScrollView>
+				<View onLayout={(event) => this.setState({
+					viewInfo: event.nativeEvent,
+				})} style={{padding: 20}}>
+					<Section>
+						<MyText>Suppose our design calls for an 863 Ω resistance. First, we enter 863 Ω into the top field:</MyText>
+						<MyImage view={viewInfo} data={images.img1} />
+					</Section>
+					<Section>
+						<MyText>The calulator will recommend 863 Ω, but we don't have anything close to that in our bin of scrap resistors. We find a 1 kΩ resistor and measure it to be 992 Ω. We enter this into the calculator:</MyText>
+						<MyImage view={viewInfo} data={images.img2} />
+					</Section>
+					<Section>
+						<MyText>You will see the calculator now recommends we add a 6.64 kΩ resistor, and is telling us we are 14.9% away from our 863 Ω target:</MyText>
+						<MyImage view={viewInfo} data={images.img3} />
+					</Section>
+					<Section>
+						<MyText>The closest we can find is 6.8 kΩ, which we measure to be 6740 Ω. We now enter this value too:</MyText>
+						<MyImage view={viewInfo} data={images.img4} />
+					</Section>
+					<Section>
+						<MyText>Now it recommends 432 kΩ, and we are 0.2% away from the target (pretty good for two resistors):</MyText>
+						<MyImage view={viewInfo} data={images.img5} />
+					</Section>
+					<Section>
+						<MyText>If we wanted to get even closer, we can keep going. We find a 470 kΩ resistor that reads 489.3 kΩ and enter it:</MyText>
+						<MyImage view={viewInfo} data={images.img6} />
+					</Section>
+					<Section>
+						<MyText>The calculator is now telling us we are right on our target with 0.00% error:</MyText>
+						<MyImage view={viewInfo} data={images.img7} />
+					</Section>
+				</View>
+			</ScrollView>
+		);
+	}
+}
+

src/components/menu.js

@@ -22,7 +22,7 @@ export default class Menu extends Component {
 	}
 
 	render() {
-		const { main, help } = this.props;
+		const {main, help, example} = this.props;
 
 		return (
 			<View style={styles.main}>
@@ -30,6 +30,7 @@ export default class Menu extends Component {
 					<Image style={{alignSelf: 'flex-start', height: 121.30401, width: 250}} source={require('../images/menulogo.png')} resizeMode={'contain'} />
 					<MyText style={styles.menutable} onPress={main}>Calculator</MyText>
 					<MyText style={styles.menutable} onPress={help}>Help</MyText>
+					<MyText style={styles.menutable} onPress={example}>Example</MyText>
 					<MyText style={styles.menutable} onPress={null}>Tips</MyText>
 					<MyText style={[styles.menutable, {borderBottomWidth: 0}]} onPress={null}>About</MyText>
 				</ScrollView>

src/components/myimage.js

@@ -0,0 +1,49 @@
+import React, {Component} from 'react';
+import {Dimensions, Image, Text, View} from 'react-native';
+
+export default class MyImage extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		const {view, data} = this.props;
+
+		if (view.layout) {
+			const maxHeight = view.layout.height * 0.8;
+			const maxWidth = view.layout.width * 0.9;
+
+			const aspectRatio = data.width / data.height;
+
+			let setWidth = maxWidth;
+			let setHeight = maxWidth / aspectRatio;
+
+			if (setHeight > maxHeight) {
+				setHeight = maxHeight;
+				setWidth = setHeight * aspectRatio;
+			}
+
+			return (
+				<View style={{paddingTop: 10, flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
+					<Image
+						style={{
+							width: setWidth,
+							height: setHeight,
+							borderColor: 'black',
+							borderWidth: 1,
+							borderRadius: 5,
+						}}
+						source={data.source}
+					/>
+				</View>
+			);
+		} else {
+			return (
+				<Text style={{alignSelf: 'center', padding: 20}}>Loading image...</Text>
+			);
+		}
+	}
+}
+
+
+

src/containers/exampleApp.js

@@ -0,0 +1,16 @@
+'use strict';
+
+import React, {Component} from 'react';
+import Example from '../components/example';
+
+export default class ExampleApp extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		return (
+			<Example />
+		);
+	}
+}

src/containers/nav.js

@@ -10,6 +10,7 @@ import * as menuActions from '../actions/menuActions';
 import MenuApp from '../containers/menuApp';
 import CalcApp from '../containers/calcApp';
 import HelpApp from '../containers/helpApp';
+import ExampleApp from '../containers/exampleApp';
 
 class Nav extends Component {
 	constructor(props) {
@@ -38,7 +39,6 @@ class Nav extends Component {
 				tapToClose={true}
 				openDrawerOffset={(viewport) => viewport.width - 250}
 				captureGestures={true}
-				panCloseMask={0.3}
 				closedDrawerOffset={-3}
 				styles={drawerStyles}
 				tweenHandler={(ratio) => ({
@@ -61,6 +61,8 @@ class Nav extends Component {
 									return <CalcApp />;
 								case 'help':
 									return <HelpApp />;
+								case 'example':
+									return <ExampleApp />;
 								default:
 									return <CalcApp />;
 							}

src/reducers/menu.js

@@ -34,6 +34,13 @@ export default function menu(state = initialState, action = {}) {
 				page: 'help',
 				subtitle: 'Help',
 			};
+		case types.EXAMPLE:
+			return {
+				...state,
+				isOpen: false,
+				page: 'example',
+				subtitle: 'Example Usage',
+			};
 		default:
 			return state;
 	}