Shake

app/containers/Passcode/Base/index.js

@@ -18,6 +18,7 @@ import { PASSCODE_LENGTH } from '../../../constants/localAuthentication';
 const Base = forwardRef(({
 	theme, type, onEndProcess, previousPasscode, title, subtitle, onError
 }, ref) => {
+	const rootRef = useRef();
 	const dotsRef = useRef();
 	const [passcode, setPasscode] = useState('');
 
@@ -27,6 +28,10 @@ const Base = forwardRef(({
 		Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
 	};
 
+	const animate = (animation, duration = 500) => {
+		rootRef?.current?.[animation](duration);
+	};
+
 	const onPressNumber = text => setPasscode((p) => {
 		const currentPasscode = p + text;
 		if (currentPasscode?.length === PASSCODE_LENGTH) {
@@ -36,7 +41,6 @@ const Base = forwardRef(({
 					break;
 				case TYPE.CONFIRM:
 					if (currentPasscode !== previousPasscode) {
-						// alert('SHOW ERROR');
 						onError();
 					} else {
 						onEndProcess(currentPasscode);
@@ -62,11 +66,11 @@ const Base = forwardRef(({
 	});
 
 	useImperativeHandle(ref, () => ({
-		wrongPasscode
+		wrongPasscode, animate
 	}));
 
 	return (
-		<Animatable.View style={styles.container}>
+		<Animatable.View ref={rootRef} style={styles.container}>
 			<View style={styles.container}>
 				<View style={styles.viewTitle}>
 					<Text style={[styles.textTitle, { color: themes[theme].titleText }]}>{title}</Text>

app/containers/Passcode/PasscodeChoose.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import Base from './Base';
@@ -7,6 +7,7 @@ import { TYPE } from './constants';
 const PasscodeEnter = ({
 	theme, type, finishProcess
 }) => {
+	const confirmRef = useRef(null);
 	const [subtitle, setSubtitle] = useState(null);
 	const [status, setStatus] = useState(type);
 	const [previousPasscode, setPreviouPasscode] = useState(null);
@@ -21,11 +22,13 @@ const PasscodeEnter = ({
 	const onError = () => {
 		setStatus(TYPE.CHOOSE);
 		setSubtitle('Passcodes don\'t match. Try again.');
+		confirmRef?.current?.animate('shake');
 	};
 
 	if (status === TYPE.CONFIRM) {
 		return (
 			<Base
+				ref={confirmRef}
 				theme={theme}
 				type={TYPE.CONFIRM}
 				onEndProcess={changePasscode}