-- 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);