Merge pull request #405 from grusuTagg/tma823-onboarding-revamp

[TMA-823] Onboarding Revamp

1 files changed, 11 insertions, 3 deletions

diff --git a/src/components/onboarding/TaggInput.tsx b/src/components/onboarding/TaggInput.tsx
index 405564ab..297392e5 100644
--- a/src/components/onboarding/TaggInput.tsx
+++ b/src/components/onboarding/TaggInput.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import {View, TextInput, StyleSheet, TextInputProps} from 'react-native';
+import {
+  View,
+  TextInput,
+  StyleSheet,
+  TextInputProps,
+  ViewStyle,
+  StyleProp,
+} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import {TAGG_LIGHT_PURPLE} from '../../constants';
 
@@ -7,6 +14,7 @@ interface TaggInputProps extends TextInputProps {
   valid?: boolean;
   invalidWarning?: string;
   attemptedSubmit?: boolean;
+  externalStyles?: Record<string, StyleProp<ViewStyle>>;
 }
 /**
  * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop.
@@ -15,7 +23,7 @@ const TaggInput = React.forwardRef((props: TaggInputProps, ref: any) => {
   return (
     <View style={styles.container}>
       <TextInput
-        style={styles.input}
+        style={[styles.input, props.externalStyles?.inputWarning]}
         placeholderTextColor="#ddd"
         clearButtonMode="while-editing"
         ref={ref}
@@ -25,7 +33,7 @@ const TaggInput = React.forwardRef((props: TaggInputProps, ref: any) => {
         <Animatable.Text
           animation="shake"
           duration={500}
-          style={styles.warning}>
+          style={[styles.warning, props.externalStyles?.warning]}>
           {props.invalidWarning}
         </Animatable.Text>
       )}