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

Views/Feed.js

@@ -27,6 +27,7 @@ const getFeed = async () => {
 
 let Feed = ({ navigation, route }) => {
     let [Posts, setPosts] = useState([]);
+    const flatListRef = React.useRef()
     console.log("Render Feed");
     useEffect(() => {
         let subscribed = true;
@@ -39,15 +40,18 @@ let Feed = ({ navigation, route }) => {
             if (route.params && route.params.profileid) {
                 return navigation.navigate('Profile', { profileid: route.params.profileid })
             }
-            API.getMe().then((me) => {
-                if (subscribed){
-                    GlobalState.me = me;
-                }
-            });
-            console.log("Feed from cache")
-            let cacheFeed = await getFeed() || [];
-            if (cacheFeed.length && subscribed) setPosts(cacheFeed);
-            console.log("Feed from server")
+            if(!route.params?.reRender){
+                API.getMe().then((me) => {
+                    if (subscribed){
+                        GlobalState.me = me;
+                    }
+                });
+                console.log("Feed from cache")
+                let cacheFeed = await getFeed() || [];
+                if (cacheFeed.length && subscribed) setPosts(cacheFeed);
+                console.log("Feed from server")
+            }
+            flatListRef.current.scrollToOffset({ animated: true, offset: 0 })
             let posts = await API.getPosts();
             if (subscribed) {
                 setPosts(posts);
@@ -83,6 +87,7 @@ let Feed = ({ navigation, route }) => {
                 maxToRenderPerBatch={3}
                 removeClippedSubviews={true}
                 style={styles.container}
+                ref={flatListRef}
             />
         </SafeAreaView>
     );

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",

Views/NewGroup.js

@@ -0,0 +1,39 @@
+import React, { useEffect } from "react";
+import { Searchbar, Title, IconButton } from 'react-native-paper';
+import { StyleSheet, SafeAreaView, ImageBackground, View } from 'react-native';
+import API from "../API";
+import GroupCard from "../components/GroupCard";
+
+const NewGroup = () => {
+    
+
+    useEffect(() => {
+    }, [])
+
+    return (
+        <SafeAreaView style={{ padding: 10, backgroundColor: "#edf2f7", flex:1 }}>
+            <ImageBackground source={require("../assets/settings.png")} 
+                style={{flex:1}} 
+                imageStyle={{resizeMode:"contain", opacity: 0.05}}
+            >
+                <Title style={styles.title}>New Group:</Title>
+            </ImageBackground>
+        </SafeAreaView>
+    )
+}
+
+export default NewGroup;
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 5,
+    },
+    title: {
+        padding: 10,
+        paddingTop:5,
+        fontSize: 30,
+        marginTop: 15,
+        fontWeight: "bold",
+        color: "#777"
+    }
+});