update overlay & update seachbar

screens/Private/TimerScreen/TimerScreen.js

 import React, { Component } from 'react';
 import { Fab, Icon, Text } from 'native-base';
-import { View, StyleSheet, FlatList, ScrollView, Modal, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, FlatList, ScrollView, Modal, TouchableOpacity, TextInput } from 'react-native';
 import { Switch, Button } from 'native-base';
 import { HeaderButtons, Item as HeaderItem } from 'react-navigation-header-buttons';
 import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
 import { color, theme } from '../../../constants/Styles';
-
-import { Badge } from 'react-native-elements';
+import RNPickerSelect from 'react-native-picker-select';
+import { Badge, CheckBox, SearchBar } from 'react-native-elements';
 import SwipeableRow from '../../../components/SwipeableRow';
 import DatePicker from 'react-native-date-picker';
-import { height } from '../../../constants/Layout';
+import { width, height } from '../../../constants/Layout';
 import InputField from '../../../components/InputField';
 import { isIphoneX } from '../../../utils/isPhoneX';
-// import { TouchableOpacity } from 'react-native-gesture-handler';
 // mock data
 const MultipleMockData = [
 	{
@@ -163,11 +162,11 @@ export default class TimerScreen extends Component {
 			{ day: 'F', isRepeat: false },
 			{ day: 'S', isRepeat: false },
 		],
-		// repeatDays: [{ S: false }, { M: false }, { T: false }, { W: false }, { T: false }, { F: false }, { S: false }],
 		isVisible: false,
 		filterOpen: false,
 		selectedBreaker: '',
 		checked: [],
+		search: '',
 	};
 
 	renderTimerFab = () => {
@@ -218,6 +217,10 @@ export default class TimerScreen extends Component {
 		}));
 	};
 
+	updateSearch = search => {
+		this.setState({ search });
+	};
+
 	componentDidUpdate = (prevProps, prevState) => {
 		if (prevState !== this.state) console.log(this.state);
 	};
@@ -226,27 +229,22 @@ export default class TimerScreen extends Component {
 		return (
 			<>
 				{/* Overlay */}
-				{this.state.isVisible ||
-					(this.state.filterOpen && (
-						<View
-							style={{
-								flex: 1,
-								position: 'absolute',
-								top: 0,
-								bottom: 0,
-								left: 0,
-								right: 0,
-								backgroundColor: 'rgba(0,0,0,0.5)',
-								zIndex: 1,
-							}}
-						/>
-					))}
+
+				<Modal
+					transparent
+					presentationStyle={'overFullScreen'}
+					animationType="fade"
+					visible={this.state.filterOpen || this.state.isVisible}
+				>
+					<View style={{ width, height, backgroundColor: 'rgba(0,0,0,0.5)' }} />
+				</Modal>
 
 				{/* Search Bar */}
 				<View style={{ padding: 15, flexDirection: 'row', alignItems: 'center' }}>
-					<View
+					{/* <View
 						style={[
 							{
+								// height: 30,
 								paddingVertical: 5,
 								paddingHorizontal: 10,
 								borderColor: '#c7cad1',
@@ -263,7 +261,32 @@ export default class TimerScreen extends Component {
 							placeholderTextColor="#b9bdc5"
 							style={{ fontSize: 14, fontFamily: 'Avenir-Roman' }}
 						/>
-					</View>
+					</View> */}
+					<SearchBar
+						containerStyle={{
+							flex: 1,
+							display: 'flex',
+							borderWidth: 1,
+							borderColor: '#c7cad1',
+							backgroundColor: 'transparent',
+							height: 30,
+							paddingVertical: 0,
+							borderRadius: 30,
+						}}
+						inputContainerStyle={{
+							borderWidth: 0,
+							backgroundColor: 'transparent',
+							minHeight: 10,
+							height: 30,
+							borderColor: '#c7cad1',
+						}}
+						inputStyle={{ fontFamily: 'Avenir-Roman', fontSize: 12, color: color.darkGrey }}
+						round
+						lightTheme
+						placeholder="Search..."
+						onChangeText={this.updateSearch}
+						value={this.state.search}
+					/>
 					<Icon
 						name="funnel"
 						style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }}
@@ -365,16 +388,29 @@ export default class TimerScreen extends Component {
 										justifyContent: 'center',
 										backgroundColor: color.primary,
 									}}
-									onPress={() => {
-										this.setState({ isVisible: false });
-
-										MultipleMockData[0].timer.push({
+									onPress={async () => {
+										await MultipleMockData[0].timer.push({
 											name: 'Slot 1',
 											time: this.state.timer,
 											active: this.state.active,
 											power: this.state.power,
 											repeatDays: this.state.repeatDays,
 										});
+										this.setState({
+											isVisible: false,
+											timer: new Date(),
+											active: false,
+											power: false,
+											repeatDays: [
+												{ day: 'S', isRepeat: false },
+												{ day: 'M', isRepeat: false },
+												{ day: 'T', isRepeat: false },
+												{ day: 'W', isRepeat: false },
+												{ day: 'T', isRepeat: false },
+												{ day: 'F', isRepeat: false },
+												{ day: 'S', isRepeat: false },
+											],
+										});
 									}}
 								>
 									<Text style={{ color: color.white }}>Confirm</Text>
@@ -409,11 +445,7 @@ export default class TimerScreen extends Component {
 								<Text style={[theme.smallTitle, theme.textDark]}>Filters</Text>
 								<Text
 									style={[theme.smallTitle, theme.textDanger]}
-									onPress={() =>
-										this.setState({
-											filterOpen: false,
-										})
-									}
+									onPress={() => this.setState({ filterOpen: false })}
 								>
 									Done
 								</Text>
@@ -432,9 +464,7 @@ export default class TimerScreen extends Component {
 							>
 								<RNPickerSelect
 									onValueChange={(value, index) =>
-										this.setState({
-											selectedBreaker: breaker[index - 1].sub,
-										})
+										this.setState({ selectedBreaker: breaker[index - 1].sub })
 									}
 									placeholder={{ label: 'Select Breaker', value: null }}
 									items={breaker}
@@ -483,7 +513,7 @@ export default class TimerScreen extends Component {
 										}
 									/>
 								)}
-								keyExtractor={(item, index) => `sub ${index}`}
+								keyExtractor={(item, index) => `sub${index}`}
 							/>
 						</View>
 					</View>