add shake animation when toggle delete connected device

screens/Private/SmartMeterScreen/McbLinkScreen.js

 import React from 'react';
 import { Text, Tab, Tabs, ScrollableTab, View, Card, Icon } from 'native-base';
 import { connect } from 'react-redux';
-import { StyleSheet, TextInput, Image, TouchableOpacity } from 'react-native';
+import { StyleSheet, TextInput, Image, TouchableOpacity, Animated, Easing } from 'react-native';
 import { theme, color } from '../../../constants/Styles';
 import { HeaderButtons, Item } from 'react-navigation-header-buttons';
 import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
@@ -39,6 +39,10 @@ class McbLinkScreen extends React.Component {
 			},
 		};
 	};
+	constructor(props) {
+		super(props);
+		this.shakeValue = new Animated.Value(0);
+	}
 	state = {
 		subBreakersInfo: [],
 		subBreakerStatus: [],
@@ -62,6 +66,35 @@ class McbLinkScreen extends React.Component {
 			this.setSubBreakersState();
 		}
 	};
+	handleAnimation = () => {
+		// A loop is needed for continuous animation
+		Animated.loop(
+			// Animation consists of a sequence of steps
+			Animated.sequence([
+				// start rotation in one direction (only half the time is needed)
+				Animated.timing(this.shakeValue, {
+					toValue: 1.0,
+					duration: 75,
+					easing: Easing.linear,
+					useNativeDriver: true,
+				}),
+				// rotate in other direction, to minimum value (= twice the duration of above)
+				Animated.timing(this.shakeValue, {
+					toValue: -1.0,
+					duration: 150,
+					easing: Easing.linear,
+					useNativeDriver: true,
+				}),
+				// return to begin position
+				Animated.timing(this.shakeValue, {
+					toValue: 0.0,
+					duration: 75,
+					easing: Easing.linear,
+					useNativeDriver: true,
+				}),
+			])
+		).start();
+	};
 
 	setSubBreakersState = () => {
 		const { existedSubBreakersData, shadow, existedConnectedDevice } = this.props;
@@ -200,10 +233,10 @@ class McbLinkScreen extends React.Component {
 						numColumns={4}
 						renderItem={({ item, index }) => {
 							if (item.name == 'empty') {
-								return <Card transparent style={[styles.electronicCard]} />;
+								return <View style={{ flex: 1, margin: 10 }} />;
 							} else if (item.name === 'add') {
 								return (
-									<Card style={[styles.electronicCard, { backgroundColor: color.lightGrey }]}>
+									<View style={[styles.electronicCard, { backgroundColor: color.lightGrey }]}>
 										<TouchableOpacity
 											style={[theme.centerContainer, { width: 65 }]}
 											onPress={() => this.setState({ isAddElectronicVisible: true })}
@@ -217,13 +250,30 @@ class McbLinkScreen extends React.Component {
 												{item.name}
 											</Text>
 										</TouchableOpacity>
-									</Card>
+									</View>
 								);
 							} else {
 								return (
-									<Card style={[styles.electronicCard]}>
+									<Animated.View
+										style={[
+											styles.electronicCard,
+											{
+												transform: [
+													{
+														rotate: this.shakeValue.interpolate({
+															inputRange: [-1, 1],
+															outputRange: ['-0.05rad', '0.05rad'],
+														}),
+													},
+												],
+											},
+										]}
+									>
 										<TouchableOpacity
-											onLongPress={() => this.setState({ toggleDel: true })}
+											onLongPress={() => {
+												this.setState({ toggleDel: true });
+												this.handleAnimation();
+											}}
 											style={[theme.centerContainer, { width: 65 }]}
 										>
 											{item.type ? (
@@ -249,7 +299,7 @@ class McbLinkScreen extends React.Component {
 												onPress={() => this.props.deleteConnectedDevice(data[index])}
 											/>
 										)}
-									</Card>
+									</Animated.View>
 								);
 							}
 						}}
@@ -268,7 +318,10 @@ class McbLinkScreen extends React.Component {
 					{toggleDel ? (
 						<TouchableOpacity
 							style={styles.doneDeleteBtn}
-							onPress={() => this.setState({ toggleDel: false })}
+							onPress={() => {
+								this.setState({ toggleDel: false });
+								this.shakeValue.setValue(0);
+							}}
 						>
 							<Text style={[theme.description, { color: color.white }]}>Done</Text>
 						</TouchableOpacity>
@@ -333,11 +386,11 @@ class McbLinkScreen extends React.Component {
 								numColumns={4}
 								renderItem={({ item, index }) => {
 									if (item.type === 'empty') {
-										return <Card style={styles.electronicCard} transparent />;
+										return <View style={{ flex: 1, margin: 10 }} />;
 									} else {
 										const dynamicColor = item.type === deviceType ? color.white : color.primary;
 										return (
-											<Card
+											<View
 												style={[
 													styles.electronicCard,
 													{
@@ -370,7 +423,7 @@ class McbLinkScreen extends React.Component {
 														{item.type}
 													</Text>
 												</TouchableOpacity>
-											</Card>
+											</View>
 										);
 									}
 								}}
@@ -450,12 +503,21 @@ const styles = StyleSheet.create({
 		flex: 1,
 		aspectRatio: 1,
 		borderRadius: 10,
-		marginRight: 10,
-		marginLeft: 10,
+		margin: 10,
 		alignItems: 'center',
 		justifyContent: 'center',
 		borderWidth: 0,
 		borderColor: 'transparent',
+		backgroundColor: color.white,
+		shadowColor: '#000',
+		shadowOffset: {
+			width: 0,
+			height: 1,
+		},
+		shadowOpacity: 0.18,
+		shadowRadius: 1.0,
+
+		elevation: 1,
 	},
 	electronicIcon: {
 		// tintColor: color.primary,