Search courses show in two cols

Views/Courses.js

@@ -122,6 +122,9 @@ const Courses = () => {
     const watchingCourse = (({ item }) => {
         return (<CourseCard profileObj={item.profile} />);
     });
+    const renderCoursesQuery = (({ item }) => {
+        return (<CourseCard profileObj={item} twoCols={true}/>);
+    });
     return (
         <SafeAreaView style={styles.container}>
             <Searchbar
@@ -132,7 +135,7 @@ const Courses = () => {
             {groups.length ? <></> : <ActivityIndicator />}
             <ScrollView>
                 {
-                    watching.length ?
+                    (searchQuery.length === 0 &&  watching.length) ?
                     <View>
                         <Title style={styles.title} >{i18n.t("message.continueWatching")}:</Title>
                         <FlatList
@@ -145,7 +148,7 @@ const Courses = () => {
                     </View> : <></>
                 }
                 {
-                    groups.length ?
+                    (searchQuery.length === 0 &&  groups.length) ?
                     <>
                         <Title style={styles.title} >{i18n.t("message.recentlyAdded")}:</Title>
                         <FlatList
@@ -158,7 +161,7 @@ const Courses = () => {
                     </> : <></>
                 }
                 {
-                    popular.length ?
+                    (searchQuery.length === 0 &&  popular.length) ?
                     <>
                         <Title style={styles.title} >{i18n.t("message.popularCourses")}:</Title>
                         <FlatList
@@ -170,6 +173,19 @@ const Courses = () => {
                         />
                     </> : <></>
                 }
+                {
+                    (searchQuery.length !== 0 &&  groups.length) ?
+                    <>
+                        <FlatList
+                            //horizontal={true}
+                            data={groups}
+                            numColumns={2}
+                            renderItem={renderCoursesQuery}
+                            keyExtractor={item => item._id}
+                            initialNumToRender={8}
+                        />
+                    </> : <></>
+                }
             </ScrollView>
         </SafeAreaView>
     )