update

App.js

@@ -5,7 +5,7 @@ import { Button, StyleSheet, View } from 'react-native';
 import Quote from './js/components/Quote';
 
 const data = [
-  { text: "Zitat1", author: "Author 1" },
+  { text: "Lernen ist Erfahrung. Alles andere ist einfach nur Information.", author: "Albert Einstein" },
   { text: "Zitat2", author: "Author 2" },
   { text: "Zitat3", author: "Author 3" },
   { text: "Zitat4", author: "Author 4" },
@@ -29,9 +29,12 @@ 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} />
-        <Button title="Nächstes Zitat" onPress={() => this.setState({ index: nextIndex })} />
-        <Button title="Letztes Zitat" onPress={() => this.setState({ index: prevIndex })} />
+        <View style={styles.button}>
+          <Button title="Nächstes Zitat" onPress={() => this.setState({ index: nextIndex })} />
+          <Button title="Letztes Zitat" onPress={() => this.setState({ index: prevIndex })} />
+        </View>
         <StatusBar style="auto" />
       </View>
     );
@@ -42,8 +45,14 @@ export default class App extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: '#F2F0FF',
     alignItems: 'center',
     justifyContent: 'center',
+    elevation: 100,
+
+  },
+  button: {
+    position: 'absolute',
+    bottom: 5,
   },
 });

js/components/Quote.js

@@ -1,5 +1,5 @@
-import React, { Component, Fragment } from 'react';
-import { Text, StyleSheet } from 'react-native'
+import React, { Component } from 'react';
+import { Text, StyleSheet, View } from 'react-native'
 
 export default class Quote extends Component {
     render() {
@@ -15,12 +15,17 @@ export default class Quote extends Component {
 
 
             // Methode 2
-            <Fragment>
+            /*<Fragment>
                 <Text style={styles.text}>{text}</Text>
                 <Text style={styles.author}>&mdash; {author}</Text>
             </Fragment>);
+            */
 
-
+            // View -> Style
+            <View style={styles.container}>
+                <Text style={styles.text}>{text}</Text>
+                <Text style={styles.author}>&mdash; {author}</Text>
+            </View>);
     }
 }
 
@@ -37,19 +42,37 @@ const styleAuthor = { fontSize: 15, fontsStyle: 'italic', color: 'red' };
 
 // StyleSheet.create({...styles...})
 const styles = StyleSheet.create({
+    container: {
+        //paddingLeft: 20,
+        //paddingRight:20.
+        paddingHorizontal: 20, // -> padding (left and right)
+        borderColor: 'red',
+        margin: 25,
+        borderRadius: 20,
+        backgroundColor: 'white',
+
+        //Shadow for Android
+        elevation: 5,
+
+        //Shadow for IOS and Web
+        shadowOpacity: 0.25,
+        shadowOffset: {
+            width: 0,
+            height: 0.75,
+        },
+        shadowRadius: 1.5,
+    },
     text: {
         fontSize: 25,
         fontWeight: 'bold',
         color: 'black',
         textAlign: 'center',
-        // View Styles
-        borderWidth: 2,
-        borderColor: 'red'
-
+        // View Style
     },
     author: {
         fontSize: 15,
         fontStyle: 'italic',
+        textAlign: 'right',
         color: 'green'
     }
 });