diff options
Diffstat (limited to 'frontend/app/screens/login/signUp.js')
| -rw-r--r-- | frontend/app/screens/login/signUp.js | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/frontend/app/screens/login/signUp.js b/frontend/app/screens/login/signUp.js new file mode 100644 index 0000000..5c7965e --- /dev/null +++ b/frontend/app/screens/login/signUp.js @@ -0,0 +1,110 @@ +import React from 'react'; +import { + View, + Image, + Keyboard, +} from 'react-native'; +import { + RkButton, + RkText, + RkTextInput, + RkStyleSheet, + RkTheme, + RkAvoidKeyboard, +} from 'react-native-ui-kitten'; +import { GradientButton } from '../../components/'; +import { scaleVertical } from '../../utils/scale'; +import NavigationType from '../../config/navigation/propTypes'; + +export class SignUp extends React.Component { + static navigationOptions = { + header: null, + }; + static propTypes = { + navigation: NavigationType.isRequired, + }; + + getThemeImageSource = (theme) => ( + theme.name === 'light' ? + require('../../assets/images/logo.png') : require('../../assets/images/logoDark.png') + ); + + renderImage = () => ( + <Image style={styles.image} source={this.getThemeImageSource(RkTheme.current)} /> + ); + + onSignUpButtonPressed = () => { + this.props.navigation.goBack(); + }; + + onSignInButtonPressed = () => { + this.props.navigation.navigate('Login1'); + }; + + render = () => ( + <RkAvoidKeyboard + style={styles.screen} + onStartShouldSetResponder={() => true} + onResponderRelease={() => Keyboard.dismiss()}> + <View style={{ alignItems: 'center' }}> + {this.renderImage()} + <RkText rkType='h1'>Registration</RkText> + </View> + <View style={styles.content}> + <View> + <RkTextInput rkType='rounded' placeholder='Name' /> + <RkTextInput rkType='rounded' placeholder='Email' /> + <RkTextInput rkType='rounded' placeholder='Password' secureTextEntry /> + <RkTextInput rkType='rounded' placeholder='Confirm Password' secureTextEntry /> + <GradientButton + style={styles.save} + rkType='large' + text='SIGN UP' + onPress={this.onSignUpButtonPressed} + /> + </View> + <View style={styles.footer}> + <View style={styles.textRow}> + <RkText rkType='primary3'>Already have an account?</RkText> + <RkButton rkType='clear' onPress={this.onSignInButtonPressed}> + <RkText rkType='header6'>Sign in now</RkText> + </RkButton> + </View> + </View> + </View> + </RkAvoidKeyboard> + ) +} + +const styles = RkStyleSheet.create(theme => ({ + screen: { + padding: 16, + flex: 1, + justifyContent: 'space-around', + backgroundColor: theme.colors.screen.base, + }, + image: { + marginBottom: 10, + height: scaleVertical(77), + resizeMode: 'contain', + }, + content: { + justifyContent: 'space-between', + }, + save: { + marginVertical: 20, + }, + buttons: { + flexDirection: 'row', + marginBottom: 24, + marginHorizontal: 24, + justifyContent: 'space-around', + }, + footer: { + justifyContent: 'flex-end', + }, + textRow: { + flexDirection: 'row', + justifyContent: 'center', + }, +})); |