-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import {
Button,
Container,
ScreenContainer,
TextField,
Touchable,
withTheme,
} from '@draftbit/ui';
import {
Image,
KeyboardAvoidingView,
StatusBar,
StyleSheet,
Text,
} from 'react-native';
const REPLACE_SCREEN_NAME = props => {
const [textFieldValue, setTextFieldValue] = React.useState(undefined);
const { theme } = props;
React.useEffect(() => {
StatusBar.setBarStyle('dark-content');
}, []);
return (
<ScreenContainer scrollable={true} hasSafeArea={true}>
<KeyboardAvoidingView
style={styles.keyboardAvoidingViewM2}
behavior=""padding""
keyboardVerticalOffset={60}
enabled={true}
>
<Container
style={styles.containerJr}
elevation={0}
useThemeGutterPadding={true}
>
<Image
style={styles.imageMX}
resizeMode=""cover""
source={Images.Black}
/>
<Text
style={StyleSheet.flatten([
styles.textMX,
theme.typography.headline4,
])}
>
Welcome Back!
</Text>
<Text
style={StyleSheet.flatten([styles.textXb, theme.typography.body2])}
>
Sign in to get started.
</Text>
</Container>
<Container useThemeGutterPadding={true} elevation={0}>
<TextField
style={styles.textFieldHk}
onChangeText={textFieldValue => setTextFieldValue(textFieldValue)}
value={textFieldValue}
leftIconMode=""inset""
keyboardType=""email-address""
label=""Email""
type=""underline""
/>
<TextField
style={styles.textFieldDc}
onChangeText={textFieldValue => setTextFieldValue(textFieldValue)}
secureTextEntry={true}
value={textFieldValue}
leftIconMode=""inset""
keyboardType=""default""
label=""Password""
type=""underline""
/>
<Touchable style={styles.touchableCq}>
<Text
style={StyleSheet.flatten([
styles.textAe,
theme.typography.headline6,
{ color: theme.colors.primary },
])}
>
Lost Password?
</Text>
</Touchable>
</Container>
<Container
style={styles.containerJb}
elevation={0}
useThemeGutterPadding={true}
>
<Button type=""solid"">Sign In</Button>
<Text
style={StyleSheet.flatten([
styles.textBg,
theme.typography.caption,
{ color: theme.colors.light },
])}
>
By signing in you agree to our Terms of Service, Privacy Policy and
Cookie Policy.
</Text>
</Container>
</KeyboardAvoidingView>
</ScreenContainer>
);
};
const styles = StyleSheet.create({
containerJr: {
alignItems: 'center',
marginTop: 24,
},
keyboardAvoidingViewM2: {
flexGrow: 1,
justifyContent: 'space-around',
},
textAe: {
width: '100%',
textAlign: 'center',
},
imageMX: {
width: 100,
height: 100,
},
textFieldHk: {
marginBottom: 16,
},
textMX: {
textAlign: 'center',
marginTop: 16,
},
textBg: {
textAlign: 'center',
marginTop: 16,
width: '100%',
},
textFieldDc: {
marginBottom: 16,
},
containerJb: {
alignItems: 'center',
},
textXb: {
textAlign: 'center',
},
touchableCq: {
marginBottom: 16,
},
});
export default withTheme(REPLACE_SCREEN_NAME);