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

export default class NewQuote extends Component {
    render() {
        return (
            //Neuer Screen
            <Modal
                visible={this.props.visible}
                onRequestClose={this.props.onSave}//Wird nur für Android benötigt
                animationType='slide'>
                <View style={styles.container}>
                    <TextInput style={styles.textInput} placeholder='Zitat' />
                    <TextInput style={styles.textInput} placeholder='Autor/in' />
                    <View style={styles.saveButton}>
                        <Button
                            title="Save"
                            onPress={this.props.onSave} />
                    </View>
                </View>
            </Modal>

        );
    }

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#eee',
        alignItems: 'center', //FlexBox Layout
        justifyContent: 'center',
    },
    saveButton: {
        position: 'absolute',
        bottom: 5,

    },
    textInput: {
        borderWidth: 1,
        borderColor: 'deepskyblue',
        borderRadius: 4,
        width: '80%', //Breite
        marginBottom: 20, // Abstand
        fontSize: 20, // Schriftgröße
        padding: 10,
        height: 50,
    }
});