update font size, add setting screen, delete unused from timer

AppNavigation.js

@@ -18,9 +18,11 @@ import CameraScreen from './screens/Private/CameraScreen';
 // Timer
 // Timer
 import TimerScreen from './screens/Private/TimerScreen/TimerScreen';
 import TimerScreen from './screens/Private/TimerScreen/TimerScreen';
 
 
+// Setting
+import SettingScreen from './screens/Private/SettingScreen/SettingScreen';
+
 import PageTwo from './screens/Private/PageTwo';
 import PageTwo from './screens/Private/PageTwo';
 import PageTree from './screens/Private/PageTree';
 import PageTree from './screens/Private/PageTree';
-import PageFour from './screens/Private/PageFour';
 
 
 import AuthLoadingScreen from './screens/Public/AuthLoadingScreen';
 import AuthLoadingScreen from './screens/Public/AuthLoadingScreen';
 
 
@@ -38,7 +40,7 @@ const defaultNavigationOptions = {
 	},
 	},
 	headerTintColor: '#fff',
 	headerTintColor: '#fff',
 	headerTitleStyle: {
 	headerTitleStyle: {
-		fontWeight: 'bold',
+		fontSize: 18,
 		fontFamily: 'Avenir-Roman',
 		fontFamily: 'Avenir-Roman',
 	},
 	},
 };
 };
@@ -97,10 +99,9 @@ const ThirdStack = createStackNavigator(
 		defaultNavigationOptions,
 		defaultNavigationOptions,
 	}
 	}
 );
 );
-
-const FourthStack = createStackNavigator(
+const SettingStack = createStackNavigator(
 	{
 	{
-		Four: PageFour,
+		Setting: SettingScreen,
 	},
 	},
 	{
 	{
 		headerLayoutPreset: 'center',
 		headerLayoutPreset: 'center',
@@ -115,7 +116,7 @@ const BottomNavigationTabs = props => {
 	};
 	};
 
 
 	const BottomTabs = [
 	const BottomTabs = [
-		{ label: 'Smart Meter', icon: { name: 'home' } },
+		{ label: 'Device', icon: { name: 'home' } },
 		{ label: 'Timer', icon: { name: 'md-time' } },
 		{ label: 'Timer', icon: { name: 'md-time' } },
 		{ label: 'History', icon: { type: 'SimpleLineIcons', name: 'chart' } },
 		{ label: 'History', icon: { type: 'SimpleLineIcons', name: 'chart' } },
 		{ label: 'Share', icon: { name: 'ios-share-alt' } },
 		{ label: 'Share', icon: { name: 'ios-share-alt' } },
@@ -157,8 +158,8 @@ const BottomNavigationTabs = props => {
 							title={tab.label}
 							title={tab.label}
 							titleStyle={{
 							titleStyle={{
 								fontFamily: 'Avenir-Roman',
 								fontFamily: 'Avenir-Roman',
-								fontSize: 11,
-								fontWeight: '500',
+								fontSize: 12,
+								fontWeight: '300',
 								marginVertical: 0,
 								marginVertical: 0,
 								marginBottom: 2,
 								marginBottom: 2,
 							}}
 							}}
@@ -191,7 +192,7 @@ const WithBottomTabStack = createBottomTabNavigator(
 		Timer: TimerStack,
 		Timer: TimerStack,
 		Two: SecondStack,
 		Two: SecondStack,
 		Tree: ThirdStack,
 		Tree: ThirdStack,
-		Four: FourthStack,
+		Setting: SettingStack,
 	},
 	},
 	{
 	{
 		initialRouteName: 'Timer', // default SmartMeter
 		initialRouteName: 'Timer', // default SmartMeter

constants/Styles.js

@@ -55,17 +55,17 @@ export const theme = StyleSheet.create({
 		fontFamily: 'Avenir-Roman',
 		fontFamily: 'Avenir-Roman',
 	},
 	},
 	normalText: {
 	normalText: {
-		fontSize: 15,
+		fontSize: 16,
 		fontFamily: 'Avenir-Roman',
 		fontFamily: 'Avenir-Roman',
 		color: color.grey,
 		color: color.grey,
 	},
 	},
 	description: {
 	description: {
-		fontSize: 12,
+		fontSize: 14,
 		fontFamily: 'Avenir-Roman',
 		fontFamily: 'Avenir-Roman',
 		color: color.grey,
 		color: color.grey,
 	},
 	},
 	smDescription: {
 	smDescription: {
-		fontSize: 10,
+		fontSize: 12,
 		fontFamily: 'Avenir-Roman',
 		fontFamily: 'Avenir-Roman',
 		color: color.grey,
 		color: color.grey,
 	},
 	},

screens/Private/SettingScreen/SettingScreen.js

+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { ListItem, Body, Text, Icon, Right, Switch, List } from 'native-base';
+import { theme, color } from '../../../constants/Styles';
+
+const data = {
+	breaker: 'Main Breaker',
+	name: 'Main Breaker',
+	description: 'Lorem ipsum dolorsit amet,consectetur adipiscing elit. Cras sagitti.',
+	rcbo: 10,
+	notification: true,
+};
+export default class SettingScreen extends React.Component {
+	static navigationOptions = ({ navigation }) => ({
+		title: 'Setting',
+	});
+	render() {
+		return (
+			<View style={[theme.container]}>
+				<List style={styles.ListItemContainer}>
+					<ListItem itemDivider>
+						<Body>
+							<Text style={theme.description}>{data.breaker.toUpperCase()}</Text>
+						</Body>
+					</ListItem>
+					<ListItem>
+						<Body>
+							<Text style={[theme.normalText, theme.textDark]}>Name</Text>
+							<Text note numberOfLines={1} style={theme.description}>
+								{data.name}
+							</Text>
+						</Body>
+						<Right>
+							<Icon name="arrow-forward" />
+						</Right>
+					</ListItem>
+					<ListItem>
+						<Body>
+							<Text style={[theme.normalText, theme.textDark]}>Description</Text>
+							<Text note numberOfLines={2} style={theme.description}>
+								{data.description}
+							</Text>
+						</Body>
+						<Right>
+							<Icon name="arrow-forward" />
+						</Right>
+					</ListItem>
+					<ListItem>
+						<Body>
+							<Text style={[theme.normalText, theme.textDark]}>RCBO</Text>
+							<Text note numberOfLines={1} style={theme.description}>
+								{data.rcbo} mA
+							</Text>
+						</Body>
+						<Right>
+							<Icon name="arrow-forward" />
+						</Right>
+					</ListItem>
+					<ListItem>
+						<Body>
+							<Text style={[theme.normalText, theme.textDark]}>Notification</Text>
+						</Body>
+						<Right>
+							<Switch value={data.notification} />
+						</Right>
+					</ListItem>
+				</List>
+				<List style={styles.ListItemContainer}>
+					<ListItem>
+						<Body>
+							<Text style={[theme.normalText, theme.textDanger]}>Delete</Text>
+						</Body>
+					</ListItem>
+				</List>
+			</View>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	ListItemContainer: {
+		backgroundColor: color.white,
+		marginTop: 20,
+	},
+});

screens/Private/TimerScreen/TimerScreen.js

@@ -201,7 +201,6 @@ class TimerScreen extends Component {
 		isfilterVisible: false,
 		isfilterVisible: false,
 
 
 		search: '',
 		search: '',
-		// test: new Animated.Value(height * 1),
 	};
 	};
 
 
 	// renderTimerFab = () => {
 	// renderTimerFab = () => {
@@ -263,26 +262,9 @@ class TimerScreen extends Component {
 		prevProps !== this.props && console.log(this.props);
 		prevProps !== this.props && console.log(this.props);
 	};
 	};
 
 
-	// onOpenModal = () => {
-	// 	this.setState({
-	// 		isfilterVisible: true,
-	// 	});
-	// };
-
 	render() {
 	render() {
 		return (
 		return (
 			<>
 			<>
-				{/* Overlay */}
-
-				{/* <Modal
-					transparent
-					presentationStyle={'overFullScreen'}
-					animationType="fade"
-					visible={this.state.isfilerVisible || this.state.isAddVisible}
-				>
-					<View style={{ width, height, backgroundColor: 'rgba(0,0,0,0.5)' }} />
-				</Modal> */}
-
 				{/* Search Bar */}
 				{/* Search Bar */}
 				<View style={{ padding: 15, flexDirection: 'row', alignItems: 'center' }}>
 				<View style={{ padding: 15, flexDirection: 'row', alignItems: 'center' }}>
 					<SearchBar
 					<SearchBar
@@ -311,7 +293,6 @@ class TimerScreen extends Component {
 							<Text style={[theme.normalText, theme.mt2]}>No Subbreaker</Text>
 							<Text style={[theme.normalText, theme.mt2]}>No Subbreaker</Text>
 						</View>
 						</View>
 					)}
 					)}
-					// ListFooterComponent={() => item.timer.length > 0 && <View style={styles.separator} />}
 					ItemSeparatorComponent={() => <View style={styles.separator} />}
 					ItemSeparatorComponent={() => <View style={styles.separator} />}
 					renderItem={({ item, index }) => (
 					renderItem={({ item, index }) => (
 						<SwipeableRow item={item} index={index} onSwipeOpen={this.autoCloseSwipeRow} />
 						<SwipeableRow item={item} index={index} onSwipeOpen={this.autoCloseSwipeRow} />