From d043c859b640fd4b6ab3fc72849bc9a5595360a4 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Sat, 13 May 2023 13:21:50 +0500
Subject: [PATCH] fix: add red border to the magic code input

---
 src/components/MagicCodeInput.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
index b33e686001db..a9505e829c1e 100644
--- a/src/components/MagicCodeInput.js
+++ b/src/components/MagicCodeInput.js
@@ -38,6 +38,9 @@ const propTypes = {
 
     /** Function to call when the input is submitted or fully complete */
     onFulfill: PropTypes.func,
+
+    /** Specifies if the input has a validation error */
+    hasError: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -50,6 +53,7 @@ const defaultProps = {
     innerRef: null,
     onChangeText: () => {},
     onFulfill: () => {},
+    hasError: false,
 };
 
 /**
@@ -263,7 +267,11 @@ function MagicCodeInput(props) {
                         key={index}
                         style={[styles.w15]}
                     >
-                        <View style={[styles.textInputContainer, focusedIndex === index ? styles.borderColorFocus : {}]}>
+                        <View style={[
+                            styles.textInputContainer,
+                            focusedIndex === index ? styles.borderColorFocus : {},
+                            props.hasError  || props.errorText ? styles.borderColorDanger : {},
+                        ]}>
                             <Text style={[styles.magicCodeInput, styles.textAlignCenter]}>{decomposeString(props.value)[index] || ''}</Text>
                         </View>
                         <View style={[StyleSheet.absoluteFillObject, styles.w100, styles.opacity0]}>