-- 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,
 TextInput,
 View,
} from 'react-native';
const REPLACE_SCREEN_NAME = props => {
 const [message, setMessage] = React.useState(undefined);
 const { theme } = props;
 return (
   <ScreenContainer hasSafeArea={true} scrollable={true}>
     <KeyboardAvoidingView
       style={styles.keyboardAvoidingViewOO}
       enabled={true}
       behavior=""position""
       keyboardVerticalOffset={34}
     >
       <View style={styles.viewKp}>
         <Image
           style={styles.imageLf}
           source={Images.DraftbitIcon}
           resizeMode=""contain""
         />
         <Text
           style={StyleSheet.flatten([
             styles.textLS,
             theme.typography.headline3,
             { color: theme.colors.strong },
           ])}
         >
           What can I help you with?
         </Text>
         <Text
           style={StyleSheet.flatten([
             styles.textRJ,
             theme.typography.subtitle1,
             { color: theme.colors.medium },
           ])}
           ellipsizeMode=""tail""
           textBreakStrategy=""highQuality""
           accessible={true}
           allowFontScaling={true}
         >
           Some things you can ask me:
         </Text>
         <View
           hitSlop={{}}
           accessible={true}
           importantForAccessibility=""auto""
           pointerEvents=""auto""
         >
           <View
             style={styles.viewRu}
             hitSlop={{}}
             accessible={true}
             importantForAccessibility=""auto""
             pointerEvents=""auto""
           >
             <View
               style={styles.viewKb}
               hitSlop={{}}
               accessible={true}
               importantForAccessibility=""auto""
               pointerEvents=""auto""
             >
               <Icon
                 style={styles.iconT1}
                 size={24}
                 color={theme.colors.strong}
                 name=""Entypo/message""
               />
             </View>
             <Text
               style={StyleSheet.flatten([
                 styles.text5U,
                 { color: theme.colors.medium },
               ])}
               ellipsizeMode=""tail""
               textBreakStrategy=""highQuality""
               accessible={true}
               allowFontScaling={true}
             >
               Message example
             </Text>
           </View>
           <View
             style={styles.viewHW}
             pointerEvents=""auto""
             importantForAccessibility=""auto""
             hitSlop={{}}
             accessible={true}
           >
             <View
               style={styles.viewWn}
               importantForAccessibility=""auto""
               hitSlop={{}}
               accessible={true}
               pointerEvents=""auto""
             >
               <Icon
                 style={styles.iconBt}
                 color={theme.colors.strong}
                 name=""Entypo/message""
                 size={24}
               />
             </View>
             <Text
               style={StyleSheet.flatten([
                 styles.textKw,
                 { color: theme.colors.medium },
               ])}
               textBreakStrategy=""highQuality""
               accessible={true}
               ellipsizeMode=""tail""
               allowFontScaling={true}
             >
               Message example
             </Text>
           </View>
         </View>
       </View>
       <View
         style={styles.viewZv}
         clickable=""""
         pointerEvents={[{ label: '', value: '' }]}
       >
         <TextInput
           style={StyleSheet.flatten([
             styles.textInputV5,
             {
               color: theme.colors.strong,
               borderColor: theme.colors.divider,
               borderRadius: theme.borderRadius.global,
               backgroundColor: theme.colors.background,
             },
           ])}
           placeholder=""Message""
           placeholderTextColor={theme.colors.medium}
           enablesReturnKeyAutomatically={true}
           returnKeyType=""default""
           value={message}
           clearTextOnFocus={false}
           onChangeText={message => setMessage(message)}
           multiline={true}
           numberOfLines={14}
           scrollEnabled={true}
           clearButtonMode=""never""
           spellcheck={false}
           textContentType=""none""
         />
         <Button
           style={StyleSheet.flatten([
             styles.button3A,
             { borderRadius: theme.borderRadius.global },
           ])}
           type=""solid""
           icon=""FontAwesome/paper-plane""
         >
           Send
         </Button>
       </View>
     </KeyboardAvoidingView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 viewKb: {
   width: 24,
   maxWidth: 24,
   maxHeight: 24,
   marginRight: 14,
   height: 24,
   justifyContent: 'center',
   alignItems: 'center',
 },
 viewRu: {
   flexDirection: 'row',
   alignItems: 'center',
   paddingBottom: 4,
   paddingTop: 4,
 },
 viewWn: {
   alignItems: 'center',
   width: 24,
   maxWidth: 24,
   maxHeight: 24,
   marginRight: 14,
   height: 24,
   justifyContent: 'center',
 },
 keyboardAvoidingViewOO: {
   flexGrow: 1,
   justifyContent: 'space-around',
 },
 viewKp: {
   paddingLeft: 32,
   alignItems: 'flex-start',
   paddingTop: 64,
   paddingBottom: 34,
   paddingRight: 32,
 },
 imageLf: {
   width: 42,
   height: 42,
   marginBottom: 46,
 },
 iconT1: {
   width: 24,
   height: 24,
   maxWidth: 24,
   maxHeight: 24,
 },
 iconBt: {
   maxWidth: 24,
   maxHeight: 24,
   width: 24,
   height: 24,
 },
 textInputV5: {
   borderTopWidth: 1,
   borderBottomWidth: 1,
   paddingRight: 14,
   paddingLeft: 14,
   borderLeftWidth: 1,
   marginBottom: 12,
   marginTop: 12,
   borderRightWidth: 1,
   paddingTop: 12,
   paddingBottom: 12,
   height: 240,
 },
 text5U: {
   marginTop: 3,
 },
 textKw: {
   marginTop: 3,
 },
 viewHW: {
   paddingBottom: 4,
   flexDirection: 'row',
   alignItems: 'center',
   paddingTop: 4,
 },
 button3A: {
   height: 54,
   justifyContent: 'center',
   alignItems: 'center',
   marginTop: 12,
 },
 viewZv: {
   paddingRight: 32,
   paddingLeft: 32,
   marginBottom: 34,
   paddingBottom: 34,
 },
 textLS: {
   marginBottom: 24,
 },
 textRJ: {
   marginBottom: 2,
 },
});
export default withTheme(REPLACE_SCREEN_NAME);