import React from 'react';
import {
 StatusBar,
 View,
 StyleSheet,
 KeyboardAvoidingView,
 Text,
} from 'react-native';
import { withTheme, ScreenContainer, Image, TextField } from '@draftbit/ui';
import Images from '../config/Images';

class Login extends React.Component {
 state = {};

 componentDidMount() {
   StatusBar.setBarStyle('dark-content');
 }

 render() {
   const { theme } = this.props;

   return (
<ScreenContainer
       scrollable={false}
       hasSafeArea={true}
       style {styles.screenContainerZc}
>
<KeyboardAvoidingView
         keyboardVerticalOffset={0}
         behavior="padding"
         enabled={true}
         style={styles.keyboardAvoidingView4W}
>
<View style={styles.viewU5}>
<Image
             resizeMode="contain"
             source={Images.LogoPrimary}
             style={styles.image0V}
           />
<Text
             style={StyleSheet.flatten([
               theme.typography.headline4,
               { color: theme.colors.strong },
             ])}
>
             Welcome to Rentbit.
</Text>
<TextField
             leftIconMode="inset"
             placeholder="Login with Facebook"
             label="Social Login"
             type="underline"
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             style={styles.textFieldDt}
           />
<TextField
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             secureTextEntry={true}
             leftIconMode="inset"
             placeholder="Create Your Account"
             label="Create Account"
             error={false}
             type="underline"
           />
<TextField
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             secureTextEntry={true}
             leftIconMode="inset"
             placeholder="Log In"
             label="Log In"
             error={false}
             type="underline"
           />
</View>
</KeyboardAvoidingView>
</ScreenContainer>
   );
 }
}

const styles = StyleSheet.create({
 viewU5: {
   paddingRight: 16,
   paddingLeft: 16,
   flexGrow: 1,
   justifyContent: 'center',
 },
 screenContainerZc: {
   justifyContent: 'space-between',
 },
 keyboardAvoidingView4W: {
   flexGrow: 1,
   justifyContent: 'space-between',
 },
 image0V: {
   width: 150,
 },
 textFieldDt: {
   height: 82,
   marginBottom: 16,
 },
});

export default withTheme(Login);

import React from 'react';
import {
 StatusBar,
 View,
 StyleSheet,
 KeyboardAvoidingView,
 Text,
} from 'react-native';
import { withTheme, ScreenContainer, Image, TextField } from '@draftbit/ui';
import Images from '../config/Images';

class Login extends React.Component {
 state = {};

 componentDidMount() {
   StatusBar.setBarStyle('dark-content');
 }

 render() {
   const { theme } = this.props;

   return (
<ScreenContainer
       scrollable={false}
       hasSafeArea={true}
       style {styles.screenContainerZc}
>
<KeyboardAvoidingView
         keyboardVerticalOffset={0}
         behavior="padding"
         enabled={true}
         style={styles.keyboardAvoidingView4W}
>
<View style={styles.viewU5}>
<Image
             resizeMode="contain"
             source={Images.LogoPrimary}
             style={styles.image0V}
           />
<Text
             style={StyleSheet.flatten([
               theme.typography.headline4,
               { color: theme.colors.strong },
             ])}
>
             Welcome to Rentbit.
</Text>
<TextField
             leftIconMode="inset"
             placeholder="Login with Facebook"
             label="Social Login"
             type="underline"
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             style={styles.textFieldDt}
           />
<TextField
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             secureTextEntry={true}
             leftIconMode="inset"
             placeholder="Create Your Account"
             label="Create Account"
             error={false}
             type="underline"
           />
<TextField
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             secureTextEntry={true}
             leftIconMode="inset"
             placeholder="Log In"
             label="Log In"
             error={false}
             type="underline"
           />
</View>
</KeyboardAvoidingView>
</ScreenContainer>
   );
 }
}

const styles = StyleSheet.create({
 viewU5: {
   paddingRight: 16,
   paddingLeft: 16,
   flexGrow: 1,
   justifyContent: 'center',
 },
 screenContainerZc: {
   justifyContent: 'space-between',
 },
 keyboardAvoidingView4W: {
   flexGrow: 1,
   justifyContent: 'space-between',
 },
 image0V: {
   width: 150,
 },
 textFieldDt: {
   height: 82,
   marginBottom: 16,
 },
});

export default withTheme(Login);