add notification screen

AppNavigation.js

@@ -22,6 +22,9 @@ import TimerScreen from './screens/Private/TimerScreen/TimerScreen';
 import SettingScreen from './screens/Private/SettingScreen/SettingScreen';
 import Setting from './screens/Private/SettingScreen/Setting';
 
+// Notification
+import NotificationScreen from './screens/Private/NotificationScreen/NotificationScreen';
+
 import PageTwo from './screens/Private/PageTwo';
 import PageTree from './screens/Private/PageTree';
 
@@ -81,6 +84,13 @@ const TimerStack = createStackNavigator(
 	}
 );
 
+const NotificationStack = createStackNavigator(
+	{
+		Notification: NotificationScreen,
+	},
+	{ headerLayoutPreset: 'center', defaultNavigationOptions }
+);
+
 const SecondStack = createStackNavigator(
 	{
 		Two: PageTwo,
@@ -121,7 +131,7 @@ const BottomNavigationTabs = props => {
 		{ label: 'Device', icon: { name: 'home' } },
 		{ label: 'Timer', icon: { type: 'MaterialIcons', name: 'timer' } },
 		{ label: 'History', icon: { type: 'SimpleLineIcons', name: 'chart' } },
-		{ label: 'Share', icon: { type: 'SimpleLineIcons', name: 'action-redo' } },
+		{ label: 'Notification', icon: { type: 'MaterialIcons', name: 'notifications-none' } },
 		{ label: 'Setting', icon: { type: 'SimpleLineIcons', name: 'settings' } },
 	];
 
@@ -193,7 +203,7 @@ const WithBottomTabStack = createBottomTabNavigator(
 		SmartMeter: SmartMeterStack,
 		Timer: TimerStack,
 		Two: SecondStack,
-		Tree: ThirdStack,
+		Notification: NotificationStack,
 		Setting: SettingStack,
 	},
 	{

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 { color, theme } from '../../../constants/Styles';
+import { SearchBar } from 'react-native-elements';
+
+const mockdata = [
+	{ time: 1566207933, user: 'Sukanya161', log: 'Switch on sub breaker1' },
+	{ time: 1566207933, user: 'Sukanya161', log: 'Switch off sub breaker1' },
+	{ time: 1566086400, user: 'Sukanya161', log: 'Switch on sub breaker1' },
+	{ time: 1566086400, user: 'Sukanya161', log: 'Switch off sub breaker1' },
+];
+export default class NotificationScreen extends React.Component {
+	static navigationOptions = ({ navigation }) => ({
+		title: 'Notifications',
+	});
+	state = { search: '' };
+	updateSearch = search => {
+		this.setState({ search });
+	};
+	render() {
+		const TabStyle = {
+			textStyle: theme.description,
+			activeTextStyle: [theme.description, theme.textWhite],
+			tabStyle: { backgroundColor: color.white, borderRadius: 100, margin: 10 },
+			activeTabStyle: { backgroundColor: color.primary, borderRadius: 100, margin: 10 },
+			style: { backgroundColor: color.defaultBg },
+		};
+
+		const ActivityCard = () => {
+			const { username, time, activity } = this.props;
+			return (
+				<View
+					style={[
+						theme.rowContainer,
+						{
+							paddingHorizontal: 30,
+							paddingVertical: 10,
+							alignItems: 'flex-start',
+							backgroundColor: color.white,
+							width: '100%',
+						},
+					]}
+				>
+					<View
+						style={{
+							width: 16,
+							height: 16,
+							marginRight: 10,
+							borderRadius: 100,
+							backgroundColor: color.primary,
+							alignItems: 'center',
+							justifyContent: 'center',
+						}}
+					>
+						{/* first letter of operate's username */}
+						<Text style={{ color: color.white, fontSize: 8 }}>A</Text>
+					</View>
+					<View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+						<View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 5 }]}>
+							{/* operate's username */}
+							<Text style={[theme.smDescription]}>{username || 'Sukanya161'}</Text>
+							{/* operate time */}
+							<Text style={[theme.smDescription]}>{time || '10:17 PM'}</Text>
+						</View>
+						{/* operate activity. */}
+						<Text style={[theme.normalText, theme.textDark]}>{activity || 'Switch on sub breaker1'}</Text>
+					</View>
+				</View>
+			);
+		};
+		return (
+			<View style={theme.container}>
+				<Tabs
+					tabBarUnderlineStyle={{ backgroundColor: 'transparent' }}
+					renderTabBar={() => <ScrollableTab style={{ backgroundColor: color.defaultBg, borderWidth: 0 }} />}
+				>
+					{['All', 'Notifications', 'Logging'].map((item, index) => (
+						<Tab heading={item} {...TabStyle}>
+							<View
+								style={{
+									padding: 15,
+									flexDirection: 'row',
+									alignItems: 'center',
+								}}
+							>
+								<SearchBar
+									containerStyle={styles.searchBarContainer}
+									inputContainerStyle={styles.searchBarInputContainer}
+									inputStyle={styles.searchBarInput}
+									round
+									lightTheme
+									placeholder="Search..."
+									onChangeText={this.updateSearch}
+									value={this.state.search}
+								/>
+								<Icon
+									name="md-funnel"
+									style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }}
+									onPress={() => this.setState({ isfilterVisible: true })}
+								/>
+							</View>
+							{/* filter date length */}
+							<ScrollView>
+								{/* >date */}
+								<View>
+									<Text style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}>
+										Today {/* Today/Yesterday/date..  */}
+									</Text>
+									{/* >>log list */}
+									<FlatList data={[1, 2]} renderItem={() => <ActivityCard />} />
+								</View>
+								<View>
+									<Text style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}>
+										Yesterday {/* Today/Yesterday/date..  */}
+									</Text>
+									{/* >>log list */}
+									<FlatList data={[1, 2, 3]} renderItem={() => <ActivityCard />} />
+								</View>
+							</ScrollView>
+						</Tab>
+					))}
+				</Tabs>
+			</View>
+		);
+	}
+}
+
+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,
+	},
+});

screens/Private/TimerScreen/TimerScreen.js

@@ -568,19 +568,19 @@ const styles = StyleSheet.create({
 	searchBarContainer: {
 		flex: 1,
 		display: 'flex',
-		borderWidth: 1,
-		borderColor: color.grey,
 		backgroundColor: 'transparent',
 		height: 30,
 		paddingVertical: 0,
-		borderRadius: 30,
+		borderTopWidth: 0,
+		borderBottomWidth: 0,
 	},
 	searchBarInputContainer: {
-		borderWidth: 0,
+		borderWidth: 1,
+		borderBottomWidth: 1,
 		backgroundColor: 'transparent',
 		minHeight: 10,
 		height: 30,
-		borderColor: color.grey,
+		borderColor: '#c7cad1',
 	},
 	searchBarInput: { fontFamily: 'Avenir-Roman', fontSize: 12, color: color.grey },
 	separator: {