Signup Screen (choose role)

Enable separate signup paths for different types of users.

Screen Variants
Original
Tutorial Step 2
Tutorial Step 3

-- CODE language-javascript --
import React from 'react';
import {
 withTheme,
 Container,
 ScreenContainer,
 Image,
 Button,
} from '@draftbit/ui';
import { StyleSheet, KeyboardAvoidingView, View, Text } from 'react-native';
import Images from '../config/Images';
class LoginScreen extends React.Component {
 render() {
   const { theme } = this.props;
    return (
     <ScreenContainer
       hasSafeArea={true}
       scrollable={false}
       style={styles.screenContainerFc}
     >
       <KeyboardAvoidingView behavior="padding" enabled={true}>
         <Container useThemeGutterPadding={true} style={styles.containerOy}>
           <Image
             source={Images.Rentbit}
             resizeMode="contain"
             style={styles.imageN6}
           />
           <Text
             style={StyleSheet.flatten([
               styles.textHU,
               theme.typography.headline2,
               { color: theme.colors.medium },
             ])}
           >
             Welcome to Rentbit.
           </Text>
         </Container>
         <Container useThemeGutterPadding={true} />
       </KeyboardAvoidingView>
       <View style={styles.viewXk}>
         <Button
           labelColor={theme.colors.background}
           type="solid"
           color={theme.colors.primary}
           style={StyleSheet.flatten([
             styles.buttonD7,
             { borderRadius: theme.borderRadius.button },
           ])}
         >
           Sign Up
         </Button>
         <Button type="text">Log In</Button>
       </View>
     </ScreenContainer>
   );
 }
}
const styles = StyleSheet.create({
 containerOy: {
   alignItems: 'center',
   alignContent: 'center',
   paddingTop: 100,
   justifyContent: 'center',
   paddingBottom: 100,
   alignSelf: 'center',
 },
 screenContainerFc: {
   paddingTop: 120,
 },
 imageN6: {
   minHeight: 80,
   minWidth: 80,
   width: 80,
   height: 80,
 },
 viewXk: {
   paddingRight: 20,
   width: '100%',
   zIndex: 999,
   paddingLeft: 20,
   paddingBottom: 24,
   position: 'absolute',
   bottom: 0,
 },
 buttonD7: {
   alignItems: 'center',
   justifyContent: 'center',
   marginBottom: 12,
   minHeight: 50,
   alignContent: 'center',
 },
 textHU: {
   textAlign: 'center',
   marginTop: 24,
 },
});
export default withTheme(LoginScreen);

Additional Details

Changelog

Last Updated
May 6, 2020