[WIP] User Settings Screen

c2tc-mobile/App.js

@@ -9,7 +9,9 @@ import IntroScreen from "./screens/IntroScreen";
 import TipForm from "./screens/TipForm";
 import TipScreen from "./screens/TipScreen";
 import TipDetailsScreen from "./screens/TipDetailsScreen";
+import SettingsScreen from "./screens/SettingsScreen";
 import ProfileScreen from "./screens/ProfileScreen";
+import NotificationScreen from "./screens/NotificationScreen";
 
 export default class App extends Component {
   constructor(props) {
@@ -82,5 +84,19 @@ Navigator = createStackNavigator({
       header: null,
       headerMode: "screen"
     }
+  },
+  Settings: {
+    screen: SettingsScreen,
+    navigationOptions: {
+      header: null,
+      headerMode: "screen"
+    }
+  },
+  Notifications: {
+    screen: NotificationScreen,
+    navigationOptions: {
+      header: null,
+      headerMode: "screen"
+    }
   }
 });

c2tc-mobile/screens/ProfileScreen.js

@@ -85,15 +85,13 @@ export default class ProfileScreen extends React.Component {
     return (
       <View>
         <ScrollView style={styles.tipOverview}>
-        <Appbar.Header>
-          <Appbar.BackAction onPress={this.handleBackPress} />
-          <Appbar.Content title="Back" />
-          {isEditingName ? (
-            <Appbar.Action icon="save" onPress={this.handleSavePress} />
-          ) : (
-            <Appbar.Action icon="edit" onPress={this.handleEditPress} />
-          )}
-        </Appbar.Header>
+        <View>
+            <Appbar.Header>
+            <Appbar.BackAction onPress={this.handleBackPress} />
+            <Appbar.Content title="Profile" titleStyle = {styles.profileHeader}/>
+            <Appbar.Content title = "Settings" titleStyle = {styles.settingsHeader} onPress = {() => this.props.navigation.navigate("Settings")}/>
+            </Appbar.Header>
+        </View>
         <View style={styles.profile}>
           <Image
             style={{ width: 50, height: 50, borderRadius: 50 / 2 }}
@@ -149,6 +147,12 @@ export default class ProfileScreen extends React.Component {
 }
 
 const styles = StyleSheet.create({
+  profileHeader: {
+    alignSelf: "center"
+  },
+  settingsHeader: {
+    alignSelf: "flex-end"
+  },
   profile: {
     flexDirection: "column",
     alignItems: "center",

c2tc-mobile/screens/SettingsScreen.js

@@ -0,0 +1,128 @@
+import React from "react";
+import { AsyncStorage } from "react-native";
+import API from "../components/API";
+import { FontAwesome } from "@expo/vector-icons";
+
+import {
+  Animated,
+  View,
+  Dimensions,
+  Text,
+  ImageBackground,
+  TouchableOpacity,
+  StyleSheet,
+  TextInput,
+  Switch,
+  Image
+} from "react-native";
+
+import {
+  Paragraph,
+  Appbar,
+  List,
+  Divider,
+  withTheme,
+  type Theme
+} from "react-native-paper";
+
+export default class SettingsScreen extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  async componentDidMount() {
+    this._mounted = true;
+    await AsyncStorage.setItem("user_id", "5c86c850f875c618f8557f40");
+    let user_id = await AsyncStorage.getItem("user_id");
+    let user = await API.getUser(user_id);
+
+    this.setState({
+    });
+  }
+
+  handleBackPress = e => {
+    this.props.navigation.navigate("Profile");
+  };
+
+  render() {
+    return (
+    <View>
+        <View>
+            <Appbar.Header>
+            <Appbar.BackAction onPress={this.handleBackPress} />
+            <Appbar.Content title="Settings"/>
+            </Appbar.Header>
+        </View>
+        <TouchableOpacity onPress={() => console.log("Edit Profile")}>
+          <View style={styles.profile}>
+              <Image
+              style={{ width: 50, height: 50, borderRadius: 50 / 2}}
+              source={{
+              uri:
+                  "https://facebook.github.io/react-native/docs/assets/favicon.png"
+              }}
+              />
+              <View>
+                  <Text style={styles.name}>Phillip Kuo</Text>
+                  <Text style={styles.editProfile}>Edit Your Profile</Text>
+              </View>
+                <FontAwesome name="chevron-right" size={15} style={styles.profileArrow}/>
+          </View>
+        </TouchableOpacity>
+        <View style={styles.divider}></View>
+        <TouchableOpacity onPress={() => this.props.navigation.navigate("Notifications")}>
+          <View style={styles.list}>
+              <Text style={styles.text}>Notifications</Text>
+              <FontAwesome name="chevron-right" size={15} style={styles.arrow}/>
+          </View>
+        </TouchableOpacity>
+        <View style={styles.divider}></View>
+        <TouchableOpacity onPress={() => this.props.navigation.navigate("Welcome")}>
+        <View style={styles.list}>
+            <Text style={styles.text}>Show App Tutorials</Text>
+            <FontAwesome name="chevron-right" size={15} style={styles.arrow}/>
+        </View>
+        </TouchableOpacity>
+        <View style={styles.divider}></View>
+        </View>
+    )}
+}
+
+const styles = StyleSheet.create({
+  profile: {
+    flexDirection: "row",
+    padding: 25,
+  },
+  name: {
+    flexDirection: "row",
+    paddingLeft: 30,
+    fontSize: 20
+  },
+  editProfile: {
+    paddingLeft: 30,
+    fontSize: 15,
+    color: "gray"
+  },
+  list: {
+    height: 45,
+    flexDirection: "row",
+    alignItems: "flex-start"
+  },
+  text: {
+    paddingHorizontal: 30,
+    paddingTop: 10,
+    fontSize: 15,
+    width: Dimensions.get("window").width - 40
+  },
+  divider: {
+    borderBottomColor: 'gray',
+    borderBottomWidth: 1
+  },
+  profileArrow: {
+    paddingTop: 20,
+    paddingLeft: 100
+  },
+  arrow: {
+    paddingTop: 15
+  }
+});