Fixed search input component

src/components/searchInput/view/searchInputView.js

@@ -13,25 +13,27 @@ import styles from './searchInputStyles';
  * ------------------------------------------------
  *   @prop { type }    name                - Description....
  */
-
-const SearchInputView = () => (
+const SearchInputView = ({
+  onChangeText, handleOnModalClose, placeholder, editable = true,
+}) => (
   <SafeAreaView style={styles.safeArea}>
     <View style={styles.inputWrapper}>
       <Icon style={styles.icon} iconType="FontAwesome" name="search" size={15} />
       <TextInput
         style={styles.input}
-        onChangeText={text => console.log('text :', text)}
-        placeholder="tst"
+        onChangeText={text => onChangeText(text)}
+        placeholder={placeholder}
         placeholderTextColor="#c1c5c7"
         autoCapitalize="none"
         autoFocus
+        editable={editable}
       />
       <IconButton
         iconStyle={styles.closeIcon}
         iconType="Ionicons"
         style={styles.closeIconButton}
         name="ios-close-circle-outline"
-        onPress={() => console.log('test :')}
+        onPress={() => handleOnModalClose()}
       />
     </View>
   </SafeAreaView>

src/components/searchModal/view/searchModalView.js

@@ -1,16 +1,13 @@
 import React, { PureComponent } from 'react';
 import {
-  View, Text, FlatList, TouchableHighlight, SafeAreaView,
+  View, Text, FlatList, TouchableHighlight,
 } from 'react-native';
 import FastImage from 'react-native-fast-image';
 
 // Constants
 
 // Components
-import { Icon } from '../../icon';
-import { IconButton } from '../../iconButton';
 import { Modal } from '../..';
-import { TextInput } from '../../textInput';
 import SearchInput from '../../searchInput';
 
 // Styles
@@ -50,27 +47,11 @@ class SearchModalView extends PureComponent {
         isTransparent
       >
         <View style={styles.container}>
-          <SafeAreaView style={styles.safeArea}>
-            <View style={styles.inputWrapper}>
-              <Icon style={styles.icon} iconType="FontAwesome" name="search" size={15} />
-              <TextInput
-                style={styles.input}
-                onChangeText={text => handleOnChangeSearchInput(text)}
+          <SearchInput
+            onChangeText={handleOnChangeSearchInput}
+            handleOnModalClose={handleOnClose}
             placeholder={placeholder}
-                placeholderTextColor="#c1c5c7"
-                autoCapitalize="none"
-                autoFocus
           />
-              <IconButton
-                iconStyle={styles.closeIcon}
-                iconType="Ionicons"
-                style={styles.closeIconButton}
-                name="ios-close-circle-outline"
-                onPress={() => handleOnClose()}
-              />
-            </View>
-          </SafeAreaView>
-
           <View style={styles.body}>
             <FlatList
               data={searchResults.data}

src/screens/searchResult/container/searchResultContainer.js

@@ -16,12 +16,24 @@ class SearchResultContainer extends PureComponent {
     this.state = {};
   }
 
+  _navigationGoBack = () => {
+    const { navigation } = this.props;
+
+    navigation.goBack();
+  };
+
   render() {
     const { currentAccount, navigation } = this.props;
 
     const tag = navigation.getParam('tag', 'esteem');
 
-    return <SearchResultScreen currentAccount={currentAccount} tag={tag} />;
+    return (
+      <SearchResultScreen
+        currentAccount={currentAccount}
+        tag={tag}
+        navigationGoBack={this._navigationGoBack}
+      />
+    );
   }
 }
 

src/screens/searchResult/screen/searchResultScreen.js

@@ -19,12 +19,17 @@ class SearchResultScreen extends PureComponent {
   }
 
   render() {
-    const { intl, tag } = this.props;
+    const { intl, tag, navigationGoBack } = this.props;
 
     return (
       <Fragment>
         <View style={styles.container}>
-          <SearchInput />
+          <SearchInput
+            onChangeText={text => console.log('text :', text)}
+            handleOnModalClose={navigationGoBack}
+            placeholder={tag}
+            editable={false}
+          />
           <ScrollableTabView
             style={globalStyles.tabView}
             renderTabBar={() => (