UI Fixes for Search page

src/screens/Search/SearchPage.js

@@ -8,55 +8,28 @@ import { horizontalScale, moderateScale, verticalScale } from '../../constants/m
 import IonIcon from 'react-native-vector-icons/Ionicons'
 import fonts from '../../constants/fonts'
 import { TouchableOpacity } from 'react-native-gesture-handler'
+import { navigateToListViewPage, useConstructor } from '../../constants/functions'
+import { getCategories } from '../../api/data'
 
-const categories = [
-  {
-    title: "Sector Update",
-    icon: ""
-  },
-  {
-    title: "Regional Update",
-    icon: ""
-  },
-  {
-    title: "Politics",
-    icon: ""
-  },
-  {
-    title: "Finance",
-    icon: "",
-  },
-  {
-    title: "Sports",
-    icon: ""
-  },
-  {
-    title: "Regional Update",
-    icon: ""
-  },
-  {
-    title: "Entertainment",
-    icon: ""
-  },
-  {
-    title: 'Gourmet',
-    icon: ""
-  }
-]
 
 const SearchPage = props => {
 
   const [isSearching, setSearching] = useState(false)
+  const [categories,setCategories] = useState([])
+
 
   const {
     navigation,
     route
   } = props
 
+  
 
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: colors().dominant
+      backgroundColor: colors().dominant,
+      minHeight: '100%',
+      height:'100vh'
     },
     inputTextContainer: {
       backgroundColor: colors().dominant,
@@ -67,7 +40,9 @@ const SearchPage = props => {
       padding: verticalScale(16),
       flexDirection: 'row',
       flexWrap: 'wrap',
-      gap: moderateScale(16)
+      gap: moderateScale(16),
+     
+
     },
     category: {
       height: 170,
@@ -87,6 +62,15 @@ const SearchPage = props => {
     }
   })
 
+
+  const fetchCategories = () => {
+    getCategories().then(res => setCategories(res.data.body.results)).catch(err => console.log(err))
+  }
+
+  useConstructor(() => {
+    fetchCategories()
+  })
+
   return (
     <SafeAreaView style={styles.container}>
       <ScrollView>
@@ -121,9 +105,9 @@ const SearchPage = props => {
           isSearching === false ?
             <View style={styles.categoryContainer}>
               {categories.map((item) =>
-                <TouchableOpacity onPress={true}>
+                <TouchableOpacity onPress={() => navigateToListViewPage(navigation,"category",item.heading.name)}>
                   <View style={styles.category}>
-                    <Text style={styles.categoryText}>{item.title}</Text>
+                    <Text style={styles.categoryText}>{item.heading.name}</Text>
                   </View>
                 </TouchableOpacity>