-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import { Button, ScreenContainer, withTheme } from '@draftbit/ui';
import {
Image,
KeyboardAvoidingView,
StyleSheet,
Text,
View,
} from 'react-native';
const REPLACE_SCREEN_NAME = props => {
const { theme } = props;
return (
<ScreenContainer hasSafeArea={true} scrollable={true}>
<KeyboardAvoidingView
style={styles.keyboardAvoidingViewP8}
behavior=""position""
enabled={true}
keyboardVerticalOffset={44}
>
<View style={styles.viewTw}>
<Image
style={styles.imageBs}
source={Images.DraftbitLogo}
resizeMode=""contain""
/>
<Text
style={StyleSheet.flatten([
styles.textHP,
theme.typography.headline2,
{ color: theme.colors.strong },
])}
>
Welcome
</Text>
<Text
style={StyleSheet.flatten([
styles.textAh,
theme.typography.subtitle1,
{ color: theme.colors.medium },
])}
>
Create, customize, and launch mobile apps all from your browser.
Source code included.
</Text>
<View
style={styles.viewXm}
pointerEvents={[{ label: '', value: '' }]}
clickable=""""
>
<Button
style={StyleSheet.flatten([
styles.buttonKr,
{ borderRadius: theme.borderRadius.global },
])}
type=""solid""
>
Sign Up
</Button>
<Button
style={StyleSheet.flatten([
styles.buttonLl,
{ borderColor: theme.colors.custom_rgba0_0_0_0 },
])}
color={theme.colors.primary}
type=""outline""
>
Log In
</Button>
</View>
</View>
</KeyboardAvoidingView>
</ScreenContainer>
);
};
const styles = StyleSheet.create({
buttonKr: {
height: 54,
marginTop: 12,
alignSelf: 'center',
width: '80%',
alignItems: 'center',
justifyContent: 'center',
},
keyboardAvoidingViewP8: {
justifyContent: 'center',
flexGrow: 1,
},
viewTw: {
paddingLeft: 32,
paddingRight: 32,
justifyContent: 'center',
alignItems: 'center',
},
imageBs: {
width: 180,
height: 80,
marginBottom: 80,
},
buttonLl: {
alignSelf: 'center',
borderRightWidth: 0,
borderLeftWidth: 0,
borderTopWidth: 0,
borderBottomWidth: 0,
paddingRight: 12,
paddingLeft: 12,
alignContent: 'center',
},
textHP: {
marginBottom: 24,
textAlign: 'center',
},
textAh: {
textAlign: 'center',
},
viewXm: {
paddingLeft: 32,
paddingRight: 32,
width: '100%',
marginTop: 40,
marginBottom: 60,
},
});
export default withTheme(REPLACE_SCREEN_NAME);