new component "NewQuotes"

App.js

@@ -2,7 +2,9 @@ import React, { Component } from 'react'; // Bei React bzw. Nativ immer importie
 import { StatusBar } from 'expo-status-bar';
 import { Button, StyleSheet, View } from 'react-native';
 
-import Quote from './js/components/Quote';
+import Quote from './js/components/Quote'; // Eigene Componente
+import NewQuote from './js/components/NewQuote';// Eigene Componente
+
 
 const data = [
   { text: "Lernen ist Erfahrung. Alles andere ist einfach nur Information.", author: "Albert Einstein" },
@@ -12,7 +14,13 @@ const data = [
   { text: "Zitat5", author: "Author 5" },
 ];
 export default class App extends Component {
-  state = { index: 0 }; //initialer Zustand
+  state = { index: 0, showNewQuoteScreen: false }; //initialer Zustand
+
+  // Eigene Methoden mit unterstrich am Anfang
+  _addQuote = () => {
+    // NewQuote Ausblenden
+    this.setState({ showNewQuoteScreen: false });
+  }
 
   // Darstellung der Komponente im UI
   // Render wird automatisch ausgeführt:
@@ -29,13 +37,28 @@ export default class App extends Component {
     return (
       //JSX
       <View style={styles.container}>
-        <Button title="New" onPress={() => alert('Add new')}></Button>
-        <Quote text={quote.text} author={quote.author} />
-        <View style={styles.buttonOne}>
-          <Button color='grey' title="Nächstes Zitat" onPress={() => this.setState({ index: nextIndex })} />
+        <View style={styles.buttonNew}>
+          <Button
+            title="New"
+            onPress={() => this.setState({ showNewQuoteScreen: true })}>
+          </Button>
         </View>
-        <View style={styles.buttonTwo}>
-          <Button title="Letztes Zitat" onPress={() => this.setState({ index: prevIndex })} />
+        <NewQuote
+          visible={this.state.showNewQuoteScreen}
+          onSave={this._addQuote} />
+        <Quote
+          text={quote.text}
+          author={quote.author} />
+        <View style={styles.buttonNext}>
+          <Button
+            color='grey'
+            title="Nächstes Zitat"
+            onPress={() => this.setState({ index: nextIndex })} />
+        </View>
+        <View style={styles.buttonPrev}>
+          <Button
+            title="Letztes Zitat"
+            onPress={() => this.setState({ index: prevIndex })} />
         </View>
         <StatusBar style="auto" />
       </View>
@@ -48,16 +71,20 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#F2F0FF',
-    alignItems: 'center',
+    alignItems: 'center', //FlexBox Layout
     justifyContent: 'center',
-    elevation: 100,
   },
-  buttonOne: {
+  buttonNext: {
     position: 'absolute',
     bottom: 50,
   },
-  buttonTwo: {
+  buttonPrev: {
     position: 'absolute',
     bottom: 5,
   },
+  buttonNew: {
+    position: 'absolute',
+    right: 0,
+    top: 25,
+  }
 });

js/components/NewQuote.js

@@ -0,0 +1,49 @@
+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,
+    }
+});