Improving groups

Views/Groups.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Searchbar } from 'react-native-paper';
+import { Searchbar, Title } from 'react-native-paper';
 import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
 import API from "../API";
 import GroupCard from "../components/GroupCard";
@@ -11,9 +11,9 @@ const Groups = () => {
 
     useEffect(() => {
         let subscribed = true;
-        API.getRecentGroups('').then((data) => {
+        API.getFollowingGroups('').then((data) => {
             if (subscribed)
-                setGroups(data.groups || []);
+                setGroups(data?.groups || []);
         });
         return () => {
             subscribed = false;
@@ -27,7 +27,7 @@ const Groups = () => {
         if (queryTimer) clearTimeout(queryTimer);
         let timerId = setTimeout(() => {
             if (!query) {
-                return API.getRecentGroups('').then((data) => {
+                return API.getFollowingGroups('').then((data) => {
                     setGroups(data.groups || []);
                 });
             }
@@ -50,11 +50,11 @@ const Groups = () => {
             />
             <FlatList
                 contentContainerStyle={styles.container}
-                numColumns={2}
-                columnWrapperStyle={{ justifyContent: "space-evenly" }}
+                numColumns={1}
                 data={groups}
                 renderItem={renderProfile}
                 keyExtractor={item => item._id}
+                ListHeaderComponent={searchQuery ? <></> : <Title style={styles.title} >Groups you follow:</Title>}
             />
         </SafeAreaView>
     )
@@ -66,4 +66,11 @@ const styles = StyleSheet.create({
     container: {
         padding: 5,
     },
+    title: {
+        padding: 10,
+        fontSize: 30,
+        marginTop: 15,
+        fontWeight: "bold",
+        color: "#777"
+    }
 });