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.

Simple Welcome

Welcome

Welcome screen with background image and buttons.

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, withTheme } from '@draftbit/ui';
import { StyleSheet, Text } from 'react-native';
const REPLACE_SCREEN_NAME = props => {
 const { theme } = props;
 return (
   <ScreenContainer scrollable={false} hasSafeArea={false}>
     <Container
       style={styles.container3J}
       elevation={0}
       backgroundImage=""https://apps-draftbit-com.s3.amazonaws.com/nnVD1nJp/assets/a7c432db-7d90-4506-9e09-15bc773ad9bc""
       useThemeGutterPadding={true}
       backgroundImageResizeMode=""cover""
     >
       <Container elevation={0} useThemeGutterPadding={true}>
         <Text
           style={StyleSheet.flatten([
             styles.textB8,
             theme.typography.headline2,
             { color: theme.colors.strongInverse },
           ])}
         >
           Welcome
         </Text>
         <Text
           style={StyleSheet.flatten([
             styles.textUg,
             theme.typography.headline6,
             { color: theme.colors.strongInverse },
           ])}
         >
           Lets get started.
         </Text>
       </Container>
       <Container
         style={styles.containerPh}
         elevation={0}
         useThemeGutterPadding={false}
       >
         <Button
           style={styles.buttonYe}
           type=""solid""
           color={theme.colors.primary}
         >
           Sign Up
         </Button>
         <Button type=""outline"" color={theme.colors.background}>
           Log In
         </Button>
       </Container>
     </Container>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 buttonYe: {
   marginBottom: 16,
 },
 container3J: {
   minWidth: '100%',
   minHeight: '100%',
   justifyContent: 'space-around',
 },
 textB8: {
   textAlign: 'center',
 },
 containerPh: {
   justifyContent: 'space-between',
 },
 textUg: {
   textAlign: 'center',
 },
});
export default withTheme(REPLACE_SCREEN_NAME);

Screen Variants:

Additional Details

Changelog

No items found.

Request access to the private beta.