-- 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
     style={styles.screenContainerGM}
     scrollable={true}
     hasSafeArea={true}
   >
     <KeyboardAvoidingView
       style={styles.keyboardAvoidingViewFd}
       enabled={true}
       behavior=""position""
       keyboardVerticalOffset={20}
     >
       <Container
         style={styles.containerZn}
         elevation={0}
         useThemeGutterPadding={true}
       >
         <Image
           style={styles.imageSK}
           source={Images.DraftbitMark}
           resizeMode=""contain""
         />
         <Button
           style={styles.buttonJ9}
           icon=""FontAwesome/facebook""
           type=""solid""
         >
           Log in with Facebook
         </Button>
         <Button
           style={styles.buttonMe}
           icon=""FontAwesome/google""
           type=""outline""
         >
           Log in with Google
         </Button>
         <Text
           style={StyleSheet.flatten([
             styles.text0A,
             theme.typography.headline6,
             { color: theme.colors.medium },
           ])}
         >
           OR
         </Text>
         <TextField
           style={styles.textFieldMT}
           type=""underline""
           label=""Email""
           keyboardType=""email-address""
           leftIconMode=""inset""
           value={textFieldValue}
           onChangeText={textFieldValue => setTextFieldValue(textFieldValue)}
         />
         <TextField
           style={styles.textFieldA7}
           type=""underline""
           label=""Password""
           keyboardType=""default""
           leftIconMode=""inset""
           secureTextEntry={true}
           value={textFieldValue}
           onChangeText={textFieldValue => setTextFieldValue(textFieldValue)}
         />
         <Button
           style={styles.buttonEj}
           type=""solid""
           color={theme.colors.primary}
         >
           Login
         </Button>
         <Touchable>
           <Text
             style={StyleSheet.flatten([
               styles.textMH,
               theme.typography.button,
               { color: theme.colors.primary },
             ])}
           >
             Need an account? Sign Up
           </Text>
         </Touchable>
         <Touchable>
           <Text
             style={StyleSheet.flatten([
               styles.textI7,
               theme.typography.button,
               { color: theme.colors.primary },
             ])}
           >
             Forgot Password?
           </Text>
         </Touchable>
         <Text
           style={StyleSheet.flatten([
             styles.textOr,
             theme.typography.caption,
             { color: theme.colors.light },
           ])}
         >
           By tapping ""Log in"", you agree to our Terms of Service, Privacy
           Policy and Cookie Policy.
         </Text>
       </Container>
     </KeyboardAvoidingView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 containerZn: {
   height: '100%',
   flexGrow: 1,
   justifyContent: 'space-evenly',
 },
 keyboardAvoidingViewFd: {
   flexGrow: 1,
 },
 screenContainerGM: {
   justifyContent: 'space-around',
 },
 textMH: {
   width: '100%',
   textAlign: 'center',
 },
 textI7: {
   textAlign: 'center',
 },
 imageSK: {
   width: 125,
   height: 125,
   alignSelf: 'center',
 },
 buttonJ9: {
   height: 48,
   marginTop: 16,
   alignSelf: 'stretch',
 },
 buttonMe: {
   height: 48,
   marginTop: 16,
   alignSelf: 'stretch',
 },
 text0A: {
   textAlign: 'center',
 },
 textFieldMT: {
   height: 82,
 },
 textFieldA7: {
   height: 82,
 },
 buttonEj: {
   height: 48,
   marginBottom: 8,
 },
 textOr: {
   width: '100%',
   textAlign: 'center',
 },
});
export default withTheme(REPLACE_SCREEN_NAME);