-- CODE language-jsx --
import React from 'react';
import {
Button,
Icon,
RadioButton,
ScreenContainer,
withTheme,
} from '@draftbit/ui';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
const REPLACE_SCREEN_NAME = props => {
const { theme } = props;
return (
<ScreenContainer scrollable={false} hasSafeArea={true}>
<ScrollView
contentContainerStyle={styles.scrollViewGc}
bounces={true}
showsVerticalScrollIndicator={true}
showsHorizontalScrollIndicator={true}
>
<View
style={styles.viewVa}
pointerEvents=""auto""
hitSlop={{}}
importantForAccessibility=""auto""
accessible={true}
>
<Text
style={StyleSheet.flatten([
theme.typography.headline2,
{ color: theme.colors.strong },
])}
>
Get Started
</Text>
</View>
<View
pointerEvents=""auto""
hitSlop={{}}
importantForAccessibility=""auto""
accessible={true}
>
<View
pointerEvents=""auto""
hitSlop={{}}
importantForAccessibility=""auto""
accessible={true}
>
<View
accessible={true}
importantForAccessibility=""auto""
hitSlop={{}}
pointerEvents=""auto""
>
<View
style={StyleSheet.flatten([
styles.viewA7,
{
borderRadius: theme.borderRadius.global,
backgroundColor: theme.colors.background,
borderColor: theme.colors.divider,
},
])}
hitSlop={{}}
accessible={true}
importantForAccessibility=""auto""
pointerEvents=""auto""
>
<View
style={styles.viewTm}
pointerEvents=""auto""
hitSlop={{}}
importantForAccessibility=""auto""
accessible={true}
>
<View
style={styles.viewS6}
accessible={true}
pointerEvents=""auto""
importantForAccessibility=""auto""
hitSlop={{}}
>
<Icon
style={styles.iconBA}
size={32}
name=""MaterialCommunityIcons/numeric-1-circle""
color={theme.colors.light}
/>
</View>
<View
style={styles.viewHr}
pointerEvents=""auto""
importantForAccessibility=""auto""
accessible={true}
hitSlop={{}}
>
<Text
style={StyleSheet.flatten([
theme.typography.headline6,
{ color: theme.colors.strong },
])}
>
Option 1
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.caption,
{ color: theme.colors.medium },
])}
>
Description
</Text>
</View>
</View>
<RadioButton
style={styles.radioButtonNS}
selected={false}
color={theme.colors.primary}
unselectedColor={theme.colors.medium}
/>
</View>
</View>
<View
accessible={true}
importantForAccessibility=""auto""
hitSlop={{}}
pointerEvents=""auto""
>
<View
style={StyleSheet.flatten([
styles.viewLs,
{
borderRadius: theme.borderRadius.global,
backgroundColor: theme.colors.background,
borderColor: theme.colors.divider,
},
])}
hitSlop={{}}
accessible={true}
importantForAccessibility=""auto""
pointerEvents=""auto""
>
<View
style={styles.viewUy}
pointerEvents=""auto""
hitSlop={{}}
importantForAccessibility=""auto""
accessible={true}
>
<View
style={styles.viewKf}
accessible={true}
pointerEvents=""auto""
importantForAccessibility=""auto""
hitSlop={{}}
>
<Icon
style={styles.iconDa}
size={32}
name=""MaterialCommunityIcons/numeric-2-circle""
color={theme.colors.light}
/>
</View>
<View
style={styles.viewLy}
pointerEvents=""auto""
importantForAccessibility=""auto""
accessible={true}
hitSlop={{}}
>
<Text
style={StyleSheet.flatten([
theme.typography.headline6,
{ color: theme.colors.strong },
])}
>
Option 2
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.caption,
{ color: theme.colors.medium },
])}
>
Description
</Text>
</View>
</View>
<RadioButton
style={styles.radioButtonFc}
selected={false}
color={theme.colors.primary}
unselectedColor={theme.colors.medium}
/>
</View>
</View>
<View
pointerEvents=""auto""
hitSlop={{}}
importantForAccessibility=""auto""
accessible={true}
>
<View
style={StyleSheet.flatten([
styles.viewGw,
{
backgroundColor: theme.colors.background,
borderRadius: theme.borderRadius.global,
borderColor: theme.colors.divider,
},
])}
accessible={true}
pointerEvents=""auto""
importantForAccessibility=""auto""
hitSlop={{}}
>
<View
style={styles.view9V}
pointerEvents=""auto""
hitSlop={{}}
importantForAccessibility=""auto""
accessible={true}
>
<View
style={styles.viewO5}
pointerEvents=""auto""
hitSlop={{}}
importantForAccessibility=""auto""
accessible={true}
>
<Icon
style={styles.icon3R}
size={32}
color={theme.colors.light}
name=""MaterialCommunityIcons/numeric-3-circle""
/>
</View>
<View
style={styles.viewFg}
pointerEvents=""auto""
hitSlop={{}}
importantForAccessibility=""auto""
accessible={true}
>
<Text
style={StyleSheet.flatten([
theme.typography.headline6,
{ color: theme.colors.strong },
])}
>
Option 3
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.caption,
{ color: theme.colors.medium },
])}
>
Description
</Text>
</View>
</View>
<RadioButton
style={styles.radioButtonFm}
unselectedColor={theme.colors.medium}
selected={false}
color={theme.colors.primary}
/>
</View>
</View>
</View>
<View
style={styles.viewV3}
pointerEvents=""auto""
hitSlop={{}}
importantForAccessibility=""auto""
accessible={true}
>
<Button
style={StyleSheet.flatten([
styles.buttonTq,
{ borderRadius: theme.borderRadius.global },
])}
type=""solid""
>
Continue
</Button>
</View>
</View>
</ScrollView>
</ScreenContainer>
);
};
const styles = StyleSheet.create({
viewVa: {
height: '70%',
alignItems: 'flex-start',
justifyContent: 'flex-end',
paddingBottom: 40,
paddingTop: 20,
},
viewS6: {
marginRight: 14,
alignContent: 'center',
minWidth: 32,
minHeight: 32,
maxWidth: 32,
maxHeight: 32,
alignItems: 'center',
justifyContent: 'center',
},
viewTm: {
flexDirection: 'row',
alignItems: 'flex-start',
width: '75%',
alignSelf: 'stretch',
},
viewA7: {
paddingLeft: 16,
flexDirection: 'row',
marginTop: 8,
paddingRight: 16,
paddingBottom: 12,
paddingTop: 12,
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 8,
borderTopWidth: 1,
borderBottomWidth: 1,
borderLeftWidth: 1,
borderRightWidth: 1,
},
viewKf: {
marginRight: 14,
alignContent: 'center',
minWidth: 32,
minHeight: 32,
maxWidth: 32,
maxHeight: 32,
alignItems: 'center',
justifyContent: 'center',
},
viewUy: {
flexDirection: 'row',
alignItems: 'flex-start',
width: '75%',
alignSelf: 'stretch',
},
viewLs: {
paddingLeft: 16,
flexDirection: 'row',
marginTop: 8,
paddingRight: 16,
paddingBottom: 12,
paddingTop: 12,
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 8,
borderBottomWidth: 1,
borderTopWidth: 1,
borderLeftWidth: 1,
borderRightWidth: 1,
},
viewO5: {
minWidth: 32,
minHeight: 32,
maxHeight: 32,
maxWidth: 32,
justifyContent: 'center',
alignItems: 'center',
marginRight: 14,
alignContent: 'center',
},
view9V: {
alignSelf: 'stretch',
flexDirection: 'row',
alignItems: 'flex-start',
width: '75%',
},
viewGw: {
alignItems: 'center',
justifyContent: 'space-between',
flexDirection: 'row',
paddingLeft: 16,
paddingTop: 12,
paddingBottom: 12,
paddingRight: 16,
marginBottom: 8,
marginTop: 8,
borderBottomWidth: 1,
borderTopWidth: 1,
borderLeftWidth: 1,
borderRightWidth: 1,
},
buttonTq: {
height: 52,
justifyContent: 'center',
alignItems: 'center',
},
scrollViewGc: {
paddingLeft: 32,
paddingRight: 32,
paddingBottom: 32,
paddingTop: 32,
flexGrow: 1,
justifyContent: 'flex-end',
},
iconBA: {
height: 32,
width: 32,
},
iconDa: {
height: 32,
width: 32,
},
icon3R: {
height: 32,
width: 32,
},
viewHr: {
alignItems: 'flex-start',
marginRight: 24,
width: '80%',
},
viewLy: {
alignItems: 'flex-start',
marginRight: 24,
width: '80%',
},
viewFg: {
alignItems: 'flex-start',
width: '80%',
marginRight: 24,
},
viewV3: {
marginTop: 24,
},
radioButtonNS: {
height: 24,
width: 24,
},
radioButtonFc: {
height: 24,
width: 24,
},
radioButtonFm: {
width: 24,
height: 24,
},
});
export default withTheme(REPLACE_SCREEN_NAME);
