[TMA-60] Registration Page UI & Field Validation (#13)

* remove unused image

* refactor LoginInput component to be more generic

* configure bare registration screen

* create index files for exports

* add yarn typing script

* refactor and re-style LoginInput component

* re-style login screen according to designs

* make LoginInput name more generic, give TaggInput dirty & width props

* add disabled feature to login screen submit button, finalized styles

* add arrow images and create ArrowButton component

* create RegistrationWizard component and move files around

* added disabled & enabled buttons to ArrowButton component

* create dummy terms and conditions text

* create common CenteredView component for re-use

* create custom RadioCheckbox for registration screen

* create TermsConditions & OverlayView components

* update index.ts export files

* build registration page UI with basic validation

* yarn lint/type & add platform-specific styling

* add yarn type item to PR checklist

* add react-native-animatable dependency to project

* add regex variables to constants file

* Add width prop for more flexible styling

* Add types and disable auto-capitalization

* Update email validation regex

* Create linear-gradient background component

* Update password regex and add inline docs

* Refactor code to be more readable

* Add warning prop and animation to TaggInput

* Add wrapper View for vertical margins

* Make JSX more readable & add TaggInput components

* Integrate refactored code into registration page

* Merge in login screen changes

* Lint and fix file syntax

* Fix function docs

* Add ViewProps to CenterView props

* Add KeyboardAvoidingView to Background component

* Add blurOnSubmit for inputs, restore deleted handleLogin code

* Create Verification screen and add it to routes

* Add routing to Verification page upon success

* Add API request upon registration submit

* Trigger warning shaking animation on submit

* Make disabled arrow touchable, tap triggers submit

1 files changed, 62 insertions, 0 deletions

diff --git a/src/components/common/TaggInput.tsx b/src/components/common/TaggInput.tsx
new file mode 100644
index 00000000..fe11d4f0
--- /dev/null
+++ b/src/components/common/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;