add timer screen & update camera not granted style

AppNavigation.js

@@ -9,11 +9,14 @@ import {
 } from 'react-navigation';
 } from 'react-navigation';
 import { BottomNavigation, BottomNavigationTab } from 'react-native-ui-kitten';
 import { BottomNavigation, BottomNavigationTab } from 'react-native-ui-kitten';
 
 
+// Smart meter
 import SmartMeterScreen from './screens/Private/SmartMeterScreen/SmartMeterScreen';
 import SmartMeterScreen from './screens/Private/SmartMeterScreen/SmartMeterScreen';
 import SmartMeterDetailScreen from './screens/Private/SmartMeterScreen/SmartMeterDetailScreen';
 import SmartMeterDetailScreen from './screens/Private/SmartMeterScreen/SmartMeterDetailScreen';
 import CameraScreen from './screens/Private/CameraScreen';
 import CameraScreen from './screens/Private/CameraScreen';
 
 
-import PageOne from './screens/Private/PageOne';
+// Timer
+import TimerScreen from './screens/Private/TimerScreen/TimerScreen';
+
 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 PageFour from './screens/Private/PageFour';
@@ -63,9 +66,9 @@ const CameraStack = createStackNavigator(
 	}
 	}
 );
 );
 
 
-const FirstStack = createStackNavigator(
+const TimerStack = createStackNavigator(
 	{
 	{
-		One: PageOne,
+		Timer: TimerScreen,
 	},
 	},
 	{
 	{
 		headerLayoutPreset: 'center',
 		headerLayoutPreset: 'center',
@@ -111,7 +114,7 @@ const BottomNavigationTabs = props => {
 
 
 	const BottomTabs = [
 	const BottomTabs = [
 		{ label: 'Smart Meter', icon: { name: 'home' } },
 		{ label: 'Smart Meter', icon: { name: 'home' } },
-		{ label: 'Time', 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' } },
 		{ label: 'Setting', icon: { type: 'SimpleLineIcons', name: 'settings' } },
 		{ label: 'Setting', icon: { type: 'SimpleLineIcons', name: 'settings' } },
@@ -183,7 +186,7 @@ const BottomNavigationTabs = props => {
 const WithBottomTabStack = createBottomTabNavigator(
 const WithBottomTabStack = createBottomTabNavigator(
 	{
 	{
 		SmartMeter: SmartMeterStack,
 		SmartMeter: SmartMeterStack,
-		One: FirstStack,
+		Timer: TimerStack,
 		Two: SecondStack,
 		Two: SecondStack,
 		Tree: ThirdStack,
 		Tree: ThirdStack,
 		Four: FourthStack,
 		Four: FourthStack,

constants/Styles.js

@@ -6,6 +6,8 @@ export const color = {
 	grey3: '#4a4a4a',
 	grey3: '#4a4a4a',
 	primary: '#f44c4c',
 	primary: '#f44c4c',
 	red1: '#fc3d3d',
 	red1: '#fc3d3d',
+	camBg: 'rgba(51,51,61,0.65)',
+	defaultBg: '#f3f3f3',
 };
 };
 
 
 export const theme = StyleSheet.create({
 export const theme = StyleSheet.create({
@@ -57,4 +59,9 @@ export const theme = StyleSheet.create({
 		borderBottomWidth: 1,
 		borderBottomWidth: 1,
 		paddingBottom: 5,
 		paddingBottom: 5,
 	},
 	},
+	container: {
+		flex: 1,
+		alignItems: 'center',
+		justifyContent: 'center',
+	},
 });
 });

package.json

@@ -19,7 +19,9 @@
 		"react-dom": "^16.8.6",
 		"react-dom": "^16.8.6",
 		"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
 		"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
 		"react-native-elements": "^1.1.0",
 		"react-native-elements": "^1.1.0",
+		"react-native-modal-datetime-picker": "^7.5.0",
 		"react-native-screens": "1.0.0-alpha.22",
 		"react-native-screens": "1.0.0-alpha.22",
+		"react-native-swipeout": "^2.3.6",
 		"react-native-ui-kitten": "^4.1.0",
 		"react-native-ui-kitten": "^4.1.0",
 		"react-native-validate-form": "^1.1.3",
 		"react-native-validate-form": "^1.1.3",
 		"react-native-vector-icons": "^6.6.0",
 		"react-native-vector-icons": "^6.6.0",

screens/Private/CameraScreen.js

@@ -5,6 +5,7 @@ import IoniconsHeaderButton from '../../components/IoniconsHeaderButton';
 import * as Permissions from 'expo-permissions';
 import * as Permissions from 'expo-permissions';
 import { Camera } from 'expo-camera';
 import { Camera } from 'expo-camera';
 import { width } from '../../constants/Layout';
 import { width } from '../../constants/Layout';
+import { StyleSheet } from 'react-native';
 
 
 export default class CameraScreen extends Component {
 export default class CameraScreen extends Component {
 	state = {
 	state = {
@@ -42,14 +43,41 @@ export default class CameraScreen extends Component {
 	});
 	});
 	render() {
 	render() {
 		const { hasCameraPermission, scanned } = this.state;
 		const { hasCameraPermission, scanned } = this.state;
+		const styles = StyleSheet.create({
+			container: {
+				flex: 1,
+				backgroundColor: 'rgba(51,51,61,0.65)',
+			},
+			center: {
+				alignItems: 'center',
+				justifyContent: 'center',
+			},
+			torchBtn: {
+				width: 55,
+				height: 55,
+				borderRadius: 100,
+				backgroundColor: 'rgba(255,255,255,0.23)',
+				borderColor: 'rgba(255,255,255,0.25)',
+				borderWidth: 2,
+				alignSelf: 'center',
+			},
+		});
 		if (hasCameraPermission === null) {
 		if (hasCameraPermission === null) {
-			return <Text>Requesting for camera permission</Text>;
+			return (
+				<View style={[styles.container, styles.center, { padding: 50 }]}>
+					<Text style={{ fontSize: 20, color: 'white' }}>Requesting for camera permission</Text>
+				</View>
+			);
 		}
 		}
 		if (hasCameraPermission === false) {
 		if (hasCameraPermission === false) {
-			return <Text>No access to camera</Text>;
+			return (
+				<View style={[styles.container, styles.center, { padding: 50 }]}>
+					<Text style={{ fontSize: 20, color: 'white' }}>No access to camera</Text>
+				</View>
+			);
 		}
 		}
 		return (
 		return (
-			<View style={{ flex: 1, backgroundColor: 'rgba(51,51,61,0.65)' }}>
+			<View style={styles.container}>
 				<View style={{ flex: 1, justifyContent: 'center', paddingHorizontal: 50 }}>
 				<View style={{ flex: 1, justifyContent: 'center', paddingHorizontal: 50 }}>
 					<Text style={{ fontSize: 18, color: 'white', textAlign: 'center', marginBottom: '5%' }}>
 					<Text style={{ fontSize: 18, color: 'white', textAlign: 'center', marginBottom: '5%' }}>
 						Scanning
 						Scanning
@@ -77,19 +105,9 @@ export default class CameraScreen extends Component {
 						flashMode={this.state.flashMode}
 						flashMode={this.state.flashMode}
 					/>
 					/>
 				</View>
 				</View>
-				<View style={{ flex: 1.7, justifyContent: 'center' }}>
+				<View style={[styles.center, { flex: 1.7 }]}>
 					<Button
 					<Button
-						style={{
-							width: 55,
-							height: 55,
-							borderRadius: 100,
-							backgroundColor: 'rgba(255,255,255,0.23)',
-							borderColor: 'rgba(255,255,255,0.25)',
-							borderWidth: 2,
-							alignSelf: 'center',
-							alignItems: 'center',
-							justifyContent: 'center',
-						}}
+						style={[styles.torchBtn, styles.center]}
 						onPress={() => {
 						onPress={() => {
 							this.setState({
 							this.setState({
 								flashMode:
 								flashMode:

screens/Private/TimerScreen/TimerScreen.js

+import React, { Component } from 'react';
+import { Text, Switch, Fab, Icon } from 'native-base';
+import { View } from 'react-native';
+import { HeaderButtons, Item } from 'react-navigation-header-buttons';
+import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
+import { color } from '../../../constants/Styles';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import { Badge } from 'react-native-elements';
+import Swipeout from 'react-native-swipeout';
+
+// Swipe button
+var swipeoutBtns = [
+	{
+		text: <Icon name="trash" style={{ color: 'white' }} />,
+		backgroundColor: color.primary,
+		onPress: () => console.log('press deleted!'),
+	},
+];
+
+// mock data
+const mockData = [
+	{
+		id: 1,
+		time: '6.00',
+		period: 'AM',
+		name: 'Slot 1',
+		active: true,
+		repeat: true,
+		day: [
+			{ day: 'S', dayActive: true },
+			{ day: 'M', dayActive: true },
+			{ day: 'T', dayActive: true },
+			{ day: 'W', dayActive: true },
+			{ day: 'T', dayActive: false },
+			{ day: 'F', dayActive: true },
+			{ day: 'S', dayActive: true },
+		],
+	},
+	{
+		id: 2,
+		time: '7.00',
+		period: 'AM',
+		name: 'Slot 2',
+		active: true,
+		repeat: false,
+		day: [
+			{ day: 'S', dayActive: true },
+			{ day: 'M', dayActive: true },
+			{ day: 'T', dayActive: true },
+			{ day: 'W', dayActive: true },
+			{ day: 'T', dayActive: false },
+			{ day: 'F', dayActive: true },
+			{ day: 'S', dayActive: false },
+		],
+	},
+	{
+		id: 3,
+		time: '8.00',
+		period: 'PM',
+		name: 'Slot 3',
+		active: false,
+		repeat: true,
+		day: [
+			{ day: 'S', dayActive: false },
+			{ day: 'M', dayActive: false },
+			{ day: 'T', dayActive: true },
+			{ day: 'W', dayActive: false },
+			{ day: 'T', dayActive: false },
+			{ day: 'F', dayActive: false },
+			{ day: 'S', dayActive: false },
+		],
+	},
+];
+
+export default class TimerScreen extends Component {
+	static navigationOptions = ({ navigation }) => ({
+		title: 'Timer',
+		headerLeft: (
+			<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
+				<Item title="menu" iconName="ios-menu" onPress={() => console.log('menu')} />
+			</HeaderButtons>
+		),
+		headerRight: (
+			<TouchableOpacity onPress={() => console.log('clicked')}>
+				<View style={{ marginRight: 17 }}>
+					<Icon name="ios-notifications" style={{ color: '#fff' }} />
+					<Badge
+						badgeStyle={{
+							width: 12,
+							height: 12,
+							borderWidth: 2,
+							backgroundColor: '#f8e71c',
+							borderColor: color.primary,
+							borderRadius: 6,
+						}}
+						containerStyle={{ position: 'absolute', top: -2, right: -4 }}
+					/>
+				</View>
+			</TouchableOpacity>
+		),
+	});
+	render() {
+		const TimerCard = props => {
+			const data = props.data;
+			return (
+				<Swipeout right={swipeoutBtns} style={{ backgroundColor: 'transparent' }}>
+					<View style={{ paddingHorizontal: 20 }}>
+						<View
+							style={{
+								flexDirection: 'row',
+								paddingVertical: 15,
+								borderBottomColor: 'rgba(151,151,151,0.3)',
+								borderBottomWidth: 1,
+							}}
+						>
+							<View style={{ flex: 1 }}>
+								<Text style={{ fontSize: 22, color: '#4a4a4a', fontFamily: 'Avenir-Roman' }}>
+									{data.time} <Text style={{ fontSize: 12 }}>{data.period}</Text>
+								</Text>
+								<View style={{ flexDirection: 'row' }}>
+									{data.day.map((item, index) => (
+										<Text
+											key={index}
+											style={{ fontSize: 12, color: item.dayActive ? color.primary : '#9b9b9b' }}
+										>
+											{item.day}{' '}
+										</Text>
+									))}
+								</View>
+							</View>
+							<View style={{ flex: 1 }}>
+								<Text style={{ fontSize: 22, color: '#4a4a4a', fontFamily: 'Avenir-Roman' }}>
+									{data.name}
+								</Text>
+								<View style={{ flexDirection: 'row' }}>
+									<Text style={{ fontSize: 12, color: '#9b9b9b' }}>
+										Active: {data.active ? 'on' : 'off'}{' '}
+									</Text>
+									<Text style={{ fontSize: 12, color: '#9b9b9b' }}>
+										Repeat: {data.repeat ? 'on' : 'off'}
+									</Text>
+								</View>
+							</View>
+							<View style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
+								<Switch
+									value={data.active}
+									trackColor={{ true: 'rgba(238,84,84,0.5)' }}
+									ios_backgroundColor={'#dfdfdf'}
+									thumbColor={'#ee5454'}
+								/>
+							</View>
+						</View>
+					</View>
+				</Swipeout>
+			);
+		};
+		const TimerFab = () => {
+			return (
+				<Fab
+					// active={this.state.active}
+					// direction="up"
+					containerStyle={{ marginBottom: 100 }}
+					style={{ backgroundColor: color.primary }}
+					position="bottomRight"
+					onPress={() => console.log('create new timer!')}
+				>
+					<Icon name="add" />
+				</Fab>
+			);
+		};
+		return (
+			<View style={{ flex: 1, backgroundColor: 'white', paddingVertical: 10 }}>
+				{mockData.map((item, index) => (
+					<TimerCard key={index} data={item} />
+				))}
+				<TimerFab />
+			</View>
+		);
+	}
+}