Skip to content

S
safetcut-app
Commit ad2a0e74 by Tonk
Options

add notification screen

parent c9bd1136
Showing with 169 additions and 7 deletions
AppNavigation.js
...@@ -22,6 +22,9 @@ import TimerScreen from './screens/Private/TimerScreen/TimerScreen'; ...@@ -22,6 +22,9 @@ import TimerScreen from './screens/Private/TimerScreen/TimerScreen';
import SettingScreen from './screens/Private/SettingScreen/SettingScreen'; import SettingScreen from './screens/Private/SettingScreen/SettingScreen';
import Setting from './screens/Private/SettingScreen/Setting'; import Setting from './screens/Private/SettingScreen/Setting';
// Notification
import NotificationScreen from './screens/Private/NotificationScreen/NotificationScreen';
import PageTwo from './screens/Private/PageTwo'; import PageTwo from './screens/Private/PageTwo';
import PageTree from './screens/Private/PageTree'; import PageTree from './screens/Private/PageTree';
...@@ -81,6 +84,13 @@ const TimerStack = createStackNavigator( ...@@ -81,6 +84,13 @@ const TimerStack = createStackNavigator(
} }
); );
const NotificationStack = createStackNavigator(
{
Notification: NotificationScreen,
},
{ headerLayoutPreset: 'center', defaultNavigationOptions }
);
const SecondStack = createStackNavigator( const SecondStack = createStackNavigator(
{ {
Two: PageTwo, Two: PageTwo,
...@@ -121,7 +131,7 @@ const BottomNavigationTabs = props => { ...@@ -121,7 +131,7 @@ const BottomNavigationTabs = props => {
{ label: 'Device', icon: { name: 'home' } }, { label: 'Device', icon: { name: 'home' } },
{ label: 'Timer', icon: { type: 'MaterialIcons', name: 'timer' } }, { label: 'Timer', icon: { type: 'MaterialIcons', name: 'timer' } },
{ label: 'History', icon: { type: 'SimpleLineIcons', name: 'chart' } }, { 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' } }, { label: 'Setting', icon: { type: 'SimpleLineIcons', name: 'settings' } },
]; ];
...@@ -193,7 +203,7 @@ const WithBottomTabStack = createBottomTabNavigator( ...@@ -193,7 +203,7 @@ const WithBottomTabStack = createBottomTabNavigator(
SmartMeter: SmartMeterStack, SmartMeter: SmartMeterStack,
Timer: TimerStack, Timer: TimerStack,
Two: SecondStack, Two: SecondStack,
Tree: ThirdStack, Notification: NotificationStack,
Setting: SettingStack, Setting: SettingStack,
}, },
{ {
......
screens/Private/NotificationScreen/NotificationScreen.js 0 → 100644
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({ ...@@ -568,19 +568,19 @@ const styles = StyleSheet.create({
searchBarContainer: { searchBarContainer: {
flex: 1, flex: 1,
display: 'flex', display: 'flex',
borderWidth: 1,
borderColor: color.grey,
backgroundColor: 'transparent', backgroundColor: 'transparent',
height: 30, height: 30,
paddingVertical: 0, paddingVertical: 0,
borderRadius: 30, borderTopWidth: 0,
borderBottomWidth: 0,
}, },
searchBarInputContainer: { searchBarInputContainer: {
borderWidth: 0, borderWidth: 1,
borderBottomWidth: 1,
backgroundColor: 'transparent', backgroundColor: 'transparent',
minHeight: 10, minHeight: 10,
height: 30, height: 30,
borderColor: color.grey, borderColor: '#c7cad1',
}, },
searchBarInput: { fontFamily: 'Avenir-Roman', fontSize: 12, color: color.grey }, searchBarInput: { fontFamily: 'Avenir-Roman', fontSize: 12, color: color.grey },
separator: { separator: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment