increase font size, add smart device search

screens/Private/SettingScreen/SettingScreen.js

@@ -58,7 +58,7 @@ class SettingScreen extends React.Component {
 		const { data } = this.state;
 		return (
 			<View style={[theme.container]}>
-				<Text style={[theme.description, theme.mt2, { marginLeft: 25, color: '#a8a8a8' }]}>
+				<Text style={[theme.description, theme.mt2, { marginLeft: 25, color: '#a8a8a8', fontSize: 14 }]}>
 					{data.type === 'main' && 'Main Breaker'}
 				</Text>
 

screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js

@@ -106,7 +106,7 @@ class SmartMeterDetailScreen extends Component {
 						<Switch value={isPowerOn} />
 					</Right>
 				</Row>
-				<Text numberOfLines={2} style={[theme.description, theme.mt1]}>
+				<Text numberOfLines={2} style={[theme.description, theme.mt1, { fontSize: 14 }]}>
 					{description || ''}
 				</Text>
 				<Row style={theme.mt1}>
@@ -223,7 +223,12 @@ class SmartMeterDetailScreen extends Component {
 		};
 
 		return (
-			<View>
+			<Card
+				style={{
+					borderColor: color.white,
+					borderRadius: 8,
+				}}
+			>
 				<Row
 					style={{ paddingVertical: 7, paddingLeft: 7, paddingRight: Platform.OS === 'android' ? 12 : 7 }}
 					onPress={handleOnPressMcbLink}
@@ -249,7 +254,7 @@ class SmartMeterDetailScreen extends Component {
 						renderItem={({ item, index }) => renderSubBreaker(item, index)}
 					/>
 				)}
-			</View>
+			</Card>
 		);
 	};
 
@@ -285,22 +290,23 @@ class SmartMeterDetailScreen extends Component {
 						<ActivityIndicator color={color.primary} />
 					</View>
 				) : (
-					<Card
-						style={{
-							borderColor: color.white,
-							borderRadius: 8,
-							marginTop: 20,
-							marginBottom: isIphoneX() ? 115 : 75,
-						}}
-					>
-						<FlatList
-							data={mcbLinksInfo}
-							extraData={this.state}
-							contentContainerStyle={{ overflow: 'hidden' }}
-							keyExtractor={(item, index) => `mcbLinkItem${item.name}`}
-							renderItem={({ item, index }) => this.renderMCBLinksList(item, index)}
-						/>
-					</Card>
+					// <Card
+					// 	style={{
+					// 		borderColor: color.white,
+					// 		borderRadius: 8,
+					// 		marginTop: 20,
+					// 		marginBottom: isIphoneX() ? 115 : 75,
+					// 	}}
+					// >
+					<FlatList
+						data={mcbLinksInfo}
+						extraData={this.state}
+						contentContainerStyle={{ overflow: 'hidden' }}
+						keyExtractor={(item, index) => `mcbLinkItem${item.name}`}
+						renderItem={({ item, index }) => this.renderMCBLinksList(item, index)}
+						style={{ marginBottom: isIphoneX() ? 115 : 75, marginTop: 20 }}
+					/>
+					// </Card>
 				)}
 			</ScrollView>
 		);

screens/Private/SmartMeterScreen/SmartMeterScreen.js

@@ -22,12 +22,16 @@ class SmartMeterScreen extends PureComponent {
 
 	state = {
 		search: '',
+		data: [],
 	};
 	_isMounted = false;
 
 	componentDidMount = async () => {
 		await this.getData();
 		this._isMounted = true;
+		this.setState({
+			data: this.props.allMainDeviceInfo,
+		});
 	};
 
 	renderItem = ({ item, index }) => {
@@ -44,14 +48,22 @@ class SmartMeterScreen extends PureComponent {
 		await this.props.getAllMainDeviceInfo();
 	};
 
-	updateSearch = text => {
+	updateSearch = search => {
+		this.setState({ search });
+		const newData = this.props.allMainDeviceInfo.filter(item => {
+			const itemData = `${item.name.toUpperCase()}`;
+			const textData = search.toUpperCase();
+
+			return itemData.indexOf(textData) > -1;
+		});
 		this.setState({
-			search: text,
+			data: newData,
 		});
 	};
 
 	render() {
-		const { allMainDeviceInfo, isLoading, error } = this.props;
+		const { isLoading, error } = this.props;
+		const { data } = this.state;
 
 		return !error ? (
 			<>
@@ -87,7 +99,7 @@ class SmartMeterScreen extends PureComponent {
 					}
 					style={[theme.container]}
 					contentContainerStyle={[theme.containerWithPadding, { paddingBottom: isIphoneX() ? 90 : 55 }]} //iPhoneX BottomSpace = 34
-					data={allMainDeviceInfo}
+					data={data}
 					keyExtractor={(item, index) => item.deviceId}
 					ItemSeparatorComponent={() => <View style={theme.mt1} />}
 					ListEmptyComponent={() => (