Merge pull request #16 from AudacityMusic/contact-info-screen

Contact info screen

src/components/NextButton.js

@@ -0,0 +1,36 @@
+import { StyleSheet, Text, View, Image } from "react-native";
+
+export default function NextButton() {
+  return (
+    <View style={styles.back}>
+      <Text>{"\n\n\n"}</Text>
+      <Text style={styles.backText}>Next</Text>
+      <Image
+        source={require("./../assets/caret-left.png")}
+        style={styles.caret}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  back: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingLeft: "5%",
+    borderRadius: 15,
+    height: 59,
+    width: 114,
+    backgroundColor: "black",
+  },
+
+  backText: {
+    fontSize: 25,
+    color: "white",
+  },
+  caret: {
+    transform: [{ scaleX: -1 }],
+    tintColor: "white",
+  },
+});

src/components/TextField.js

@@ -1,12 +1,29 @@
-import { StyleSheet, Text } from "react-native";
+import { StyleSheet, Text, TextInput, View } from "react-native";
 
-export default function TextField() {
+export default function TextField(props) {
   return (
     // TODO
-    <Text>TextField</Text>
+    <View style={styles.container}>
+      <Text>
+        {props.title}
+        <Text style={styles.red}>*</Text>
+      </Text>
+      <TextInput style={styles.inputField}></TextInput>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
-  // TODO
+  inputField: {
+    borderRadius: 15,
+    borderWidth: 3,
+    flexGrow: 0.5,
+    textAlignVertical: "top",
+  },
+  red: {
+    color: "red",
+  },
+  container: {
+    flexGrow: 1,
+  },
 });

src/screens/ContactInfoScreen.js

@@ -1,12 +1,100 @@
-import { StyleSheet, Text } from "react-native";
+import {
+  Pressable,
+  View,
+  SafeAreaView,
+  KeyboardAvoidingView,
+  StyleSheet,
+  Text,
+} from "react-native";
+import BackButton from "../components/BackButton";
+import TextField from "../components/TextField";
+import NextButton from "../components/NextButton";
 
 export default function ContactInfoScreen() {
   return (
     // TODO
-    <Text>Contact Info</Text>
+    <SafeAreaView style={styles.container}>
+      <View style={styles.backButton}>
+        <Pressable>
+          <BackButton />
+        </Pressable>
+      </View>
+
+      <View style={styles.header}>
+        <Text style={[styles.heading, { textAlign: "center" }]}>
+          Contact Info
+        </Text>
+        <Text style={[styles.instructions, { textAlign: "center" }]}>
+          Please fill in the following details about the person who will be
+          performing at the concert.
+        </Text>
+      </View>
+      <KeyboardAvoidingView style={styles.body} behavior="height">
+        <View style={styles.form}>
+          <TextField
+            style={styles.field}
+            title="Performer's Full Name "
+          ></TextField>
+          <TextField
+            style={styles.field}
+            title="City of Residence "
+          ></TextField>
+          <TextField style={styles.field} title="Phone Number "></TextField>
+          <TextField style={styles.field} title="Performer's Age "></TextField>
+        </View>
+        <Pressable style={styles.nextButton}>
+          <NextButton />
+        </Pressable>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  // TODO
+  container: {
+    paddingVertical: "7%",
+    display: "flex",
+    alignItems: "stretch",
+    flexDirection: "column",
+    flex: 1,
+    minHeight: "100%",
+  },
+  body: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    flex: 3,
+    alignItems: "stretch",
+    paddingHorizontal: "8%",
+  },
+  form: {
+    display: "flex",
+    alignItems: "stretch",
+    flex: 6,
+  },
+  heading: {
+    fontSize: 64,
+    fontWeight: "condensedBold",
+  },
+  header: {
+    alignItems: "center",
+    paddingHorizontal: "5%",
+    flex: 1,
+  },
+  backButton: {
+    alignSelf: "flex-start",
+  },
+  instructions: {
+    fontSize: 20,
+    flexWrap: "wrap",
+  },
+  field: {
+    flex: 1,
+    backgroundColor: "blue",
+  },
+  nextButton: {
+    alignSelf: "flex-end",
+    flex: 2,
+    justifyContent: "flex-end",
+  },
 });