add underlay color for touchablehighlight

components/HomeScreen.js

@@ -17,11 +17,13 @@ const HomeScreen = ({navigation}) => {
       <StatusBar backgroundColor="#ffffff" barStyle="dark-content" />
       <View style={styles.viewRoot}>
         <Text style={styles.heading}>Rental</Text>
-        <View
-          style={{flexDirection: 'row', marginTop: '30%', marginLeft: '15%'}}>
           <TouchableHighlight
             onPress={() => navigation.navigate('SearchHouse')}
+underlayColor="white"
+						activeOpacity={0.5}
 						>
+        <View
+          style={{flexDirection: 'row', marginTop: '30%', marginLeft: '15%'}}>
             <Icon
               name="home-outline"
               style={styles.icon}
@@ -29,11 +31,16 @@ const HomeScreen = ({navigation}) => {
               size={46}
               color="#206ba5"
             />
-          </TouchableHighlight>
             <Text style={{color: '#206ba5', fontSize: 25, marginLeft: '-10%'}}>
               Home
             </Text>
         </View>
+          </TouchableHighlight>
+          <TouchableHighlight
+            onPress={() => navigation.navigate('SearchHouse')}
+underlayColor="white"
+						activeOpacity={0.5}
+						>
         <View
           style={{flexDirection: 'row', marginTop: '30%', marginLeft: '15%'}}>
           <Icon
@@ -47,6 +54,7 @@ const HomeScreen = ({navigation}) => {
             Key
           </Text>
         </View>
+	  </TouchableHighlight>
       </View>
     </>
   );

components/LoginUserScreen.js

@@ -155,7 +155,9 @@ const LoginUserScreen = ({navigation}) => {
           }}>
           <TouchableHighlight
             onPress={() => navigation.goBack()}
-            style={{activeOpacity: 1, underlayColor: 'red', color: 'white'}}>
+underlayColor="white"
+						activeOpacity={0.5}
+            >
             <Icon name="arrow-back" type="ionicon" size={36} color="#206ba5" />
           </TouchableHighlight>
         </View>

components/SearchHouse.js

@@ -1,8 +1,15 @@
 import React, {useState, useEffect} from 'react';
 import {Icon, SearchBar} from 'react-native-elements';
-import {StatusBar, Dimensions, StyleSheet, Text, View, TouchableHighlight,FlatList} from 'react-native';
+import {
+  StatusBar,
+  Dimensions,
+  StyleSheet,
+  Text,
+  View,
+  TouchableHighlight,
+  FlatList,
+} from 'react-native';
 import HouseCard from './helpers/HouseCard';
-
 const deviceWidth = Math.round(Dimensions.get('window').width);
 
 const homes = [
@@ -48,11 +55,11 @@ const homes = [
   },
 ];
 const SearchHouse = ({navigation}) => {
-	const [search,setSearch] = React.useState("")
-	const [loading,setLoading] = React.useState(false)
-	const [searchData,setSearchData] = React.useState([])
-	const [tempSearchData,setTempSearchData] = React.useState([])
-	const [error,setError] = React.useState(null)
+  const [search, setSearch] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
+  const [searchData, setSearchData] = React.useState([]);
+  const [tempSearchData, setTempSearchData] = React.useState([]);
+  const [error, setError] = React.useState(null);
   const renderHeader = () => {
     return (
       <SearchBar
@@ -62,25 +69,27 @@ const SearchHouse = ({navigation}) => {
         editable={true}
         value={search}
         onChangeText={setSearch}
-	platform="android"
+        platform="android"
       />
     );
   };
-const updateSearch = search => {
-        this.setState({ search }, () => {
-            if ('' == search) {
-                this.setState({
-                    data: [...this.state.temp]
-                });
-                return;
-            }
-             
-            this.state.data = this.state.temp.filter(function(item){
-                return item.name.includes(search);
-              }).map(function({id, name, email}){
-                return {id, name, email};
-            });
+  const updateSearch = search => {
+    this.setState({search}, () => {
+      if (search == '') {
+        this.setState({
+          data: [...this.state.temp],
         });
+        return;
+      }
+
+      this.state.data = this.state.temp
+        .filter(function (item) {
+          return item.name.includes(search);
+        })
+        .map(function ({id, name, email}) {
+          return {id, name, email};
+        });
+    });
   };
   return (
     <>
@@ -89,12 +98,14 @@ const updateSearch = search => {
         <View style={styles.iconContainer}>
           <TouchableHighlight
             onPress={() => navigation.goBack()}
-            style={{activeOpacity: 1, underlayColor: 'red', color: 'white'}}>
+            underlayColor="white"
+            activeOpacity={0.5}>
             <Icon name="arrow-back" type="ionicon" size={36} color="#206ba5" />
           </TouchableHighlight>
           <TouchableHighlight
-            onPress={() => navigation.goBack()}
-            style={{activeOpacity: 1, underlayColor: 'red', color: 'white'}}>
+            underlayColor="white"
+            activeOpacity={0.5}
+            onPress={() => navigation.goBack()}>
             <Icon
               name="settings-outline"
               type="ionicon"
@@ -105,15 +116,15 @@ const updateSearch = search => {
         </View>
         <View style={styles.headingContainer}>
           <Text style={styles.heading}>Find Homes</Text>
-      <SearchBar
-        placeholder="Search Here..."
-        lightTheme
-        round
-        editable={true}
-        value={search}
-        onChangeText={setSearch}
-	platform="android"
-      />
+          <SearchBar
+            placeholder="Search Here..."
+            lightTheme
+            round
+            editable={true}
+            value={search}
+            onChangeText={setSearch}
+            platform="android"
+          />
         </View>
         <View style={styles.cardContainer}>
           {/* <Card /> */}