[TMA-49] Add static boxes (#28)

* adds BigInput component

* removes dummy fields

* adds website TaggInput

* adds handleWebsiteUpdate()

* added website regex

* added form

* added handleFocusChange()

* sends website in request

* moves input components to onboarding

* allow for empty string in website regex

* adds bio regex

* adds bio field

* added bioRef for focusChange

* added react-native-datepicker

* moves TaggInput

* add imports

* add TaggDatePicker

* fix typescript interface

* remove TouchableComponent type

* added date and selectpicker

* added date and dropdown

* adds momentjs

* remove warnings from optional fields

* remove debugging console.log

* Removes isValidBirthdate

* moves @types/react-native-datepicker to devdepnden

* update package versioning

* fix positioning

* added checkpoint

* update button styling

* update placeholder

* linting and other fixes

1 files changed, 63 insertions, 0 deletions

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;