Live Preview with Expo
Scan the QR code with your camera. Don't have Expo yet? Enter your email or phone number and we'll send a link.
No items found.

Welcome with Social Signup

Welcome

Welcome screen with logo and option to sign up with third party auth..

Preview this Screen

Scan with your camera to preview on your phone:

Download Expo
Screen Code

-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import {
 Button,
 Icon,
 ScreenContainer,
 Touchable,
 withTheme,
} from '@draftbit/ui';
import {
 Image,
 KeyboardAvoidingView,
 StyleSheet,
 Text,
 View,
} from 'react-native';
const REPLACE_SCREEN_NAME = props => {
 const { theme } = props;
 return (
   <ScreenContainer hasSafeArea={true} scrollable={true}>
     <KeyboardAvoidingView
       style={styles.keyboardAvoidingView4I}
       behavior=""position""
       enabled={true}
       keyboardVerticalOffset={44}
     >
       <View style={styles.viewLc}>
         <Image
           style={styles.imageFp}
           source={Images.DraftbitLogo}
           resizeMode=""contain""
         />
         <Text
           style={StyleSheet.flatten([
             styles.textFd,
             theme.typography.headline2,
             { color: theme.colors.strong },
           ])}
         >
           Welcome
         </Text>
         <Text
           style={StyleSheet.flatten([
             styles.textHH,
             theme.typography.subtitle1,
             { color: theme.colors.medium },
           ])}
         >
           Create, customize, and launch mobile apps all from your browser.
           Source code included.
         </Text>
       </View>
       <View
         style={styles.viewDz}
         clickable=""""
         pointerEvents={[{ label: '', value: '' }]}
       >
         <Button
           style={StyleSheet.flatten([
             styles.buttonSx,
             { borderRadius: theme.borderRadius.global },
           ])}
           type=""solid""
         >
           Sign Up
         </Button>
         <Button
           style={StyleSheet.flatten([
             styles.buttonFf,
             { borderColor: theme.colors.custom_rgba0_0_0_0 },
           ])}
           type=""outline""
           color={theme.colors.primary}
         >
           Log In
         </Button>
       </View>
       <View style={styles.viewVr}>
         <Text
           style={StyleSheet.flatten([
             theme.typography.subtitle2,
             { color: theme.colors.medium },
           ])}
         >
           or, sign up with:
         </Text>
         <View style={styles.viewSv}>
           <Touchable style={styles.touchableCu}>
             <Icon
               style={styles.iconYw}
               color={theme.colors.strong}
               size={24}
               name=""FontAwesome/facebook-f""
             />
           </Touchable>
           <Touchable style={styles.touchableO6}>
             <Icon
               style={styles.iconMe}
               color={theme.colors.strong}
               name=""FontAwesome/google""
               size={24}
             />
           </Touchable>
         </View>
       </View>
     </KeyboardAvoidingView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 buttonSx: {
   alignItems: 'center',
   justifyContent: 'center',
   height: 54,
   marginTop: 12,
   alignSelf: 'center',
   width: '80%',
 },
 keyboardAvoidingView4I: {
   justifyContent: 'space-around',
   flexGrow: 1,
 },
 viewLc: {
   paddingLeft: 32,
   paddingRight: 32,
   paddingBottom: 34,
   paddingTop: 64,
   justifyContent: 'center',
   alignItems: 'center',
 },
 touchableCu: {
   alignItems: 'center',
   justifyContent: 'center',
   width: 44,
   height: 44,
   marginRight: 14,
   marginLeft: 14,
 },
 imageFp: {
   marginBottom: 100,
   height: 80,
   width: 180,
 },
 iconYw: {
   height: 24,
   width: 24,
 },
 iconMe: {
   width: 24,
   height: 24,
 },
 buttonFf: {
   borderTopWidth: 0,
   borderBottomWidth: 0,
   paddingRight: 12,
   paddingLeft: 12,
   alignContent: 'center',
   alignSelf: 'center',
   borderRightWidth: 0,
   borderLeftWidth: 0,
 },
 viewDz: {
   marginBottom: 24,
   paddingRight: 32,
   paddingLeft: 32,
 },
 textFd: {
   textAlign: 'center',
   marginBottom: 24,
 },
 touchableO6: {
   marginLeft: 14,
   marginRight: 14,
   height: 44,
   width: 44,
   justifyContent: 'center',
   alignItems: 'center',
 },
 viewSv: {
   flexDirection: 'row',
   justifyContent: 'center',
   marginTop: 24,
 },
 textHH: {
   textAlign: 'center',
 },
 viewVr: {
   paddingLeft: 32,
   paddingRight: 32,
   paddingTop: 32,
   paddingBottom: 32,
   alignItems: 'center',
 },
});
export default withTheme(REPLACE_SCREEN_NAME);

Screen Variants:

Additional Details

Changelog

No items found.

Request access to the private beta.