feat(create-group): create group form

packages/app/Root.js

@@ -58,7 +58,7 @@ function App() {
     } catch (err) {
       await logoutUser();
       console.log(
-        "Something went wrong trying to auto log in with stored access token"
+        "Something went wrong trying to auto log in with stored access token",
       );
     }
 
@@ -89,7 +89,7 @@ function App() {
     } catch (err) {
       await logoutUser();
       console.log(
-        "Something went wrong trying to auto log in with newly fetched access token from stored refresh token"
+        "Something went wrong trying to auto log in with newly fetched access token from stored refresh token",
       );
     }
   };

packages/app/app.config.js

@@ -55,5 +55,12 @@ module.exports = {
         iosUrlScheme: process.env.IOS_GOOGLE_URL_SCHEME,
       },
     ],
+    [
+      "expo-image-picker",
+      {
+        photosPermission:
+          "Allow Icebreak to access your photos for choosing profile icons and thumbnail images.",
+      },
+    ],
   ],
 };

packages/app/components/Dropdown.js

@@ -0,0 +1,84 @@
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+
+const Dropdown = ({ options, value, setValue }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const selectOption = (option) => {
+    setValue(option);
+    setIsOpen(false);
+  };
+
+  return (
+    <View style={styles.dropdownContainer}>
+      <TouchableOpacity style={styles.dropdownButton} onPress={toggleDropdown}>
+        <Text style={styles.dropdownButtonText}>
+          {value || "Select an option"}
+        </Text>
+      </TouchableOpacity>
+
+      {isOpen && (
+        <ScrollView style={styles.optionsContainer}>
+          {options.map((option) => (
+            <TouchableOpacity
+              key={option}
+              style={styles.optionButton}
+              onPress={() => selectOption(option)}>
+              <Text style={styles.optionText}>{option}</Text>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      )}
+    </View>
+  );
+};
+
+const colors = {
+  white: "#fff",
+  grey: "#ccc",
+  black: "#333",
+};
+
+const styles = StyleSheet.create({
+  dropdownButton: {
+    borderColor: colors.grey,
+    borderRadius: 4,
+    borderWidth: 1,
+    padding: 10,
+  },
+  dropdownButtonText: {
+    color: colors.blue,
+    fontSize: 16,
+  },
+  dropdownContainer: {
+    backgroundColor: colors.white,
+    borderRadius: 4,
+    padding: 10,
+  },
+  optionButton: {
+    padding: 10,
+  },
+  optionText: {
+    color: colors.blue,
+    fontSize: 16,
+  },
+  optionsContainer: {
+    marginTop: 10,
+    maxHeight: 200,
+  },
+});
+
+Dropdown.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string]))
+    .isRequired,
+  value: PropTypes.string.isRequired,
+  setValue: PropTypes.func.isRequired,
+};
+
+export default Dropdown;

packages/app/components/TagInput.js

@@ -0,0 +1,108 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { TextInput, Button, View, Text, StyleSheet } from "react-native";
+
+const TagInput = ({ value, setValue, tags, setTags, maxTags }) => {
+  const addTag = () => {
+    if (value && tags.length < maxTags && !tags.includes(value)) {
+      setTags([...tags, value]);
+      setValue("");
+    }
+  };
+
+  const removeTag = (index) => {
+    const updatedTags = [...tags];
+    updatedTags.splice(index, 1);
+    setTags(updatedTags);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.inputContainer}>
+        <TextInput
+          value={value}
+          onChangeText={(newText) => {
+            setValue(newText);
+          }}
+          placeholder="Enter a tag"
+          style={styles.input}
+        />
+        <Button
+          title="Add Tag"
+          onPress={addTag}
+          disabled={tags.length >= maxTags}
+        />
+      </View>
+
+      <View style={styles.tagsContainer}>
+        {tags.map((tag, index) => (
+          <View key={index} style={styles.tag}>
+            <Text style={styles.tagText}>{tag}</Text>
+            <Button
+              title="X"
+              onPress={() => removeTag(index)}
+              style={styles.removeButton}
+            />
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const colors = {
+  blue: "#ff0000",
+  red: "#e0e0e0",
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "flex-start",
+    flexDirection: "column",
+    justifyContent: "flex-start",
+  },
+  input: {
+    borderWidth: 1,
+    flex: 1,
+    height: 40,
+    margin: 6,
+    padding: 10,
+  },
+  inputContainer: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  removeButton: {
+    backgroundColor: colors.blue,
+    borderRadius: 4,
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+  },
+  tag: {
+    alignItems: "center",
+    backgroundColor: colors.red,
+    borderRadius: 8,
+    flexDirection: "row",
+    margin: 4,
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+  },
+  tagText: {
+    marginRight: 2,
+  },
+  tagsContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+  },
+});
+
+TagInput.propTypes = {
+  value: PropTypes.string.isRequired,
+  setValue: PropTypes.func.isRequired,
+  tags: PropTypes.arrayOf(PropTypes.string).isRequired,
+  setTags: PropTypes.func.isRequired,
+  maxTags: PropTypes.number.isRequired,
+};
+
+export default TagInput;

packages/app/package.json

@@ -25,12 +25,14 @@
     "expo-auth-session": "~5.4.0",
     "expo-constants": "~15.4.5",
     "expo-dev-client": "~3.3.10",
+    "expo-image-picker": "~14.7.1",
     "expo-random": "~13.6.0",
     "expo-secure-store": "~12.8.1",
     "expo-status-bar": "~1.11.1",
     "expo-web-browser": "~12.8.2",
     "prop-types": "^15.8.1",
     "react": "18.2.0",
+    "react-hook-form": "^7.51.2",
     "react-native": "0.73.6",
     "react-native-gesture-handler": "~2.14.0",
     "react-native-option-menu": "^1.1.3",

packages/app/screens/feed/FeedDrawer.js

@@ -15,6 +15,8 @@ import PropTypes from "prop-types";
 
 import Ionicons from "@expo/vector-icons/Ionicons";
 
+import CreateGroupStack from "./create_group_form/CreateGroupStack";
+
 const Feed = createDrawerNavigator();
 
 const DARK_BLUE = "darkblue";
@@ -61,6 +63,13 @@ function FeedDrawer() {
           headerShown: false,
         }}
       />
+      <Feed.Screen
+        name="Create Group"
+        component={CreateGroupStack}
+        options={{
+          headerShown: false,
+        }}
+      />
     </Feed.Navigator>
   );
 }