Add screenshot of increasing precision to tips page

src/components/example.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Dimensions, Image, ScrollView, StyleSheet, View, TouchableOpacity} from 'react-native';
+import {ScrollView, StyleSheet, View, TouchableOpacity} from 'react-native';
 
 import MyText from './mytext.js';
 import MyImage from './myimage.js';
@@ -55,10 +55,11 @@ export default class Example extends Component {
 		const {viewInfo} = this.state;
 
 		return (
-			<ScrollView>
 			<View onLayout={(event) => this.setState({
 				viewInfo: event.nativeEvent,
-				})} style={{padding: 20}}>
+			})}>
+				<ScrollView>
+					<View 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} />
@@ -89,6 +90,7 @@ export default class Example extends Component {
 						</Section>
 					</View>
 				</ScrollView>
+			</View>
 		);
 	}
 }

src/components/myimage.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Dimensions, Image, Text, View} from 'react-native';
+import {Image, Text, View} from 'react-native';
 
 export default class MyImage extends Component {
 	constructor(props) {
@@ -10,17 +10,20 @@ export default class MyImage extends Component {
 		const {view, data} = this.props;
 
 		if (view.layout) {
-			const maxHeight = view.layout.height * 0.8;
+			const maxHeight = view.layout.height * 0.4;
 			const maxWidth = view.layout.width * 0.9;
 
+			// What the width will be if the responsive limit kicks in
+			const widthResp = view.layout.width * 0.6;
+
 			const aspectRatio = data.width / data.height;
 
 			let setWidth = maxWidth;
 			let setHeight = maxWidth / aspectRatio;
 
 			if (setHeight > maxHeight) {
-				setHeight = maxHeight;
-				setWidth = setHeight * aspectRatio;
+				setWidth = widthResp;
+				setHeight = setWidth / aspectRatio;
 			}
 
 			return (
@@ -44,6 +47,3 @@ export default class MyImage extends Component {
 		}
 	}
 }
-
-
-

src/components/tips.js

@@ -2,15 +2,32 @@ import React, {Component} from 'react';
 import {ScrollView, View} from 'react-native';
 
 import MyText from './mytext.js';
+import MyImage from './myimage.js';
 import Section from './section.js';
 
+const images = {
+	img4: {
+		source: require('../images/tips4.png'),
+		width: 1857,
+		height: 1016,
+	},
+};
+
 export default class Tips extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			viewInfo: {},
+		};
 	}
 
 	render() {
+		const {viewInfo} = this.state;
+
 		return (
+			<View onLayout={(event) => this.setState({
+				viewInfo: event.nativeEvent,
+			})}>
 				<ScrollView>
 					<View style={{padding: 20}}>
 						<Section>
@@ -28,9 +45,11 @@ export default class Tips extends Component {
 						<Section>
 							<MyText style={{fontWeight: 'bold'}}>Increase precision by adding significant figures</MyText>
 							<MyText>You can increase the precision of the calculations shown by the app by adding more significant figures to your target resistance. This way you can make your solution as precise as you need.</MyText>
+							<MyImage view={viewInfo} data={images.img4} />
 						</Section>
 					</View>
 				</ScrollView>
+			</View>
 		);
 	}
 }