add searchbar on SmartMeter

screens/Private/SmartMeterScreen/SmartMeterScreen.js

 import React, { PureComponent } from 'react';
 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 { HeaderButtons, Item } from 'react-navigation-header-buttons';
 import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
@@ -10,6 +10,7 @@ import { getAllMainDeviceInfo } from '../../../reduxStore/actions/allMainDeviceA
 import { setCurrentSelected } from '../../../reduxStore/actions/currentSelectedAction';
 import { connect } from 'react-redux';
 import { getTimers } from '../../../reduxStore/actions/timersAction';
+import { SearchBar } from 'react-native-elements';
 
 class SmartMeterScreen extends PureComponent {
 	static navigationOptions = ({ navigation }) => ({
@@ -28,6 +29,7 @@ class SmartMeterScreen extends PureComponent {
 
 	state = {
 		data: [],
+		search: '',
 	};
 
 	_isMounted = false;
@@ -59,31 +61,58 @@ class SmartMeterScreen extends PureComponent {
 		await this.props.getAllMainDeviceInfo();
 	};
 
+	updateSearch = text => {
+		this.setState({
+			search: text,
+		});
+	};
+
 	render() {
 		const { allMainDeviceInfo, isLoading, error } = this.props;
 
 		return !error ? (
-			<FlatList
-				removeClippedSubviews={true}
-				refreshing={isLoading}
-				onRefresh={this.getData}
-				style={[theme.container, theme.containerWithPadding]}
-				contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }} //iPhoneX BottomSpace = 34
-				data={allMainDeviceInfo}
-				extraData={this.props}
-				keyExtractor={(item, index) => `Card${item.deviceId}`}
-				ListEmptyComponent={() => (
-					<View>
-						<Text style={[theme.normalText, { marginTop: 20 }]}>
-							{isLoading ? '' : this._isMounted ? 'No Device Connected' : ''}
-						</Text>
-					</View>
-				)}
-				ListHeaderComponent={() => (
-					<Text style={[theme.smallTitle, theme.textDark, { marginBottom: 10 }]}>Smart meter</Text>
-				)}
-				renderItem={this.renderItem}
-			/>
+			<>
+				<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
+					removeClippedSubviews={true}
+					refreshing={isLoading}
+					onRefresh={this.getData}
+					style={[theme.container, theme.containerWithPadding]}
+					contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }} //iPhoneX BottomSpace = 34
+					data={allMainDeviceInfo}
+					extraData={allMainDeviceInfo}
+					keyExtractor={(item, index) => `Card${item.deviceId}`}
+					ListEmptyComponent={() => (
+						<View>
+							<Text style={[theme.normalText, { marginTop: 20 }]}>
+								{isLoading ? '' : this._isMounted ? 'No Device Connected' : ''}
+							</Text>
+						</View>
+					)}
+					ListHeaderComponent={() => (
+						<Text style={[theme.smallTitle, theme.textDark, { marginBottom: 10 }]}>Smart meter</Text>
+					)}
+					renderItem={this.renderItem}
+				/>
+			</>
 		) : (
 			<View>
 				<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 => ({
 	allMainDeviceInfo: state.allMainDeviceReducer.allMainDeviceInfo,
 	isLoading: state.allMainDeviceReducer.isLoading,