Horizontal Users

Views/Search.js

@@ -1,10 +1,13 @@
 import React, { useEffect } from "react";
 import { Searchbar } from 'react-native-paper';
-import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import { StyleSheet, SafeAreaView, FlatList, Text } from 'react-native';
 import API from "../API";
-import ProfileCard from "../components/ProfileCard";
+import ProfileCardHorizontal from "../components/ProfileCardHorizontal";
+import { useSnapshot } from 'valtio';
+import GlobalState from '../contexts/GlobalState.js';
 
 const Search = () => {
+    const viewer = useSnapshot(GlobalState).me;
     const [searchQuery, setSearchQuery] = React.useState('');
     const [profiles, setProfiles] = React.useState([]);
     const [queryTimer, setQueryTimer] = React.useState(0);
@@ -31,7 +34,10 @@ const Search = () => {
         setQueryTimer(timerId);
     };
     const renderProfile = (({ item }) => {
-        return (<ProfileCard profileObj={item} />);
+        return (<ProfileCardHorizontal profileObj={item} />);
+    });
+    const renderFollowing = (({ item }) => {
+        return (<ProfileCardHorizontal profileid={item} />);
     });
     return (
         <SafeAreaView style={{ flex: 1 }}>
@@ -41,14 +47,26 @@ const Search = () => {
                 value={searchQuery}
                 elevation={3}
             />
+            {
+            searchQuery.length ? 
             <FlatList
                 contentContainerStyle={styles.container}
-                numColumns={2}
-                columnWrapperStyle={{ justifyContent: "space-evenly" }}
+                numColumns={1}
                 data={profiles}
                 renderItem={renderProfile}
                 keyExtractor={item => item._id}
+            /> :
+            <>
+            <Text>Current Following:</Text>
+            <FlatList
+                contentContainerStyle={styles.container}
+                numColumns={1}
+                data={viewer.following}
+                renderItem={renderFollowing}
+                keyExtractor={item => item}
             />
+            </>
+        }
         </SafeAreaView>
     )
 }