5 files changed, 233 insertions, 0 deletions
diff --git a/src/components/onboarding/TaggBigInput.tsx b/src/components/onboarding/TaggBigInput.tsx
new file mode 100644
index 00000000..ba965465
--- /dev/null
+++ b/src/components/onboarding/TaggBigInput.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import {View, TextInput, StyleSheet, TextInputProps} from 'react-native';
+import * as Animatable from 'react-native-animatable';
+
+interface TaggBigInputProps extends TextInputProps {
+  valid?: boolean;
+  invalidWarning?: string;
+  attemptedSubmit?: boolean;
+  width?: number | string;
+}
+/**
+ * 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.
+ */
+const TaggBigInput = React.forwardRef((props: TaggBigInputProps, ref: any) => {
+  return (
+    <View style={styles.container}>
+      <TextInput
+        style={[{width: props.width}, styles.input]}
+        placeholderTextColor="#ddd"
+        clearButtonMode="while-editing"
+        ref={ref}
+        multiline={true}
+        {...props}
+      />
+      {props.attemptedSubmit && !props.valid && (
+        <Animatable.Text
+          animation="shake"
+          duration={500}
+          style={styles.warning}>
+          {props.invalidWarning}
+        </Animatable.Text>
+      )}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    alignItems: 'center',
+    marginVertical: 11,
+  },
+  input: {
+    minWidth: '60%',
+    height: 120,
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#fff',
+    borderColor: '#fffdfd',
+    borderWidth: 2,
+    borderRadius: 20,
+    paddingLeft: 13,
+    paddingTop: 13,
+  },
+  warning: {
+    fontSize: 14,
+    marginTop: 5,
+    color: '#f4ddff',
+    maxWidth: 350,
+    textAlign: 'center',
+  },
+});
+
+export default TaggBigInput;
diff --git a/src/components/onboarding/TaggDatePicker.tsx b/src/components/onboarding/TaggDatePicker.tsx
new file mode 100644
index 00000000..39af6234
--- /dev/null
+++ b/src/components/onboarding/TaggDatePicker.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import DatePicker from 'react-native-datepicker';
+import {View, StyleSheet, TextInputProps} from 'react-native';
+
+interface TaggDatePickerProps extends TextInputProps {
+  width?: number | string;
+  date?: string;
+  maxDate?: Date | string;
+}
+/**
+ * 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.
+ */
+const TaggDatePicker = React.forwardRef(
+  (props: TaggDatePickerProps, ref: any) => {
+    return (
+      <View style={styles.container}>
+        <DatePicker
+          {...props}
+          style={styles.input}
+          placeholder={'Date of Birth'}
+          showIcon={false}
+          ref={ref}
+          format={'YYYY-MM-DD'}
+          customStyles={{
+            placeholderText: {
+              color: '#ddd',
+
+              fontSize: 16,
+              fontWeight: '600',
+            },
+            dateText: {
+              color: '#fff',
+              fontSize: 16,
+              fontWeight: '600',
+            },
+            dateInput: {
+              borderColor: '#fffdfd',
+              borderWidth: 2,
+              borderRadius: 20,
+              justifyContent: 'center',
+              alignItems: 'flex-start',
+              paddingLeft: 13,
+            },
+          }}
+        />
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    alignItems: 'center',
+    marginVertical: 11,
+  },
+  input: {
+    minWidth: '67%',
+    height: 40,
+  },
+});
+
+export default TaggDatePicker;
diff --git a/src/components/onboarding/TaggDropDown.tsx b/src/components/onboarding/TaggDropDown.tsx
new file mode 100644
index 00000000..a45426ca
--- /dev/null
+++ b/src/components/onboarding/TaggDropDown.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import RNSelectPicker from 'react-native-picker-select';
+import {View, StyleSheet, TextInputProps} from 'react-native';
+
+interface TaggDropDownProps extends TextInputProps {
+  width?: number | string;
+}
+
+/**
+ * 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.
+ */
+const TaggDropDown = React.forwardRef((props: TaggDropDownProps, ref: any) => {
+  return (
+    <View style={styles.container}>
+      <RNSelectPicker {...props} style={styles} ref={ref} />
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    width: '66.67%',
+    alignItems: 'center',
+    marginVertical: 11,
+  },
+  inputIOS: {
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    minWidth: '60%',
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#fff',
+    borderColor: '#fffdfd',
+    borderWidth: 2,
+    borderRadius: 20,
+    paddingLeft: 13,
+  },
+});
+
+export default TaggDropDown;
diff --git a/src/components/onboarding/TaggInput.tsx b/src/components/onboarding/TaggInput.tsx
new file mode 100644
index 00000000..fe11d4f0
--- /dev/null
+++ b/src/components/onboarding/TaggInput.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import {View, TextInput, StyleSheet, TextInputProps} from 'react-native';
+import * as Animatable from 'react-native-animatable';
+
+interface TaggInputProps extends TextInputProps {
+  valid?: boolean;
+  invalidWarning?: string;
+  attemptedSubmit?: boolean;
+  width?: number | string;
+}
+/**
+ * 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.
+ */
+const TaggInput = React.forwardRef((props: TaggInputProps, ref: any) => {
+  return (
+    <View style={styles.container}>
+      <TextInput
+        style={[{width: props.width}, styles.input]}
+        placeholderTextColor="#ddd"
+        clearButtonMode="while-editing"
+        ref={ref}
+        {...props}
+      />
+      {props.attemptedSubmit && !props.valid && (
+        <Animatable.Text
+          animation="shake"
+          duration={500}
+          style={styles.warning}>
+          {props.invalidWarning}
+        </Animatable.Text>
+      )}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    alignItems: 'center',
+    marginVertical: 11,
+  },
+  input: {
+    minWidth: '60%',
+    height: 40,
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#fff',
+    borderColor: '#fffdfd',
+    borderWidth: 2,
+    borderRadius: 20,
+    paddingLeft: 13,
+  },
+  warning: {
+    fontSize: 14,
+    marginTop: 5,
+    color: '#f4ddff',
+    maxWidth: 350,
+    textAlign: 'center',
+  },
+});
+
+export default TaggInput;
diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts
index ef972194..31f356d3 100644
--- a/src/components/onboarding/index.ts
+++ b/src/components/onboarding/index.ts
@@ -3,3 +3,7 @@ export {default as Background} from './Background';
 export {default as RegistrationWizard} from './RegistrationWizard';
 export {default as TermsConditions} from './TermsConditions';
 export {default as SubmitButton} from './SubmitButton';
+export {default as TaggInput} from './TaggInput';
+export {default as TaggBigInput} from './TaggBigInput';
+export {default as TaggDatePicker} from './TaggDatePicker';
+export {default as TaggDropDown} from './TaggDropDown';