update

App.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'; // Bei React bzw. Nativ immer importieren!
 import { StatusBar } from 'expo-status-bar';
-import { Button, StyleSheet, Text, View } from 'react-native';
+import { Button, StyleSheet, View } from 'react-native';
 
 import Quote from './js/components/Quote';
 
@@ -15,19 +15,23 @@ export default class App extends Component {
   state = { index: 0 }; //initialer Zustand
 
   // Darstellung der Komponente im UI
-  // Render wird automatisch ausgeführt
+  // Render wird automatisch ausgeführt:
   // a) Komponente erscheint im Ui (initialer Zustand)
   // b) Zustand ändert sich (state) => this.setstate(...)
+  // c) probs sich ändern
   render() {
     let index = this.state.index;
     const quote = data[index];
     let nextIndex = index + 1;
     if (nextIndex === data.length) nextIndex = 0;
+    let prevIndex = index - 1;
+    if (index === 0) prevIndex = data.length - 1;
     return (
       //JSX
       <View style={styles.container}>
         <Quote text={quote.text} author={quote.author} />
         <Button title="Nächstes Zitat" onPress={() => this.setState({ index: nextIndex })} />
+        <Button title="Letztes Zitat" onPress={() => this.setState({ index: prevIndex })} />
         <StatusBar style="auto" />
       </View>
     );

js/components/Quote.js

@@ -3,10 +3,15 @@ import { Text } from 'react-native'
 
 export default class Quote extends Component {
     render() {
+        const { text, author } = this.props // destructuring
         return (
             <Fragment>
-                <Text>{this.props.text}</Text>
-                <Text>{this.props.author}</Text>
+                <Text style={styleText}>{text}</Text>
+                <Text style={styleAuthor}>&mdash; {author}</Text>
             </Fragment>);
     }
 }
+
+// Styling in React Native mit JavaScript
+const styleText = { fontSize: 25, fontWeight: 'bold', color: 'black' };
+const styleAuthor = { fontSize: 17, fontsStyle: 'italic', color: 'red' };