demo add timer

screens/Private/TimerScreen/TimerScreen.js

@@ -11,6 +11,7 @@ import SwipeableRow from '../../../components/SwipeableRow';
 import DatePicker from 'react-native-date-picker';
 import { height } from '../../../constants/Layout';
 import InputField from '../../../components/InputField';
+import { isIphoneX } from '../../../utils/isPhoneX';
 
 // mock data
 const MultipleMockData = [
@@ -340,15 +341,20 @@ export default class TimerScreen extends Component {
 			</TouchableOpacity>
 		),
 	});
+
 	state = {
-		date: new Date(),
+		currentTime: new Date(),
 		isVisible: false,
 	};
 
 	renderTimerFab = () => {
 		return (
 			<Fab
-				containerStyle={{ bottom: '15%' }}
+				containerStyle={{
+					bottom: '15%',
+					// right: '50%', // centerFAB
+					// marginRight: -28,
+				}}
 				style={{ backgroundColor: color.primary }}
 				position="bottomRight"
 				onPress={() => this.setState({ isVisible: true })}
@@ -379,6 +385,7 @@ export default class TimerScreen extends Component {
 							heading={item.tabName}
 						>
 							<FlatList
+								contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }}
 								data={item.timer}
 								ListEmptyComponent={() => (
 									<View>
@@ -400,19 +407,14 @@ export default class TimerScreen extends Component {
 					animationType="slide"
 					visible={this.state.isVisible}
 				>
-					<View
-						style={{
-							flex: 1,
-							backgroundColor: 'rgba(0, 0, 0,0.5)',
-						}}
-					>
+					<View style={{ flex: 1, backgroundColor: 'rgba(0, 0, 0,0.5)' }}>
 						<ScrollView contentContainerStyle={styles.scrollContainer}>
 							<Text style={theme.title}>Create Timer</Text>
 							<View>
 								<Text style={[theme.normalText, theme.textDark]}>Set Time</Text>
 								<DatePicker
-									date={this.state.date}
-									onDateChange={date => this.setState({ date })}
+									date={this.state.currentTime}
+									onDateChange={date => this.setState({ currentTime: date })}
 									mode="time"
 									style={{ height: 100 }}
 								/>
@@ -443,7 +445,6 @@ export default class TimerScreen extends Component {
 									))}
 								</View>
 							</View>
-
 							<View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
 								<Button
 									transparent
@@ -459,7 +460,41 @@ export default class TimerScreen extends Component {
 										justifyContent: 'center',
 										backgroundColor: color.primary,
 									}}
-									onPress={() => this.setState({ isVisible: false })}
+									onPress={() => {
+										this.setState({ isVisible: false });
+										let hours = this.state.currentTime.getHours();
+										let minutes = this.state.currentTime.getMinutes();
+										if (minutes < 10) {
+											minutes = '0' + minutes;
+										}
+										let suffix = 'AM';
+										if (hours >= 12) {
+											suffix = 'PM';
+											hours = hours - 12;
+										}
+										if (hours == 0) {
+											hours = 12;
+										}
+
+										{
+											MultipleMockData[1].timer.push({
+												time: `${hours}:${minutes}`,
+												period: suffix,
+												name: 'Slot 1',
+												active: true,
+												power: 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 },
+												],
+											});
+										}
+									}}
 								>
 									<Text style={{ color: color.white }}>Confirm</Text>
 								</Button>