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.

Login With Social Auth

Login

Prompts users to log in to your app using either email address or social media accounts.

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,
 Container,
 ScreenContainer,
 TextField,
 Touchable,
 withTheme,
} from '@draftbit/ui';
import {
 Image,
 KeyboardAvoidingView,
 StatusBar,
 StyleSheet,
 Text,
} from 'react-native';
const REPLACE_SCREEN_NAME = props => {
 const [textFieldValue, setTextFieldValue] = React.useState(undefined);
 const { theme } = props;
 React.useEffect(() => {
   StatusBar.setBarStyle('dark-content');
 }, []);
 return (
   <ScreenContainer
     style={styles.screenContainerGM}
     scrollable={true}
     hasSafeArea={true}
   >
     <KeyboardAvoidingView
       style={styles.keyboardAvoidingViewFd}
       enabled={true}
       behavior=""position""
       keyboardVerticalOffset={20}
     >
       <Container
         style={styles.containerZn}
         elevation={0}
         useThemeGutterPadding={true}
       >
         <Image
           style={styles.imageSK}
           source={Images.DraftbitMark}
           resizeMode=""contain""
         />
         <Button
           style={styles.buttonJ9}
           icon=""FontAwesome/facebook""
           type=""solid""
         >
           Log in with Facebook
         </Button>
         <Button
           style={styles.buttonMe}
           icon=""FontAwesome/google""
           type=""outline""
         >
           Log in with Google
         </Button>
         <Text
           style={StyleSheet.flatten([
             styles.text0A,
             theme.typography.headline6,
             { color: theme.colors.medium },
           ])}
         >
           OR
         </Text>
         <TextField
           style={styles.textFieldMT}
           type=""underline""
           label=""Email""
           keyboardType=""email-address""
           leftIconMode=""inset""
           value={textFieldValue}
           onChangeText={textFieldValue => setTextFieldValue(textFieldValue)}
         />
         <TextField
           style={styles.textFieldA7}
           type=""underline""
           label=""Password""
           keyboardType=""default""
           leftIconMode=""inset""
           secureTextEntry={true}
           value={textFieldValue}
           onChangeText={textFieldValue => setTextFieldValue(textFieldValue)}
         />
         <Button
           style={styles.buttonEj}
           type=""solid""
           color={theme.colors.primary}
         >
           Login
         </Button>
         <Touchable>
           <Text
             style={StyleSheet.flatten([
               styles.textMH,
               theme.typography.button,
               { color: theme.colors.primary },
             ])}
           >
             Need an account? Sign Up
           </Text>
         </Touchable>
         <Touchable>
           <Text
             style={StyleSheet.flatten([
               styles.textI7,
               theme.typography.button,
               { color: theme.colors.primary },
             ])}
           >
             Forgot Password?
           </Text>
         </Touchable>
         <Text
           style={StyleSheet.flatten([
             styles.textOr,
             theme.typography.caption,
             { color: theme.colors.light },
           ])}
         >
           By tapping ""Log in"", you agree to our Terms of Service, Privacy
           Policy and Cookie Policy.
         </Text>
       </Container>
     </KeyboardAvoidingView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 containerZn: {
   height: '100%',
   flexGrow: 1,
   justifyContent: 'space-evenly',
 },
 keyboardAvoidingViewFd: {
   flexGrow: 1,
 },
 screenContainerGM: {
   justifyContent: 'space-around',
 },
 textMH: {
   width: '100%',
   textAlign: 'center',
 },
 textI7: {
   textAlign: 'center',
 },
 imageSK: {
   width: 125,
   height: 125,
   alignSelf: 'center',
 },
 buttonJ9: {
   height: 48,
   marginTop: 16,
   alignSelf: 'stretch',
 },
 buttonMe: {
   height: 48,
   marginTop: 16,
   alignSelf: 'stretch',
 },
 text0A: {
   textAlign: 'center',
 },
 textFieldMT: {
   height: 82,
 },
 textFieldA7: {
   height: 82,
 },
 buttonEj: {
   height: 48,
   marginBottom: 8,
 },
 textOr: {
   width: '100%',
   textAlign: 'center',
 },
});
export default withTheme(REPLACE_SCREEN_NAME);

Screen Variants:

Additional Details

Changelog

No items found.

Request access to the private beta.