first commit

app/components/EditScreenInfo.tsx

@@ -0,0 +1,80 @@
+import * as WebBrowser from "expo-web-browser";
+import React from "react";
+import { StyleSheet, TouchableOpacity } from "react-native";
+
+import Colors from "../constants/Colors";
+import { MonoText } from "./StyledText";
+import { Text, View } from "./Themed";
+
+export default function EditScreenInfo({ path }: { path: string }) {
+	return (
+		<View>
+			<View style={styles.getStartedContainer}>
+				<Text
+					style={styles.getStartedText}
+					lightColor="rgba(0,0,0,0.8)"
+					darkColor="rgba(255,255,255,0.8)">
+					Open up the code for this screen:
+				</Text>
+
+				<View
+					style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
+					darkColor="rgba(255,255,255,0.05)"
+					lightColor="rgba(0,0,0,0.05)">
+					<MonoText>{path}</MonoText>
+				</View>
+
+				<Text
+					style={styles.getStartedText}
+					lightColor="rgba(0,0,0,0.8)"
+					darkColor="rgba(255,255,255,0.8)">
+					Change any of the text, save the file, and your app will automatically update.
+				</Text>
+			</View>
+
+			<View style={styles.helpContainer}>
+				<TouchableOpacity onPress={handleHelpPress} style={styles.helpLink}>
+					<Text style={styles.helpLinkText} lightColor={Colors.light.tint}>
+						Tap here if your app doesn't automatically update after making changes
+					</Text>
+				</TouchableOpacity>
+			</View>
+		</View>
+	);
+}
+
+function handleHelpPress() {
+	WebBrowser.openBrowserAsync(
+		"https://docs.expo.io/get-started/create-a-new-app/#opening-the-app-on-your-phonetablet",
+	);
+}
+
+const styles = StyleSheet.create({
+	getStartedContainer: {
+		alignItems: "center",
+		marginHorizontal: 50,
+	},
+	homeScreenFilename: {
+		marginVertical: 7,
+	},
+	codeHighlightContainer: {
+		borderRadius: 3,
+		paddingHorizontal: 4,
+	},
+	getStartedText: {
+		fontSize: 17,
+		lineHeight: 24,
+		textAlign: "center",
+	},
+	helpContainer: {
+		marginTop: 15,
+		marginHorizontal: 20,
+		alignItems: "center",
+	},
+	helpLink: {
+		paddingVertical: 15,
+	},
+	helpLinkText: {
+		textAlign: "center",
+	},
+});

app/components/StyledText.tsx

@@ -0,0 +1,7 @@
+import * as React from "react";
+
+import { Text, TextProps } from "./Themed";
+
+export function MonoText(props: TextProps) {
+	return <Text {...props} style={[props.style, { fontFamily: "space-mono" }]} />;
+}

app/components/Themed.tsx

@@ -0,0 +1,46 @@
+/**
+ * Learn more about Light and Dark modes:
+ * https://docs.expo.io/guides/color-schemes/
+ */
+
+import * as React from "react";
+import { Text as DefaultText, View as DefaultView } from "react-native";
+
+import Colors from "../constants/Colors";
+import useColorScheme from "../hooks/useColorScheme";
+
+export function useThemeColor(
+	props: { light?: string; dark?: string },
+	colorName: keyof typeof Colors.light & keyof typeof Colors.dark,
+) {
+	const theme = useColorScheme();
+	const colorFromProps = props[theme];
+
+	if (colorFromProps) {
+		return colorFromProps;
+	} else {
+		return Colors[theme][colorName];
+	}
+}
+
+type ThemeProps = {
+	lightColor?: string;
+	darkColor?: string;
+};
+
+export type TextProps = ThemeProps & DefaultText["props"];
+export type ViewProps = ThemeProps & DefaultView["props"];
+
+export function Text(props: TextProps) {
+	const { style, lightColor, darkColor, ...otherProps } = props;
+	const color = useThemeColor({ light: lightColor, dark: darkColor }, "text");
+
+	return <DefaultText style={[{ color }, style]} {...otherProps} />;
+}
+
+export function View(props: ViewProps) {
+	const { style, lightColor, darkColor, ...otherProps } = props;
+	const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, "background");
+
+	return <DefaultView style={[{ backgroundColor }, style]} {...otherProps} />;
+}

app/components/__tests__/StyledText-test.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import renderer from "react-test-renderer";
+
+import { MonoText } from "../StyledText";
+
+it(`renders correctly`, () => {
+	const tree = renderer.create(<MonoText>Snapshot test!</MonoText>).toJSON();
+
+	expect(tree).toMatchSnapshot();
+});