Update on feed button, new groups UI search and round borders

Views/Groups.js

@@ -1,13 +1,15 @@
-import React, { useEffect } from "react";
-import { Searchbar, Title } from 'react-native-paper';
-import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import React, { useEffect, useRef } from "react";
+import { Searchbar, Title, IconButton } from 'react-native-paper';
+import { StyleSheet, SafeAreaView, FlatList, View } from 'react-native';
 import API from "../API";
 import GroupCard from "../components/GroupCard";
 
-const Groups = () => {
+const Groups = ({navigation}) => {
     const [searchQuery, setSearchQuery] = React.useState('');
+    const [searchVisible, setSearchVisible] = React.useState(false);
     const [groups, setGroups] = React.useState([]);
     const [queryTimer, setQueryTimer] = React.useState(0);
+    const searchTextBox = useRef(null);
 
     useEffect(() => {
         let subscribed = true;
@@ -43,18 +45,53 @@ const Groups = () => {
     });
     return (
         <SafeAreaView style={{ flex: 1 }}>
-            <Searchbar
-                placeholder="Search Groups"
-                onChangeText={onChangeSearch}
-                value={searchQuery}
-            />
             <FlatList
                 contentContainerStyle={styles.container}
                 numColumns={1}
                 data={groups}
                 renderItem={renderProfile}
                 keyExtractor={item => item._id}
-                ListHeaderComponent={searchQuery ? <></> : <Title style={styles.title} >Groups you follow:</Title>}
+                ListHeaderComponent={
+                    <>
+                    <View style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                zIndex: 100
+            }}>
+                {!searchVisible ? 
+                    <View style={{
+                        alignSelf:"flex-end",
+                        flex:1,
+                        flexDirection: "row"
+                    }}>
+                        <IconButton icon={'add'} size={35} onPress={()=>{
+                            navigation.navigate('NewGroup');
+                        }} />
+                        <IconButton icon={'search'} size={35} onPress={()=>{
+                            setSearchVisible(true);
+                            console.log(searchTextBox)
+                            //searchTextBox.current.focus();
+                        }} />
+                    </View> :
+                    <Searchbar
+                        placeholder="Search Groups"
+                        onChangeText={onChangeSearch}
+                        value={searchQuery}
+                        clearButtonMode="while-editing"
+                        blurOnSubmit={true}
+                        onBlur={()=>{
+                            setSearchVisible(false);
+                        }}
+                        forwardRef={searchTextBox}
+                    />
+                }
+                </View>
+                    <Title style={styles.title} >{searchQuery ? "Results:" : "Your Groups:"}</Title>
+                    </>
+                }
+                style={{backgroundColor: "#edf2f7",}}
             />
         </SafeAreaView>
     )
@@ -68,6 +105,7 @@ const styles = StyleSheet.create({
     },
     title: {
         padding: 10,
+        paddingTop:5,
         fontSize: 30,
         marginTop: 15,
         fontWeight: "bold",