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.

Splash Screen

Welcome

Explain what your app is all about before sending users to the home screen.

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, 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.keyboardAvoidingViewJ4}
       behavior=""position""
       enabled={true}
       keyboardVerticalOffset={44}
     >
       <View style={styles.viewFX}>
         <Image
           style={styles.imageWk}
           resizeMode=""contain""
           source={Images.DraftbitIcon}
         />
         <Text
           style={StyleSheet.flatten([
             theme.typography.headline2,
             { color: theme.colors.strong },
           ])}
         >
           Welcome to Draftbit
         </Text>
       </View>
       <View style={styles.view4Y}>
         <View style={styles.viewXm}>
           <Icon
             style={styles.iconHc}
             color={theme.colors.strong}
             size={24}
             name=""MaterialCommunityIcons/information""
           />
           <Text
             style={StyleSheet.flatten([
               theme.typography.subtitle1,
               { color: theme.colors.strong },
             ])}
             allowFontScaling={true}
           >
             Start quickly with Bits, Blocks and Examples.
           </Text>
         </View>
         <View style={styles.viewXa}>
           <Icon
             style={styles.iconNg}
             name=""MaterialCommunityIcons/information""
             size={24}
             color={theme.colors.strong}
           />
           <Text
             style={StyleSheet.flatten([
               theme.typography.subtitle1,
               { color: theme.colors.strong },
             ])}
             allowFontScaling={true}
           >
             Customize every detail with custom code.
           </Text>
         </View>
         <View style={styles.viewPa}>
           <Icon
             style={styles.iconZc}
             name=""MaterialCommunityIcons/information""
             color={theme.colors.strong}
             size={24}
           />
           <Text
             style={StyleSheet.flatten([
               theme.typography.subtitle1,
               { color: theme.colors.strong },
             ])}
             allowFontScaling={true}
           >
             Preview as you go on your device, or on the web.
           </Text>
         </View>
       </View>
       <View style={styles.view9R}>
         <Button
           style={StyleSheet.flatten([
             styles.buttonI2,
             { borderRadius: theme.borderRadius.global },
           ])}
           type=""solid""
         >
           Continue
         </Button>
         <Button
           style={StyleSheet.flatten([
             styles.buttonBb,
             { borderColor: theme.colors.custom_rgba0_0_0_0 },
           ])}
           type=""outline""
           color={theme.colors.primary}
         >
           Skip
         </Button>
       </View>
     </KeyboardAvoidingView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 buttonI2: {
   alignItems: 'center',
   justifyContent: 'center',
   height: 54,
   marginTop: 12,
 },
 keyboardAvoidingViewJ4: {
   justifyContent: 'space-around',
   flexGrow: 1,
 },
 viewFX: {
   paddingLeft: 32,
   paddingRight: 32,
   paddingBottom: 34,
   paddingTop: 64,
   alignItems: 'flex-start',
 },
 viewXm: {
   flexDirection: 'row',
   alignItems: 'flex-start',
   maxWidth: '80%',
   marginBottom: 12,
   marginTop: 12,
 },
 imageWk: {
   width: 42,
   height: 42,
   marginBottom: 46,
 },
 iconHc: {
   height: 34,
   width: 34,
   marginRight: 14,
 },
 iconNg: {
   marginRight: 14,
   width: 34,
   height: 34,
 },
 iconZc: {
   height: 34,
   width: 34,
   marginRight: 14,
 },
 buttonBb: {
   borderTopWidth: 0,
   borderLeftWidth: 0,
   borderRightWidth: 0,
   alignSelf: 'center',
   alignContent: 'center',
   paddingLeft: 12,
   paddingRight: 12,
   borderBottomWidth: 0,
 },
 viewXa: {
   flexDirection: 'row',
   alignItems: 'flex-start',
   maxWidth: '80%',
   marginBottom: 12,
   marginTop: 12,
 },
 view4Y: {
   width: '100%',
   paddingLeft: 32,
   paddingRight: 32,
 },
 viewPa: {
   alignItems: 'flex-start',
   flexDirection: 'row',
   marginBottom: 12,
   marginTop: 12,
   maxWidth: '80%',
 },
 view9R: {
   paddingLeft: 32,
   paddingRight: 32,
   paddingTop: 34,
   paddingBottom: 34,
   alignItems: 'center',
 },
});
export default withTheme(REPLACE_SCREEN_NAME);

Screen Variants:

Additional Details

Changelog

No items found.

Request access to the private beta.