-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import { Button, ScreenContainer, withTheme } from '@draftbit/ui';
import {
Image,
KeyboardAvoidingView,
StyleSheet,
Text,
TextInput,
View,
} from 'react-native';
const REPLACE_SCREEN_NAME = props => {
const [emailinput, setEmailinput] = React.useState(undefined);
const [passwordinput, setPasswordinput] = React.useState(undefined);
const { theme } = props;
return (
<ScreenContainer hasSafeArea={true} scrollable={true}>
<KeyboardAvoidingView
style={styles.keyboardAvoidingView97}
behavior=""position""
enabled={true}
keyboardVerticalOffset={44}
>
<View style={styles.viewKt}>
<Image
style={styles.imageVH}
resizeMode=""contain""
source={Images.DraftbitIcon}
/>
<Text
style={StyleSheet.flatten([
styles.textXf,
theme.typography.headline2,
{ color: theme.colors.strong },
])}
>
Welcome to Draftbit
</Text>
</View>
<View
style={styles.viewRq}
pointerEvents={[{ label: '', value: '' }]}
clickable=""""
>
<TextInput
style={StyleSheet.flatten([
styles.textInputDq,
{
borderColor: theme.colors.divider,
borderRadius: theme.borderRadius.global,
color: theme.colors.strong,
backgroundColor: theme.colors.background,
},
])}
value={emailinput}
onChangeText={emailinput => setEmailinput(emailinput)}
spellcheck={true}
placeholder=""Email""
clearTextOnFocus={false}
enablesReturnKeyAutomatically={true}
placeholderTextColor={theme.colors.medium}
clearButtonMode=""while-editing""
returnKeyType=""next""
textContentType=""emailaddress""
/>
<TextInput
style={StyleSheet.flatten([
styles.textInput3S,
{
color: theme.colors.strong,
borderColor: theme.colors.divider,
borderRadius: theme.borderRadius.global,
backgroundColor: theme.colors.background,
},
])}
enablesReturnKeyAutomatically={true}
clearTextOnFocus={false}
placeholder=""Password""
spellcheck={true}
onChangeText={passwordinput => setPasswordinput(passwordinput)}
value={passwordinput}
placeholderTextColor={theme.colors.medium}
clearButtonMode=""while-editing""
secureTextEntry={true}
returnKeyType=""done""
textContentType=""password""
/>
<Button
style={StyleSheet.flatten([
styles.buttonHY,
{ borderRadius: theme.borderRadius.global },
])}
type=""solid""
>
Log In
</Button>
</View>
<View style={styles.viewKz}>
<Text
style={StyleSheet.flatten([
theme.typography.subtitle2,
{ color: theme.colors.medium },
])}
>
Don't have an account?
</Text>
<Button
style={StyleSheet.flatten([
styles.buttonXp,
{ borderColor: theme.colors.custom_rgba0_0_0_0 },
])}
type=""outline""
color={theme.colors.primary}
>
Sign Up
</Button>
</View>
</KeyboardAvoidingView>
</ScreenContainer>
);
};
const styles = StyleSheet.create({
keyboardAvoidingView97: {
justifyContent: 'space-around',
flexGrow: 1,
},
viewKt: {
paddingLeft: 32,
paddingRight: 32,
paddingBottom: 34,
paddingTop: 80,
justifyContent: 'center',
alignItems: 'center',
},
imageVH: {
width: 80,
height: 80,
marginBottom: 46,
},
textInputDq: {
paddingRight: 14,
paddingLeft: 14,
borderBottomWidth: 1,
borderTopWidth: 1,
borderLeftWidth: 1,
borderRightWidth: 1,
marginTop: 12,
marginBottom: 12,
height: 54,
},
viewRq: {
paddingLeft: 32,
paddingRight: 32,
marginBottom: 24,
},
buttonXp: {
borderTopWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
alignSelf: 'center',
alignContent: 'center',
paddingLeft: 12,
paddingRight: 12,
borderBottomWidth: 0,
},
textXf: {
textAlign: 'center',
},
textInput3S: {
marginBottom: 12,
marginTop: 12,
borderRightWidth: 1,
borderLeftWidth: 1,
borderTopWidth: 1,
borderBottomWidth: 1,
paddingRight: 14,
paddingLeft: 14,
height: 54,
},
buttonHY: {
justifyContent: 'center',
height: 54,
marginTop: 12,
alignItems: 'center',
},
viewKz: {
paddingLeft: 32,
paddingRight: 32,
paddingTop: 32,
paddingBottom: 32,
alignItems: 'center',
},
});
export default withTheme(REPLACE_SCREEN_NAME);