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 [search, setSearch] = React.useState('');
-	const [loading,setLoading] = React.useState(false)
+  const [loading, setLoading] = React.useState(false);
-	const [searchData,setSearchData] = React.useState([])
+  const [searchData, setSearchData] = React.useState([]);
-	const [tempSearchData,setTempSearchData] = React.useState([])
+  const [tempSearchData, setTempSearchData] = React.useState([]);
-	const [error,setError] = React.useState(null)
+  const [error, setError] = React.useState(null);
   const renderHeader = () => {
     return (
       <SearchBar
@@ -68,16 +75,18 @@ const SearchHouse = ({navigation}) => {
   };
   const updateSearch = search => {
     this.setState({search}, () => {
-            if ('' == search) {
+      if (search == '') {
         this.setState({
-                    data: [...this.state.temp]
+          data: [...this.state.temp],
         });
         return;
       }
 
-            this.state.data = this.state.temp.filter(function(item){
+      this.state.data = this.state.temp
+        .filter(function (item) {
           return item.name.includes(search);
-              }).map(function({id, name, email}){
+        })
+        .map(function ({id, name, email}) {
           return {id, name, email};
         });
     });
@@ -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()}
+            underlayColor="white"
-            style={{activeOpacity: 1, underlayColor: 'red', color: 'white'}}>
+            activeOpacity={0.5}
+            onPress={() => navigation.goBack()}>
             <Icon
               name="settings-outline"
               type="ionicon"