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