created search bar and functionabilty

src/components/editorHeader/view/editorHeaderStyles.js

@@ -60,4 +60,13 @@ export default EStyleSheet.create({
     flexGrow: 1,
     fontWeight: '500',
   },
+  textInput: {
+    color: '$iconColor',
+    alignSelf: 'center',
+    fontSize: 16,
+    marginLeft: 16,
+    flexGrow: 1,
+    fontWeight: '500',
+    width: '$deviceWidth / 1.4',
+  },
 });

src/components/editorHeader/view/editorHeaderView.js

@@ -1,5 +1,7 @@
 import React, { Component, Fragment } from 'react';
-import { View, SafeAreaView, Text } from 'react-native';
+import {
+  View, SafeAreaView, Text, TextInput,
+} from 'react-native';
 import { TextButton } from '../..';
 import { IconButton } from '../../iconButton';
 // Constants
@@ -19,7 +21,9 @@ class EditorHeaderView extends Component {
 
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      isInputVisible: false,
+    };
   }
 
   // Component Life Cycles
@@ -36,6 +40,20 @@ class EditorHeaderView extends Component {
 
   _handleOnDropdownSelect = () => {};
 
+  _handleSearchButtonPress = () => {
+    const { isInputVisible } = this.state;
+
+    this.setState({ isInputVisible: !isInputVisible });
+  };
+
+  _handleOnSearch = (value) => {
+    const { handleOnSearch } = this.props;
+
+    handleOnSearch(value);
+  };
+
+  _handleOnInputChange = () => {};
+
   render() {
     const {
       handleOnPressBackButton,
@@ -50,8 +68,9 @@ class EditorHeaderView extends Component {
       handleRightIconPress,
       isModalHeader,
       handleOnPressClose,
+      isHasSearch,
     } = this.props;
-
+    const { isInputVisible } = this.state;
     return (
       <SafeAreaView>
         <View style={styles.container}>
@@ -62,10 +81,11 @@ class EditorHeaderView extends Component {
               name={isModalHeader ? 'close' : 'md-arrow-back'}
               onPress={() => (isModalHeader ? handleOnPressClose() : handleOnPressBackButton())}
             />
-
+            {!isInputVisible && (
               <Text style={[title && styles.title, quickTitle && styles.quickTitle]}>
                 {quickTitle || title}
               </Text>
+            )}
 
             {isHasDropdown && (
               <View>
@@ -78,7 +98,8 @@ class EditorHeaderView extends Component {
               </View>
             )}
 
-            {rightIconName && (
+            {rightIconName
+              && !isHasSearch && (
                 <IconButton
                   style={styles.rightIcon}
                   size={25}
@@ -87,6 +108,24 @@ class EditorHeaderView extends Component {
                   name={rightIconName}
                 />
             )}
+
+            {isInputVisible && (
+              <TextInput
+                onChangeText={value => this._handleOnSearch(value)}
+                autoFocus
+                style={styles.textInput}
+              />
+            )}
+
+            {isHasSearch && (
+              <IconButton
+                style={styles.rightIcon}
+                size={25}
+                onPress={() => this._handleSearchButtonPress()}
+                iconStyle={styles.rightIcon}
+                name={rightIconName}
+              />
+            )}
           </View>
 
           {isHasIcons && (

src/screens/splash/screen/splashScreen.js

@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
-import { Text } from 'react-native';
+import { Text, Animated } from 'react-native';
-import { Container } from 'native-base';
-
 // Components
 import { Logo } from '../../../components';
 
@@ -10,15 +8,28 @@ import styles from './splashStyles';
 class SplashScreen extends Component {
   constructor(props) {
     super(props);
+    this.state = {
+      fadeAnim: new Animated.Value(0),
+    };
   }
 
+  componentDidMount = () => {
+    const { fadeAnim } = this.state;
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 6000,
+    }).start();
+  };
+
   render() {
+    const { fadeAnim } = this.state;
+
     return (
-      <Container style={styles.container}>
+      <Animated.View style={[styles.container, { opacity: fadeAnim }]}>
         <Logo style={styles.logo} />
         <Text style={styles.title}>eSteem</Text>
         <Text style={styles.subTitle}>mobile</Text>
-      </Container>
+      </Animated.View>
     );
   }
 }

src/screens/voters/screen/votersScreen.js

@@ -22,6 +22,7 @@ class VotersScreen extends Component {
     super(props);
     this.state = {
       data: props.votes,
+      filterResult: null,
     };
   }
 
@@ -42,11 +43,12 @@ class VotersScreen extends Component {
 
       return itemName.indexOf(_text) > -1;
     });
-    this.setState({ data: newData });
+
+    this.setState({ filterResult: newData });
   };
 
   render() {
-    const { data } = this.state;
+    const { data, filterResult } = this.state;
     const headerTitle = `Voters Info (${data && data.length})`;
 
     return (
@@ -55,7 +57,7 @@ class VotersScreen extends Component {
           title={headerTitle}
           rightIconName="ios-search"
           isHasSearch
-          handleRightIconPress={this._handleSearch}
+          handleOnSearch={this._handleSearch}
         />
         <FilterBar
           dropdownIconName="md-arrow-dropdown"
@@ -63,7 +65,7 @@ class VotersScreen extends Component {
           defaultText="REWARDS"
           onDropdownSelect={this._handleOnDropdownSelect}
         />
-        <VotersDisplay votes={data} />
+        <VotersDisplay votes={filterResult || data} />
       </View>
     );
   }