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.

Magic Link Confirmation

Confirmation

Confirm authentication from emailed magic link.

Preview this Screen

Scan with your camera to preview on your phone:

Download Expo
Screen Code

-- CODE language-jsx --
import React from 'react';
import {
 Button,
 Container,
 ScreenContainer,
 TextField,
 Touchable,
 withTheme,
} from '@draftbit/ui';
import {
 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 scrollable={true} hasSafeArea={true}>
     <KeyboardAvoidingView
       style={styles.keyboardAvoidingViewUr}
       enabled={true}
       behavior=""padding""
       keyboardVerticalOffset={60}
     >
       <Container
         style={styles.containerAj}
         elevation={0}
         useThemeGutterPadding={true}
       >
         <Text
           style={StyleSheet.flatten([
             styles.textWt,
             theme.typography.headline4,
             { color: theme.colors.strong },
           ])}
         >
           Confirm Account
         </Text>
         <Text
           style={StyleSheet.flatten([
             styles.textUu,
             theme.typography.body1,
             { color: theme.colors.strong },
           ])}
         >
           We've sent a confirmation to your email. Tap the link or copy the
           code here to get started.
         </Text>
         <TextField
           style={styles.textField1Q}
           type=""underline""
           label=""Confirmation Code""
           keyboardType=""numeric""
           leftIconMode=""inset""
           value={textFieldValue}
           onChangeText={textFieldValue => setTextFieldValue(textFieldValue)}
         />
       </Container>
       <Container elevation={0} useThemeGutterPadding={true}>
         <Touchable style={styles.touchableRm}>
           <Text
             style={StyleSheet.flatten([
               styles.text6M,
               theme.typography.button,
               { color: theme.colors.primary },
             ])}
           >
             Open Email
           </Text>
         </Touchable>
         <Button style={styles.buttonH5} type=""solid"">
           Confirm Account
         </Button>
         <Text
           style={StyleSheet.flatten([
             styles.text44,
             theme.typography.caption,
             { color: theme.colors.light },
           ])}
         >
           By signing in you agree to our Terms of Service, Privacy Policy and
           Cookie Policy.
         </Text>
       </Container>
     </KeyboardAvoidingView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 containerAj: {
   marginTop: 32,
 },
 keyboardAvoidingViewUr: {
   flexGrow: 1,
   justifyContent: 'space-between',
 },
 textWt: {
   textAlign: 'center',
 },
 text6M: {
   textAlign: 'center',
 },
 touchableRm: {
   marginBottom: 24,
 },
 buttonH5: {
   height: 48,
 },
 textUu: {
   marginTop: 20,
   textAlign: 'center',
 },
 text44: {
   width: '100%',
   marginTop: 16,
   textAlign: 'center',
 },
 textField1Q: {
   height: 82,
   marginTop: 20,
 },
});
export default withTheme(REPLACE_SCREEN_NAME);

Screen Variants:

Additional Details

Changelog

No items found.

Request access to the private beta.