add confirm delete modal to TimerScreen

components/SwipeableRow.js

 import React, { Component } from 'react';
 import React, { Component } from 'react';
-import { Text } from 'native-base';
+import { Text, Button } from 'native-base';
 import { View, Animated, StyleSheet } from 'react-native';
 import { View, Animated, StyleSheet } from 'react-native';
 import { color } from '../constants/Styles';
 import { color } from '../constants/Styles';
 import { RectButton } from 'react-native-gesture-handler';
 import { RectButton } from 'react-native-gesture-handler';
 import Swipeable from 'react-native-gesture-handler/Swipeable';
 import Swipeable from 'react-native-gesture-handler/Swipeable';
 import IconMaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import IconMaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { Overlay } from 'react-native-elements';
 
 
 const AnimatedIcon = Animated.createAnimatedComponent(IconMaterialIcons);
 const AnimatedIcon = Animated.createAnimatedComponent(IconMaterialIcons);
 
 
@@ -68,6 +69,9 @@ class SwipeableRow extends Component {
 	// 		</RectButton>
 	// 		</RectButton>
 	// 	);
 	// 	);
 	// };
 	// };
+	state = {
+		isVisible: false,
+	};
 	renderRightActions = (progress, dragX) => {
 	renderRightActions = (progress, dragX) => {
 		const scale = dragX.interpolate({
 		const scale = dragX.interpolate({
 			inputRange: [-80, 0],
 			inputRange: [-80, 0],
@@ -75,21 +79,48 @@ class SwipeableRow extends Component {
 			extrapolate: 'clamp',
 			extrapolate: 'clamp',
 		});
 		});
 		return (
 		return (
-			<RectButton style={styles.rightAction} onPress={this.close}>
-				<AnimatedIcon
-					name="delete-forever"
-					size={30}
-					color="#fff"
-					style={[styles.actionIcon, { transform: [{ scale }] }]}
-				/>
-			</RectButton>
+			<>
+				<RectButton style={styles.rightAction} onPress={this.cfDelete}>
+					<AnimatedIcon
+						name="delete-forever"
+						size={30}
+						color="#fff"
+						style={[styles.actionIcon, { transform: [{ scale }] }]}
+					/>
+				</RectButton>
+				<Overlay
+					borderRadius={20}
+					height={'25%'}
+					width={'90%'}
+					overlayStyle={styles.cfDelOverlay}
+					isVisible={this.state.isVisible}
+					onBackdropPress={() => this.setState({ isVisible: false })}
+				>
+					<Text style={styles.cfDelText}>Are you sure you want to delete this item? </Text>
+					<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+						<Button transparent style={{ width: '40%' }} onPress={this.cancel}>
+							<Text style={{ color: color.timerGrey }}>Cancel</Text>
+						</Button>
+						<Button style={styles.delBtn} onPress={this.delete}>
+							<Text>Delete</Text>
+						</Button>
+					</View>
+				</Overlay>
+			</>
 		);
 		);
 	};
 	};
 	updateRef = ref => {
 	updateRef = ref => {
 		this._swipeableRow = ref;
 		this._swipeableRow = ref;
 	};
 	};
-	close = () => {
+	cfDelete = () => {
 		this._swipeableRow.close();
 		this._swipeableRow.close();
+		this.setState({ isVisible: true });
+	};
+	cancel = () => {
+		this.setState({ isVisible: false });
+	};
+	delete = () => {
+		this.setState({ isVisible: false });
 	};
 	};
 
 
 	render() {
 	render() {
@@ -165,4 +196,23 @@ const styles = StyleSheet.create({
 		fontFamily: 'Avenir-Roman',
 		fontFamily: 'Avenir-Roman',
 		color: '#9b9b9b',
 		color: '#9b9b9b',
 	},
 	},
+	delBtn: {
+		width: '40%',
+		backgroundColor: '#ee5454',
+		color: 'white',
+		justifyContent: 'center',
+		borderRadius: 9,
+	},
+	cfDelText: {
+		marginHorizontal: 30,
+		textAlign: 'center',
+		color: color.grey3,
+		fontSize: 18,
+		fontFamily: 'Avenir-Roman',
+	},
+	cfDelOverlay: {
+		padding: 20,
+		alignItems: 'center',
+		justifyContent: 'space-around',
+	},
 });
 });