From e32241734c8cc258812ac12c7727aaa7f947eed5 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Wed, 8 Jul 2020 09:56:17 -0700 Subject: [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 --- src/components/common/CenteredView.tsx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/components/common/CenteredView.tsx (limited to 'src/components/common/CenteredView.tsx') 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 = (props) => { + return ( + + {props.children} + + ); +}; + +const styles = StyleSheet.create({ + centeredView: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); + +export default CenteredView; -- cgit v1.2.3-70-g09d2