Animate dots on error

.eslintrc.js

@@ -87,6 +87,7 @@ module.exports = {
 		"no-regex-spaces": 2,
 		"no-undef": 2,
 		"no-unreachable": 2,
+		"no-unused-expressions": 0,
 		"no-unused-vars": [2, {
 			"vars": "all",
 			"args": "after-used"

app/containers/Passcode/Base/index.js

@@ -1,25 +1,30 @@
-import React, { useState, forwardRef, useImperativeHandle } from 'react';
+import React, {
+	useState, forwardRef, useImperativeHandle, useRef
+} from 'react';
 import { View, Text } from 'react-native';
 import { Col, Row, Grid } from 'react-native-easy-grid';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
+import * as Animatable from 'react-native-animatable';
+import * as Haptics from 'expo-haptics';
 
 import styles from './styles';
 import Button from './Button';
 import Dots from './Dots';
 import { TYPE } from '../constants';
 import { themes } from '../../../constants/colors';
-
+import { PASSCODE_LENGTH } from '../../../constants/localAuthentication';
-const PASSCODE_LENGTH = 6;
 
 const Base = forwardRef(({
 	theme, type, onEndProcess, previousPasscode, title, subtitle
 }, ref) => {
+	const dotsRef = useRef();
 	const [passcode, setPasscode] = useState('');
 
 	const wrongPasscode = () => {
 		setPasscode('');
-		console.log('TODO: wrong animation and vibration');
+		dotsRef?.current?.shake(500);
+		Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
 	};
 
 	const onPressNumber = text => setPasscode((p) => {
@@ -27,27 +32,17 @@ const Base = forwardRef(({
 		if (currentPasscode?.length === PASSCODE_LENGTH) {
 			switch (type) {
 				case TYPE.CHOOSE:
-					// if (this.props.validationRegex && this.props.validationRegex.test(currentPasscode)) {
-					// 	this.showError(true);
-					// } else {
-					// 	// this.endProcess(currentPasscode);
 					onEndProcess(currentPasscode);
-					// }
 					break;
 				case TYPE.CONFIRM:
-					console.log('currentPasscode', currentPasscode, previousPasscode);
 					if (currentPasscode !== previousPasscode) {
-						// this.showError();
 						alert('SHOW ERROR');
 					} else {
-						// this.endProcess(currentPasscode);
 						onEndProcess(currentPasscode);
 					}
 					break;
 				case TYPE.ENTER:
-					// this.props.endProcess(currentPasscode);
 					onEndProcess(currentPasscode);
-					// await delay(300);
 					break;
 				default:
 					break;
@@ -76,9 +71,9 @@ const Base = forwardRef(({
 					<Text style={[styles.textTitle, { color: themes[theme].titleText }]}>{title}</Text>
 					{subtitle ? <Text style={[styles.textSubtitle, { color: themes[theme].bodyText }]}>{subtitle}</Text> : null}
 				</View>
-				<View style={styles.flexCirclePasscode}>
+				<Animatable.View ref={dotsRef} style={styles.flexCirclePasscode}>
 					<Dots passcode={passcode} theme={theme} length={PASSCODE_LENGTH} />
-				</View>
+				</Animatable.View>
 				<Grid style={styles.grid}>
 					<Row style={styles.row}>
 						{_.range(1, 4).map(i => (

package.json

@@ -53,6 +53,7 @@
     "react": "16.9.0",
     "react-native": "0.61.5",
     "react-native-action-sheet": "^2.2.0",
+    "react-native-animatable": "^1.3.3",
     "react-native-appearance": "^0.3.1",
     "react-native-audio": "^4.3.0",
     "react-native-background-timer": "2.1.1",

yarn.lock

@@ -9912,7 +9912,7 @@ react-native-action-sheet@^2.2.0:
   resolved "https://registry.yarnpkg.com/react-native-action-sheet/-/react-native-action-sheet-2.2.0.tgz#309a87f53bf4e7b17fdd9d24b10b8dcbaebb7230"
   integrity sha512-4lsuxH+Cn3/aUEs1VCwqvLhEFyXNqYTkT67CzgTwlifD9Ij4OPQAIs8D+HUD9zBvWc4NtT6cyG1lhArPVMQeVw==
 
-react-native-animatable@1.3.3:
+react-native-animatable@1.3.3, react-native-animatable@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a"
   integrity sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==