-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import { Button, Icon, 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.keyboardAvoidingViewJ4}
behavior=""position""
enabled={true}
keyboardVerticalOffset={44}
>
<View style={styles.viewFX}>
<Image
style={styles.imageWk}
resizeMode=""contain""
source={Images.DraftbitIcon}
/>
<Text
style={StyleSheet.flatten([
theme.typography.headline2,
{ color: theme.colors.strong },
])}
>
Welcome to Draftbit
</Text>
</View>
<View style={styles.view4Y}>
<View style={styles.viewXm}>
<Icon
style={styles.iconHc}
color={theme.colors.strong}
size={24}
name=""MaterialCommunityIcons/information""
/>
<Text
style={StyleSheet.flatten([
theme.typography.subtitle1,
{ color: theme.colors.strong },
])}
allowFontScaling={true}
>
Start quickly with Bits, Blocks and Examples.
</Text>
</View>
<View style={styles.viewXa}>
<Icon
style={styles.iconNg}
name=""MaterialCommunityIcons/information""
size={24}
color={theme.colors.strong}
/>
<Text
style={StyleSheet.flatten([
theme.typography.subtitle1,
{ color: theme.colors.strong },
])}
allowFontScaling={true}
>
Customize every detail with custom code.
</Text>
</View>
<View style={styles.viewPa}>
<Icon
style={styles.iconZc}
name=""MaterialCommunityIcons/information""
color={theme.colors.strong}
size={24}
/>
<Text
style={StyleSheet.flatten([
theme.typography.subtitle1,
{ color: theme.colors.strong },
])}
allowFontScaling={true}
>
Preview as you go on your device, or on the web.
</Text>
</View>
</View>
<View style={styles.view9R}>
<Button
style={StyleSheet.flatten([
styles.buttonI2,
{ borderRadius: theme.borderRadius.global },
])}
type=""solid""
>
Continue
</Button>
<Button
style={StyleSheet.flatten([
styles.buttonBb,
{ borderColor: theme.colors.custom_rgba0_0_0_0 },
])}
type=""outline""
color={theme.colors.primary}
>
Skip
</Button>
</View>
</KeyboardAvoidingView>
</ScreenContainer>
);
};
const styles = StyleSheet.create({
buttonI2: {
alignItems: 'center',
justifyContent: 'center',
height: 54,
marginTop: 12,
},
keyboardAvoidingViewJ4: {
justifyContent: 'space-around',
flexGrow: 1,
},
viewFX: {
paddingLeft: 32,
paddingRight: 32,
paddingBottom: 34,
paddingTop: 64,
alignItems: 'flex-start',
},
viewXm: {
flexDirection: 'row',
alignItems: 'flex-start',
maxWidth: '80%',
marginBottom: 12,
marginTop: 12,
},
imageWk: {
width: 42,
height: 42,
marginBottom: 46,
},
iconHc: {
height: 34,
width: 34,
marginRight: 14,
},
iconNg: {
marginRight: 14,
width: 34,
height: 34,
},
iconZc: {
height: 34,
width: 34,
marginRight: 14,
},
buttonBb: {
borderTopWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
alignSelf: 'center',
alignContent: 'center',
paddingLeft: 12,
paddingRight: 12,
borderBottomWidth: 0,
},
viewXa: {
flexDirection: 'row',
alignItems: 'flex-start',
maxWidth: '80%',
marginBottom: 12,
marginTop: 12,
},
view4Y: {
width: '100%',
paddingLeft: 32,
paddingRight: 32,
},
viewPa: {
alignItems: 'flex-start',
flexDirection: 'row',
marginBottom: 12,
marginTop: 12,
maxWidth: '80%',
},
view9R: {
paddingLeft: 32,
paddingRight: 32,
paddingTop: 34,
paddingBottom: 34,
alignItems: 'center',
},
});
export default withTheme(REPLACE_SCREEN_NAME);