Updated Search Page

src/screens/Search/SearchPage.js

@@ -1,10 +1,10 @@
-import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { ScrollView, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'
 import React, { useState } from 'react'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader'
 import colors from '../../constants/colors'
-import { TextInput } from 'react-native-paper'
-import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics'
+import { PaperProvider, TextInput } from 'react-native-paper'
+import { horizontalScale, moderateScale, screenWidth, verticalScale } from '../../constants/metrics'
 import IonIcon from 'react-native-vector-icons/Ionicons'
 import fonts from '../../constants/fonts'
 import { navigateToArticle, navigateToListViewPage, useConstructor } from '../../constants/functions'
@@ -37,7 +37,11 @@ const SearchPage = props => {
     inputTextContainer: {
       backgroundColor: colors().dominant,
       paddingHorizontal: horizontalScale(16),
-      paddingBottom: verticalScale(16)
+      paddingBottom: verticalScale(16),
+      flexDirection:'row',
+      alignItems: 'center',
+      // gap: horizontalScale(16),
+      maxWidth:'100%'
     },
     categoryContainer: {
       padding: verticalScale(16),
@@ -62,6 +66,13 @@ const SearchPage = props => {
       fontSize: moderateScale(14),
       maxWidth: "80%",
       textAlign: 'right'
+    },
+    filtersButton:{
+      backgroundColor: colors().dominant,
+      paddingRight: horizontalScale(8),
+      paddingLeft: horizontalScale(16),
+      alignItems:'center',
+      justifyContent:'center',
     }
   })
 
@@ -97,6 +108,7 @@ const SearchPage = props => {
 
   }
   return (
+    <PaperProvider>
     <SafeAreaView style={styles.container}>
       <ScrollView>
         <NewscoutTitleHeader title={"Search"} />
@@ -110,22 +122,30 @@ const SearchPage = props => {
             dense
             style={{
               backgroundColor: colors().grayShade_500,
-              paddingVertical: moderateScale(8),
+              paddingVertical: moderateScale(4),
+              // width: '100%',
+              
+              flex: 1
+             
             }}
             contentStyle={{
               fontSize: moderateScale(16),
-              fontFamily: fonts.type.medium
+              fontFamily: fonts.type.medium,
+              // height: moderateScale(16),
             }}
             outlineStyle={{
               borderColor: colors().dominant_variant,
               borderRadius: moderateScale(8),
-              borderWidth: moderateScale(1)
+              borderWidth: moderateScale(1),
             }}
             // underlineStyle={{backgroundColor: colors().dominant}}
             left={() => <Text>fdsfdss</Text>}
-            right={() => <TouchableOpacity onPress={() => navigateToListViewPage(navigation,'search',searchText)}><IonIcon name="search" color={colors().grayShade_400} size={moderateScale(8)} /></TouchableOpacity>}
+            right={() => <TouchableOpacity onPress={() => navigateToListViewPage(navigation,'search',searchText)}><IonIcon name="search" color={colors().grayShade_200} size={moderateScale(8)} /></TouchableOpacity>}
             onChangeText={onChangeText}
           />
+          <TouchableOpacity style={styles.filtersButton} onPress={true}>
+            <IonIcon name="filter" color={colors().recessive_variant} size={moderateScale(24)} />
+          </TouchableOpacity>
         </View>
         {
           isSearching === false ?
@@ -155,6 +175,7 @@ const SearchPage = props => {
         }
       </ScrollView>
     </SafeAreaView>
+    </PaperProvider>
   )
 }