diff --git a/app/src/component/AppNavigator.js b/app/src/component/AppNavigator.js
index 3d21db2..8370793 100644
--- a/app/src/component/AppNavigator.js
+++ b/app/src/component/AppNavigator.js
@@ -29,6 +29,7 @@ import { makeSelectClientSetting } from '../redux/selectors/settings';
 import Feather from 'react-native-vector-icons/Feather';
 import discoverStyle from '../styles/discover';
 import searchStyle from '../styles/search';
+import SearchRightHeaderIcon from "../component/searchRightHeaderIcon";
 
 const discoverStack = StackNavigator({
   Discover: {
@@ -51,7 +52,7 @@ const discoverStack = StackNavigator({
     navigationOptions: ({ navigation }) => ({
       drawerLockMode: 'locked-closed',
       headerTitle: <SearchInput style={searchStyle.searchInput} />,
-      headerRight: <Feather name="x" size={24} style={discoverStyle.rightHeaderIcon} onPress={() => navigation.dispatch(NavigationActions.back())} />
+      headerRight: <SearchRightHeaderIcon style={discoverStyle.rightHeaderIcon} size={24} navigation={navigation} />
     })
   }
 }, {
diff --git a/app/src/component/searchRightHeaderIcon/index.js b/app/src/component/searchRightHeaderIcon/index.js
new file mode 100644
index 0000000..102e51e
--- /dev/null
+++ b/app/src/component/searchRightHeaderIcon/index.js
@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import SearchRightHeaderIcon from './view';
+import { ACTIONS } from 'lbry-redux';
+const perform = dispatch => ({
+  clearQuery: () => dispatch({
+    type: ACTIONS.HISTORY_NAVIGATE
+  })
+});
+
+export default connect(null, perform)(SearchRightHeaderIcon);
diff --git a/app/src/component/searchRightHeaderIcon/view.js b/app/src/component/searchRightHeaderIcon/view.js
new file mode 100644
index 0000000..173e7ed
--- /dev/null
+++ b/app/src/component/searchRightHeaderIcon/view.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { NavigationActions } from 'react-navigation';
+import Feather from "react-native-vector-icons/Feather";
+
+class SearchRightHeaderIcon extends React.PureComponent {
+  
+  clearAndGoBack() {
+    const { navigation } = this.props;
+    this.props.clearQuery();
+    navigation.dispatch(NavigationActions.back())
+  }
+
+  render() {
+    const { style } = this.props;
+    return <Feather name="x" size={24} style={style} onPress={() => this.clearAndGoBack()} />;
+  }
+}
+
+export default SearchRightHeaderIcon;