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