import React from 'react';
import {
    View,
    StyleSheet,
    Text,
    TextInput,
    Button
} from 'react-native';


export default class SmsConfirmation extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.titleText}>SMS CONFIRMATION</Text>
                </View>
                <View style={styles.body}>
                    <View style={{ flex: 0.3, flexDirection: 'row', backgroundColor: 'white', justifyContent : 'center', alignItems: 'center', alignSelf: 'stretch' }}>
                        <View style={{ backgroundColor: 'white', marginRight : 20 }}>
                            <Text>TOKEN</Text>
                        </View>
                        <View style={{ backgroundColor: 'white' }}>
                            <TextInput style={{ borderWidth: 1, width : 250 }} />
                        </View>
                    </View>
                    <View style={{flex : 1, backgroundColor : 'white', width : 200}}>
                        <Button title='verify'/>                     
                    </View>
                </View>

            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    header: {
        flex: 0.4,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor : 'white'
    },
    titleText: {
        fontSize: 26,
        fontWeight: 'bold'
    },
    body : {
        flex: 0.8,
        backgroundColor: 'white',
        alignItems: 'center',
    }

})