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