-- CODE language-jsx --
import React from 'react';
import {
Button,
Container,
ScreenContainer,
TextField,
Touchable,
withTheme,
} from '@draftbit/ui';
import {
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 scrollable={true} hasSafeArea={true}>
<KeyboardAvoidingView
style={styles.keyboardAvoidingViewUr}
enabled={true}
behavior=""padding""
keyboardVerticalOffset={60}
>
<Container
style={styles.containerAj}
elevation={0}
useThemeGutterPadding={true}
>
<Text
style={StyleSheet.flatten([
styles.textWt,
theme.typography.headline4,
{ color: theme.colors.strong },
])}
>
Confirm Account
</Text>
<Text
style={StyleSheet.flatten([
styles.textUu,
theme.typography.body1,
{ color: theme.colors.strong },
])}
>
We've sent a confirmation to your email. Tap the link or copy the
code here to get started.
</Text>
<TextField
style={styles.textField1Q}
type=""underline""
label=""Confirmation Code""
keyboardType=""numeric""
leftIconMode=""inset""
value={textFieldValue}
onChangeText={textFieldValue => setTextFieldValue(textFieldValue)}
/>
</Container>
<Container elevation={0} useThemeGutterPadding={true}>
<Touchable style={styles.touchableRm}>
<Text
style={StyleSheet.flatten([
styles.text6M,
theme.typography.button,
{ color: theme.colors.primary },
])}
>
Open Email
</Text>
</Touchable>
<Button style={styles.buttonH5} type=""solid"">
Confirm Account
</Button>
<Text
style={StyleSheet.flatten([
styles.text44,
theme.typography.caption,
{ color: theme.colors.light },
])}
>
By signing in you agree to our Terms of Service, Privacy Policy and
Cookie Policy.
</Text>
</Container>
</KeyboardAvoidingView>
</ScreenContainer>
);
};
const styles = StyleSheet.create({
containerAj: {
marginTop: 32,
},
keyboardAvoidingViewUr: {
flexGrow: 1,
justifyContent: 'space-between',
},
textWt: {
textAlign: 'center',
},
text6M: {
textAlign: 'center',
},
touchableRm: {
marginBottom: 24,
},
buttonH5: {
height: 48,
},
textUu: {
marginTop: 20,
textAlign: 'center',
},
text44: {
width: '100%',
marginTop: 16,
textAlign: 'center',
},
textField1Q: {
height: 82,
marginTop: 20,
},
});
export default withTheme(REPLACE_SCREEN_NAME);