feat(create-group): create group form

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,78 @@
+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, setDropdownError}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const selectOption = (option) => {
+    setValue(option);
+    setIsOpen(false);
+    if(setDropdownError != null)
+    {
+      setDropdownError('');
+    }
+  };
+
+  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 styles = StyleSheet.create({
+  dropdownContainer: {
+    backgroundColor: '#fff',
+    borderRadius: 4,
+    padding: 10,
+  },
+  dropdownButton: {
+    padding: 10,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 4,
+  },
+  dropdownButtonText: {
+    fontSize: 16,
+    color: '#333',
+  },
+  optionsContainer: {
+    marginTop: 10,
+    maxHeight: 200,
+  },
+  optionButton: {
+    padding: 10,
+  },
+  optionText: {
+    fontSize: 16,
+    color: '#333',
+  },
+});
+
+export default Dropdown;

packages/app/components/TagInput.js

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { TextInput, Button, View, Text, StyleSheet } from 'react-native';
+
+const TagInput = ({ value, setValue, tags, setTags, maxTags, setTagsError }) => {
+  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);
+            if(setTagsError != null)
+            {
+              setTagsError('');
+            }
+          }}
+          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 styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  input: {
+    flex: 1,
+    height: 40,
+    margin: 6,
+    borderWidth: 1,
+    padding: 10,
+  },
+  tagsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  tag: {
+    backgroundColor: '#e0e0e0',
+    borderRadius: 8,
+    paddingVertical: 1,
+    paddingHorizontal: 4,
+    margin: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  tagText: {
+    marginRight: 2,
+  },
+  removeButton: {
+    backgroundColor: '#ff0000',
+    paddingVertical: 2,
+    paddingHorizontal: 4,
+    borderRadius: 4,
+  },
+});
+
+export default TagInput;

packages/app/package.json

@@ -25,6 +25,7 @@
     "expo-auth-session": "~3.8.0",
     "expo-constants": "~14.0.2",
     "expo-dev-client": "~2.0.1",
+    "expo-image-picker": "~14.0.2",
     "expo-random": "~13.0.0",
     "expo-secure-store": "~12.0.0",
     "expo-status-bar": "~1.4.2",
@@ -35,7 +36,7 @@
     "react-native-gesture-handler": "~2.8.0",
     "react-native-option-menu": "^1.1.3",
     "react-native-reanimated": "~2.12.0",
-    "react-native-safe-area-context": "^4.5.0",
+    "react-native-safe-area-context": "~4.4.1",
     "react-native-screens": "~3.18.0",
     "react-native-svg": "13.4.0",
     "react-test-renderer": "^18.2.0"

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";
@@ -62,6 +64,13 @@ function FeedDrawer() {
           headerShown: false,
         }}
       />
+      <Feed.Screen 
+        name="Create Group" 
+        component={CreateGroupStack} 
+        options={{ 
+          headerShown: false,
+        }}
+      />
     </Feed.Navigator>
   );
 }