-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import { Button, 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.keyboardAvoidingViewP8}
       behavior=""position""
       enabled={true}
       keyboardVerticalOffset={44}
     >
       <View style={styles.viewTw}>
         <Image
           style={styles.imageBs}
           source={Images.DraftbitLogo}
           resizeMode=""contain""
         />
         <Text
           style={StyleSheet.flatten([
             styles.textHP,
             theme.typography.headline2,
             { color: theme.colors.strong },
           ])}
         >
           Welcome
         </Text>
         <Text
           style={StyleSheet.flatten([
             styles.textAh,
             theme.typography.subtitle1,
             { color: theme.colors.medium },
           ])}
         >
           Create, customize, and launch mobile apps all from your browser.
           Source code included.
         </Text>
         <View
           style={styles.viewXm}
           pointerEvents={[{ label: '', value: '' }]}
           clickable=""""
         >
           <Button
             style={StyleSheet.flatten([
               styles.buttonKr,
               { borderRadius: theme.borderRadius.global },
             ])}
             type=""solid""
           >
             Sign Up
           </Button>
           <Button
             style={StyleSheet.flatten([
               styles.buttonLl,
               { borderColor: theme.colors.custom_rgba0_0_0_0 },
             ])}
             color={theme.colors.primary}
             type=""outline""
           >
             Log In
           </Button>
         </View>
       </View>
     </KeyboardAvoidingView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 buttonKr: {
   height: 54,
   marginTop: 12,
   alignSelf: 'center',
   width: '80%',
   alignItems: 'center',
   justifyContent: 'center',
 },
 keyboardAvoidingViewP8: {
   justifyContent: 'center',
   flexGrow: 1,
 },
 viewTw: {
   paddingLeft: 32,
   paddingRight: 32,
   justifyContent: 'center',
   alignItems: 'center',
 },
 imageBs: {
   width: 180,
   height: 80,
   marginBottom: 80,
 },
 buttonLl: {
   alignSelf: 'center',
   borderRightWidth: 0,
   borderLeftWidth: 0,
   borderTopWidth: 0,
   borderBottomWidth: 0,
   paddingRight: 12,
   paddingLeft: 12,
   alignContent: 'center',
 },
 textHP: {
   marginBottom: 24,
   textAlign: 'center',
 },
 textAh: {
   textAlign: 'center',
 },
 viewXm: {
   paddingLeft: 32,
   paddingRight: 32,
   width: '100%',
   marginTop: 40,
   marginBottom: 60,
 },
});
export default withTheme(REPLACE_SCREEN_NAME);