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,20 +55,35 @@ const SearchInputView = ({
     />
   );
 
+  const inputWrapperFlex = { flex: backEnabled ? 16 : 1 };
+
   return (
-    <SafeAreaView style={[styles.inputWrapper, style]}>
+    <SafeAreaView style={styles.container}>
-      <TextInput
+      {backEnabled && (
-        style={styles.input}
+        <View style={styles.backButtonContainer}>
-        onChangeText={_onChangeText}
+          <IconButton
-        placeholder={placeholder}
+            iconType="MaterialIcons"
-        placeholderTextColor="#c1c5c7"
+            name="arrow-back"
-        autoCapitalize="none"
+            iconStyle={styles.backIcon}
-        autoFocus={autoFocus}
+            onPress={onBackPress}
-        editable={editable}
+          />
-        value={`${prefix}${inputValue}`}
+        </View>
-      />
+      )}
-      {handleOnModalClose && _renderCrossButton(() => handleOnModalClose())}
+
-      {showClearButton && _renderCrossButton(() => setInputValue(''))}
+      <View style={[styles.inputWrapper, inputWrapperFlex, style]}>
+        <TextInput
+          style={styles.input}
+          onChangeText={_onChangeText}
+          placeholder={placeholder}
+          placeholderTextColor="#c1c5c7"
+          autoCapitalize="none"
+          autoFocus={autoFocus}
+          editable={editable}
+          value={`${prefix}${inputValue}`}
+        />
+        {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>
+      <SearchInput
-        <View style={styles.headerContainer}>
+        showClearButton={true}
-          <View style={{ flex: 1, marginTop: 20 }}>
+        placeholder={intl.formatMessage({ id: 'header.search' })}
-            <IconButton
+        onChangeText={_handleChangeText}
-              iconType="MaterialIcons"
+        value={searchValue}
-              name="arrow-back"
+        backEnabled={true}
-              iconStyle={styles.backIcon}
+        onBackPress={_navigationGoBack}
-              onPress={_navigationGoBack}
+      />
-            />
+
-          </View>
-          <View style={{ flex: 16 }}>
-            <SearchInput
-              showClearButton={true}
-              placeholder={intl.formatMessage({ id: 'header.search' })}
-              onChangeText={_handleChangeText}
-              value={searchValue}
-            />
-          </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>
+      <SearchInput
-        <View style={styles.headerContainer}>
+        showClearButton={true}
-          <View style={{ flex: 1, marginTop: 20 }}>
+        autoFocus={false}
-            <IconButton
+        onChangeText={_setTag}
-              iconType="MaterialIcons"
+        value={tag}
-              name="arrow-back"
+        prefix="#"
-              iconStyle={styles.backIcon}
+        backEnabled={true}
-              onPress={_navigationGoBack}
+        onBackPress={_navigationGoBack}
-            />
+      />
-          </View>
-          <View style={{ flex: 16 }}>
-            <SearchInput
-              showClearButton={true}
-              onBackPress={_navigationGoBack}
-              autoFocus={false}
-              onChangeText={_setTag}
-              value={tag}
-              prefix="#"
-            />
-          </View>
-        </View>
-      </SafeAreaView>
 
       <View style={styles.tabbarItem}>
         <TabbedPosts