update search notification

screens/Private/NotificationScreen/NotificationScreen.js

 import React from 'react';
 import { Text, Tab, Tabs, ScrollableTab, Icon } from 'native-base';
-import { View, StyleSheet, FlatList, ScrollView } from 'react-native';
+import { View, StyleSheet, FlatList, ScrollView, Modal } from 'react-native';
 import { color, theme } from '../../../constants/Styles';
 import { SearchBar } from 'react-native-elements';
 import { format, isToday, isYesterday, isSameDay } from 'date-fns';
+import SlideUpModal from '../../../components/SlideUpModal';
+import FadeDimBG from '../../../components/FadeDimBG';
+import { width, height } from '../../../constants/Layout';
+import RNPickerSelect from 'react-native-picker-select';
 
 const tabHeader = [
 	{ type: 'all', label: 'All' },
@@ -15,12 +19,26 @@ export default class NotificationScreen extends React.Component {
 	static navigationOptions = ({ navigation }) => ({
 		title: 'Notifications',
 	});
-	state = { search: '', data: [] };
+	state = {
+		search: '',
+		data: [],
+		initial: [],
+		isfilterVisible: false,
+	};
 	componentDidMount() {
 		this.sortDate();
 	}
-	updateSearch = search => {
-		this.setState({ search });
+	updateSearch = text => {
+		this.setState({ search: text });
+		const newData = this.state.initial.filter(item => {
+			const itemData = `${item.user.toUpperCase()} ${item.action.toUpperCase()} ${item.device.toUpperCase()}`;
+			const textData = text.toUpperCase();
+
+			return itemData.indexOf(textData) > -1;
+		});
+		this.setState({
+			data: newData,
+		});
 	};
 	renderActionCard(data) {
 		return (
@@ -45,12 +63,14 @@ export default class NotificationScreen extends React.Component {
 		);
 	}
 	sortDate() {
+		const sortData = dt2.sort(function(a, b) {
+			var dateA = new Date(a.time),
+				dateB = new Date(b.time);
+			return dateB - dateA;
+		});
 		this.setState({
-			data: dt2.sort(function(a, b) {
-				var dateA = new Date(a.time),
-					dateB = new Date(b.time);
-				return dateB - dateA;
-			}),
+			data: sortData,
+			initial: sortData,
 		});
 	}
 	renderDayList(type) {
@@ -103,7 +123,7 @@ export default class NotificationScreen extends React.Component {
 					renderTabBar={() => <ScrollableTab style={{ backgroundColor: color.defaultBg, borderWidth: 0 }} />}
 				>
 					{tabHeader.map((item, index) => (
-						<Tab heading={item.label} {...TabStyle} key={index}>
+						<Tab heading={item.label} {...TabStyle} key={`tab${index}`}>
 							<View
 								style={{
 									padding: 15,
@@ -118,7 +138,7 @@ export default class NotificationScreen extends React.Component {
 									round
 									lightTheme
 									placeholder="Search..."
-									onChangeText={this.updateSearch}
+									onChangeText={text => this.updateSearch(text)}
 									value={this.state.search}
 								/>
 								<Icon
@@ -133,10 +153,64 @@ export default class NotificationScreen extends React.Component {
 						</Tab>
 					))}
 				</Tabs>
+				<Modal
+					transparent
+					presentationStyle={'overFullScreen'}
+					animationType="fade"
+					visible={this.state.isfilterVisible}
+				>
+					<FadeDimBG />
+					<SlideUpModal ending={0.3} style={styles.filterModal}>
+						<View style={[theme.rowContainer, styles.filterHeader]}>
+							<Text style={[theme.smallTitle, theme.textDark]}>Reset</Text>
+							<Text style={[theme.smallTitle, theme.textDark]}>Filters</Text>
+							<Text
+								style={[theme.smallTitle, theme.textDanger]}
+								onPress={() => this.setState({ isfilterVisible: false })}
+							>
+								Done
+							</Text>
+						</View>
+						<Text style={[theme.smallTitle, theme.textDanger, theme.mt2]}>Select Date</Text>
+						<View style={[theme.mt2, styles.pickerContainer]}>
+							<RNPickerSelect
+								onValueChange={value => console.log(value)}
+								items={[
+									{ label: 'Today', value: 'today' },
+									{ label: 'Yesterday', value: 'yesterday' },
+									{ label: 'Last 7 days', value: '7days' },
+									{ label: 'Last 30days', value: '30days' },
+									{ label: 'This month', value: 'month' },
+									{ label: 'Last month', value: 'lastMonth' },
+									{ label: 'Custom', value: 'custom' },
+								]}
+								useNativeAndroidPickerStyle={false}
+								style={pickerStyle}
+								Icon={() => <Icon name="ios-arrow-down" style={{ fontSize: 14, color: '#c8c8c8' }} />}
+							/>
+						</View>
+					</SlideUpModal>
+				</Modal>
 			</View>
 		);
 	}
 }
+const pickerStyle = {
+	inputIOS: {
+		color: color.darkGrey,
+		fontFamily: 'Avenir-Roman',
+	},
+	iconContainer: {
+		top: Platform.OS === 'android' ? 5 : undefined,
+		right: 0,
+	},
+	inputAndroid: {
+		height: 20,
+		fontFamily: 'Avenir-Roman',
+		fontSize: 14,
+		paddingVertical: 0,
+	},
+};
 
 const styles = StyleSheet.create({
 	searchBarContainer: {
@@ -177,4 +251,26 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		justifyContent: 'center',
 	},
+	filterModal: {
+		flex: 0.7,
+		top: height * 0.3,
+		paddingTop: 20,
+		paddingBottom: 18,
+		paddingHorizontal: 25,
+		backgroundColor: color.white,
+		borderTopLeftRadius: 10,
+		borderTopRightRadius: 10,
+	},
+	filterHeader: {
+		justifyContent: 'space-between',
+		paddingBottom: 10,
+		borderBottomColor: 'rgba(189, 192, 200, 0.3)',
+		borderBottomWidth: 1,
+	},
+	pickerContainer: {
+		borderWidth: 1,
+		borderColor: '#dcdcdc',
+		borderRadius: 5,
+		padding: 10,
+	},
 });

screens/Private/NotificationScreen/notification.json

@@ -10,5 +10,6 @@
 	},
 	{ "type": "log", "user": "Sukanya161", "time": 1566371305, "action": "Switched on", "device": "sub breaker 1" },
 	{ "type": "log", "user": "Sukanya161", "time": 1566374629, "action": "Switched on", "device": "sub breaker 3" },
-	{ "type": "notification", "user": "Tonk", "time": 1566317460, "action": "leaved", "device": "office" }
+	{ "type": "notification", "user": "Tonk", "time": 1566317460, "action": "Leaved", "device": "office" },
+	{ "type": "notification", "user": "Tonk", "time": 1566438573, "action": "Entered", "device": "office" }
 ]