add searchbar on SmartMeter

screens/Private/SmartMeterScreen/SmartMeterScreen.js

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
 import { Text } from 'native-base';
 import { Text } from 'native-base';
-import { FlatList, View } from 'react-native';
-import { theme } from '../../../constants/Styles';
+import { FlatList, View, StyleSheet } from 'react-native';
+import { theme, color } from '../../../constants/Styles';
 import MeterCard from '../../../components/MeterCard';
 import MeterCard from '../../../components/MeterCard';
 import { HeaderButtons, Item } from 'react-navigation-header-buttons';
 import { HeaderButtons, Item } from 'react-navigation-header-buttons';
 import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
 import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
@@ -10,6 +10,7 @@ import { getAllMainDeviceInfo } from '../../../reduxStore/actions/allMainDeviceA
 import { setCurrentSelected } from '../../../reduxStore/actions/currentSelectedAction';
 import { setCurrentSelected } from '../../../reduxStore/actions/currentSelectedAction';
 import { connect } from 'react-redux';
 import { connect } from 'react-redux';
 import { getTimers } from '../../../reduxStore/actions/timersAction';
 import { getTimers } from '../../../reduxStore/actions/timersAction';
+import { SearchBar } from 'react-native-elements';
 
 
 class SmartMeterScreen extends PureComponent {
 class SmartMeterScreen extends PureComponent {
 	static navigationOptions = ({ navigation }) => ({
 	static navigationOptions = ({ navigation }) => ({
@@ -28,6 +29,7 @@ class SmartMeterScreen extends PureComponent {
 
 
 	state = {
 	state = {
 		data: [],
 		data: [],
+		search: '',
 	};
 	};
 
 
 	_isMounted = false;
 	_isMounted = false;
@@ -59,10 +61,36 @@ class SmartMeterScreen extends PureComponent {
 		await this.props.getAllMainDeviceInfo();
 		await this.props.getAllMainDeviceInfo();
 	};
 	};
 
 
+	updateSearch = text => {
+		this.setState({
+			search: text,
+		});
+	};
+
 	render() {
 	render() {
 		const { allMainDeviceInfo, isLoading, error } = this.props;
 		const { allMainDeviceInfo, isLoading, error } = this.props;
 
 
 		return !error ? (
 		return !error ? (
+			<>
+				<View
+					style={{
+						padding: 15,
+						flexDirection: 'row',
+						alignItems: 'center',
+						backgroundColor: color.defaultBg,
+					}}
+				>
+					<SearchBar
+						containerStyle={styles.searchBarContainer}
+						inputContainerStyle={styles.searchBarInputContainer}
+						inputStyle={styles.searchBarInput}
+						round
+						lightTheme
+						placeholder="Search..."
+						onChangeText={text => this.updateSearch(text)}
+						value={this.state.search}
+					/>
+				</View>
 				<FlatList
 				<FlatList
 					removeClippedSubviews={true}
 					removeClippedSubviews={true}
 					refreshing={isLoading}
 					refreshing={isLoading}
@@ -70,7 +98,7 @@ class SmartMeterScreen extends PureComponent {
 					style={[theme.container, theme.containerWithPadding]}
 					style={[theme.container, theme.containerWithPadding]}
 					contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }} //iPhoneX BottomSpace = 34
 					contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }} //iPhoneX BottomSpace = 34
 					data={allMainDeviceInfo}
 					data={allMainDeviceInfo}
-				extraData={this.props}
+					extraData={allMainDeviceInfo}
 					keyExtractor={(item, index) => `Card${item.deviceId}`}
 					keyExtractor={(item, index) => `Card${item.deviceId}`}
 					ListEmptyComponent={() => (
 					ListEmptyComponent={() => (
 						<View>
 						<View>
@@ -84,6 +112,7 @@ class SmartMeterScreen extends PureComponent {
 					)}
 					)}
 					renderItem={this.renderItem}
 					renderItem={this.renderItem}
 				/>
 				/>
+			</>
 		) : (
 		) : (
 			<View>
 			<View>
 				<Text>{error}</Text>
 				<Text>{error}</Text>
@@ -92,6 +121,31 @@ class SmartMeterScreen extends PureComponent {
 	}
 	}
 }
 }
 
 
+const styles = StyleSheet.create({
+	searchBarContainer: {
+		flex: 1,
+		display: 'flex',
+		backgroundColor: 'transparent',
+		height: 30,
+		paddingVertical: 0,
+		borderTopWidth: 0,
+		borderBottomWidth: 0,
+	},
+	searchBarInputContainer: {
+		borderWidth: 1,
+		borderBottomWidth: 1,
+		backgroundColor: 'transparent',
+		minHeight: 10,
+		height: 30,
+		borderColor: '#c7cad1',
+	},
+	searchBarInput: {
+		fontFamily: 'Avenir-Roman',
+		fontSize: 12,
+		color: color.grey,
+	},
+});
+
 const mapStateToProps = state => ({
 const mapStateToProps = state => ({
 	allMainDeviceInfo: state.allMainDeviceReducer.allMainDeviceInfo,
 	allMainDeviceInfo: state.allMainDeviceReducer.allMainDeviceInfo,
 	isLoading: state.allMainDeviceReducer.isLoading,
 	isLoading: state.allMainDeviceReducer.isLoading,