updated search input to support back button instead rewriting back handler everytime

src/components/editorElements/selectCommunityModal/container/selectCommunityModalContainer.js

@@ -15,7 +15,7 @@ import {
   fetchSubscribedCommunitiesSuccess,
 } from '../../../../redux/actions/communitiesAction';
 
-const SelectCommunityModalContainer = ({ onPressCommunity, currentAccount }) => {
+const SelectCommunityModalContainer = ({ onPressCommunity, currentAccount, onCloseModal }) => {
   const dispatch = useDispatch();
 
   const [searchedCommunities, setSearchedCommunities] = useState([]);
@@ -58,6 +58,7 @@ const SelectCommunityModalContainer = ({ onPressCommunity, currentAccount }) =>
         searchedCommunities={searchedCommunities}
         showSearchedCommunities={showSearchedCommunities}
         currentAccount={currentAccount}
+        onCloseModal={onCloseModal}
       />
     </>
   );

src/components/editorElements/selectCommunityModal/view/selectCommunityModalView.js

@@ -18,6 +18,7 @@ const SelectCommunityModalView = ({
   searchedCommunities,
   showSearchedCommunities,
   currentAccount,
+  onCloseModal,
   intl,
 }) => {
   return (
@@ -27,7 +28,10 @@ const SelectCommunityModalView = ({
         onChangeText={onChangeSearch}
         placeholder="search"
         autoFocus={false}
+        backEnabled={true}
+        onBackPress={onCloseModal}
       />
+
       {showSearchedCommunities ? (
         <FlatList
           ItemSeparatorComponent={() => <Separator />}

src/components/searchInput/view/searchInputStyles.js

@@ -1,6 +1,11 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 12,
+  },
   inputWrapper: {
     marginTop: 20,
     backgroundColor: '$primaryLightBackground',
@@ -31,4 +36,15 @@ export default EStyleSheet.create({
     color: '$iconColor',
     fontSize: 22,
   },
+  backIcon: {
+    fontSize: 24,
+    color: '$iconColor',
+    justifyContent: 'center',
+  },
+  backButtonContainer: {
+    flex: 1,
+    marginTop: 20,
+    marginLeft: 12,
+    marginRight: 4,
+  },
 });

src/components/searchInput/view/searchInputView.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { SafeAreaView } from 'react-native';
+import { SafeAreaView, View } from 'react-native';
 
 // Components
 import { Icon } from '../../icon';
@@ -26,6 +26,8 @@ const SearchInputView = ({
   showClearButton = false,
   prefix = '',
   style,
+  backEnabled = false,
+  onBackPress,
 }) => {
   const [inputValue, setInputValue] = useState(value || '');
 
@@ -53,8 +55,22 @@ const SearchInputView = ({
     />
   );
 
+  const inputWrapperFlex = { flex: backEnabled ? 16 : 1 };
+
   return (
-    <SafeAreaView style={[styles.inputWrapper, style]}>
+    <SafeAreaView style={styles.container}>
+      {backEnabled && (
+        <View style={styles.backButtonContainer}>
+          <IconButton
+            iconType="MaterialIcons"
+            name="arrow-back"
+            iconStyle={styles.backIcon}
+            onPress={onBackPress}
+          />
+        </View>
+      )}
+
+      <View style={[styles.inputWrapper, inputWrapperFlex, style]}>
         <TextInput
           style={styles.input}
           onChangeText={_onChangeText}
@@ -67,6 +83,7 @@ const SearchInputView = ({
         />
         {handleOnModalClose && _renderCrossButton(() => handleOnModalClose())}
         {showClearButton && _renderCrossButton(() => setInputValue(''))}
+      </View>
     </SafeAreaView>
   );
 };

src/screens/editor/screen/editorScreen.js

@@ -338,6 +338,9 @@ class EditorScreen extends Component {
           <SelectCommunityModalContainer
             onPressCommunity={this._handlePressCommunity}
             currentAccount={currentAccount}
+            onCloseModal={() => {
+              this.setState({ isCommunitiesListModalOpen: false });
+            }}
           />
         </Modal>
         <BasicHeader

src/screens/searchResult/screen/searchResultScreen.js

@@ -39,26 +39,15 @@ const SearchResultScreen = ({ navigation }) => {
 
   return (
     <View style={styles.container}>
-      <SafeAreaView>
-        <View style={styles.headerContainer}>
-          <View style={{ flex: 1, marginTop: 20 }}>
-            <IconButton
-              iconType="MaterialIcons"
-              name="arrow-back"
-              iconStyle={styles.backIcon}
-              onPress={_navigationGoBack}
-            />
-          </View>
-          <View style={{ flex: 16 }}>
       <SearchInput
         showClearButton={true}
         placeholder={intl.formatMessage({ id: 'header.search' })}
         onChangeText={_handleChangeText}
         value={searchValue}
+        backEnabled={true}
+        onBackPress={_navigationGoBack}
       />
-          </View>
-        </View>
-      </SafeAreaView>
+
       <ScrollableTabView
         style={globalStyles.tabView}
         renderTabBar={_renderTabbar}

src/screens/tagResult/screen/tagResultScreen.js

@@ -39,28 +39,15 @@ const TagResultScreen = ({ navigation }) => {
 
   return (
     <View style={styles.container}>
-      <SafeAreaView>
-        <View style={styles.headerContainer}>
-          <View style={{ flex: 1, marginTop: 20 }}>
-            <IconButton
-              iconType="MaterialIcons"
-              name="arrow-back"
-              iconStyle={styles.backIcon}
-              onPress={_navigationGoBack}
-            />
-          </View>
-          <View style={{ flex: 16 }}>
       <SearchInput
         showClearButton={true}
-              onBackPress={_navigationGoBack}
         autoFocus={false}
         onChangeText={_setTag}
         value={tag}
         prefix="#"
+        backEnabled={true}
+        onBackPress={_navigationGoBack}
       />
-          </View>
-        </View>
-      </SafeAreaView>
 
       <View style={styles.tabbarItem}>
         <TabbedPosts