Matching passcodes

app/containers/Passcode/Base/index.js

@@ -16,7 +16,7 @@ import { themes } from '../../../constants/colors';
 import { PASSCODE_LENGTH } from '../../../constants/localAuthentication';
 
 const Base = forwardRef(({
-	theme, type, onEndProcess, previousPasscode, title, subtitle
+	theme, type, onEndProcess, previousPasscode, title, subtitle, onError
 }, ref) => {
 	const dotsRef = useRef();
 	const [passcode, setPasscode] = useState('');
@@ -36,7 +36,8 @@ const Base = forwardRef(({
 					break;
 				case TYPE.CONFIRM:
 					if (currentPasscode !== previousPasscode) {
-						alert('SHOW ERROR');
+						// alert('SHOW ERROR');
+						onError();
 					} else {
 						onEndProcess(currentPasscode);
 					}
@@ -65,7 +66,7 @@ const Base = forwardRef(({
 	}));
 
 	return (
-		<View style={styles.container}>
+		<Animatable.View style={styles.container}>
 			<View style={styles.container}>
 				<View style={styles.viewTitle}>
 					<Text style={[styles.textTitle, { color: themes[theme].titleText }]}>{title}</Text>
@@ -107,7 +108,7 @@ const Base = forwardRef(({
 					</Row>
 				</Grid>
 			</View>
-		</View>
+		</Animatable.View>
 	);
 });
 

app/containers/Passcode/PasscodeChoose.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import Base from './Base';
@@ -7,7 +7,7 @@ import { TYPE } from './constants';
 const PasscodeEnter = ({
 	theme, type, finishProcess
 }) => {
-	const ref = useRef(null);
+	const [subtitle, setSubtitle] = useState(null);
 	const [status, setStatus] = useState(type);
 	const [previousPasscode, setPreviouPasscode] = useState(null);
 
@@ -18,11 +18,33 @@ const PasscodeEnter = ({
 
 	const changePasscode = p => finishProcess && finishProcess(p);
 
+	const onError = () => {
+		setStatus(TYPE.CHOOSE);
+		setSubtitle('Passcodes don\'t match. Try again.');
+	};
+
 	if (status === TYPE.CONFIRM) {
-		return <Base ref={ref} theme={theme} type={TYPE.CONFIRM} onEndProcess={changePasscode} previousPasscode={previousPasscode} title='Confirm your new passcode' />;
+		return (
+			<Base
+				theme={theme}
+				type={TYPE.CONFIRM}
+				onEndProcess={changePasscode}
+				previousPasscode={previousPasscode}
+				title='Confirm your new passcode'
+				onError={onError}
+			/>
+		);
 	}
 
-	return <Base ref={ref} theme={theme} type={TYPE.CHOOSE} onEndProcess={firstStep} title='Choose your new passcode' />;
+	return (
+		<Base
+			theme={theme}
+			type={TYPE.CHOOSE}
+			onEndProcess={firstStep}
+			title='Choose your new passcode'
+			subtitle={subtitle}
+		/>
+	);
 };
 
 PasscodeEnter.propTypes = {