6 files changed, 150 insertions, 105 deletions
diff --git a/src/components/common/CenteredView.tsx b/src/components/common/CenteredView.tsx
new file mode 100644
index 00000000..1c5ed399
--- /dev/null
+++ b/src/components/common/CenteredView.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import {View, StyleSheet, ViewProps} from 'react-native';
+
+interface CenteredViewProps extends ViewProps {}
+/**
+ * A centered view that grows to its parents size.
+ * @param children - children of this component.
+ */
+const CenteredView: React.FC<CenteredViewProps> = (props) => {
+  return (
+    <View style={styles.centeredView} {...props}>
+      {props.children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default CenteredView;
diff --git a/src/components/common/LoginInput.tsx b/src/components/common/LoginInput.tsx
deleted file mode 100644
index 2a1768a7..00000000
--- a/src/components/common/LoginInput.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from 'react';
-import {TextInput, StyleSheet} from 'react-native';
-import * as Animatable from 'react-native-animatable';
-
-const LoginInput = (props: LoginInputProps) => {
-  return (
-    <>
-      <TextInput
-        accessibilityLabel={
-          props.isUsername
-            ? 'Username text entry box'
-            : props.isPassword
-            ? 'Password text entry box'
-            : undefined
-        }
-        accessibilityHint={
-          props.isUsername
-            ? 'Enter your tagg username here'
-            : props.isPassword
-            ? 'Enter your tagg password here'
-            : undefined
-        }
-        style={styles.credentials}
-        placeholder={
-          props.isUsername
-            ? 'Username'
-            : props.isPassword
-            ? 'Password'
-            : undefined
-        }
-        placeholderTextColor="#FFFFFF"
-        autoCompleteType={
-          props.isUsername ? 'username' : props.isPassword ? 'password' : 'off'
-        }
-        textContentType={
-          props.isUsername ? 'username' : props.isPassword ? 'password' : 'none'
-        }
-        returnKeyType={
-          props.isUsername ? 'next' : props.isPassword ? 'go' : 'default'
-        }
-        keyboardType={
-          props.isUsername
-            ? 'ascii-capable'
-            : props.isPassword
-            ? 'default'
-            : undefined
-        }
-        autoCapitalize="none"
-        onChangeText={(input) => props.onChangeText(input)}
-        defaultValue={props.type}
-        onSubmitEditing={props.onSubmitEditing}
-        blurOnSubmit={
-          props.isUsername ? false : props.isPassword ? undefined : undefined
-        }
-        secureTextEntry={
-          props.isUsername ? false : props.isPassword ? true : false
-        }
-        ref={props.input_ref}
-      />
-      {props.attempt_submit && !props.isValid && (
-        <Animatable.Text
-          animation="shake"
-          duration={500}
-          style={styles.invalidCredentials}>
-          {props.validationWarning}
-        </Animatable.Text>
-      )}
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  credentials: {
-    top: 175,
-    width: 248,
-    height: 40,
-    fontSize: 20,
-    color: '#FFFFFF',
-    borderColor: '#FFFDFD',
-    borderWidth: 2,
-    borderRadius: 20,
-    paddingLeft: 13,
-    marginVertical: 15,
-  },
-  invalidCredentials: {
-    top: 165,
-    color: '#F4DDFF',
-    paddingHorizontal: 30,
-    textAlign: 'center',
-  },
-});
-
-interface LoginInputProps {
-  type: string;
-  isUsername?: boolean;
-  isPassword?: boolean;
-  onChangeText: (input: string) => void;
-  onSubmitEditing?: () => void;
-  attempt_submit?: boolean;
-  input_ref?: object;
-  isValid?: boolean;
-  validationWarning?: string;
-}
-
-export default LoginInput;
diff --git a/src/components/common/OverlayView.tsx b/src/components/common/OverlayView.tsx
new file mode 100644
index 00000000..f0660614
--- /dev/null
+++ b/src/components/common/OverlayView.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import {View, StyleSheet} from 'react-native';
+
+/**
+ * A blurred & darkened view that grows to its parents size. Designed to be used with overlaid components.
+ * @param children - children of this component.
+ */
+const OverlayView: React.FC = ({children}) => {
+  return <View style={styles.overlayView}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  overlayView: {
+    flex: 1,
+    backgroundColor: '#00000080',
+  },
+});
+
+export default OverlayView;
diff --git a/src/components/common/RadioCheckbox.tsx b/src/components/common/RadioCheckbox.tsx
new file mode 100644
index 00000000..33d50527
--- /dev/null
+++ b/src/components/common/RadioCheckbox.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from 'react-native';
+
+interface RadioCheckboxProps extends TouchableOpacityProps {
+  checked: boolean;
+}
+const RadioCheckbox: React.FC<RadioCheckboxProps> = (props) => {
+  return (
+    <TouchableOpacity {...props}>
+      <View style={styles.outerCircle}>
+        {props.checked && <View style={styles.innerCircle} />}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  outerCircle: {
+    width: 23,
+    height: 23,
+    borderRadius: 11.5,
+    borderWidth: 1,
+    borderColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  innerCircle: {
+    width: 17,
+    height: 17,
+    borderRadius: 8.5,
+    backgroundColor: '#04ffff',
+  },
+});
+
+export default RadioCheckbox;
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;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
new file mode 100644
index 00000000..b7041b6d
--- /dev/null
+++ b/src/components/common/index.ts
@@ -0,0 +1,4 @@
+export {default as CenteredView} from './CenteredView';
+export {default as OverlayView} from './OverlayView';
+export {default as RadioCheckbox} from './RadioCheckbox';
+export {default as TaggInput} from './TaggInput';