import React, { Component } from 'react';

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

class UserMessages  extends Component{
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.to}>Jim Smith</Text>
        <Text style={styles.from}>from: Tom Smith</Text>
        <Text style={styles.from}>date: 08/04/2016</Text>
        <Text style={styles.title}>Europe</Text>
        <Text style={styles.from}>from: Tom Smith</Text>
        <Text style={styles.from}>date: 08/03/2016</Text>
        <Text style={styles.title}>Another chance</Text>
        <Text style={styles.from}>from: Tom Smith</Text>
        <Text style={styles.from}>date: 08/02/2016</Text>
        <Text style={styles.title}>We leave</Text>
        <Text style={styles.from}>from: Tom Smith</Text>
        <Text style={styles.from}>date: 08/01/2016</Text>
        <Text style={styles.title}>No more food</Text>
      </View>
    )
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#27c2dc'
  },
  title: {
   fontSize: 40,
   alignSelf: 'center',
   backgroundColor: '#27c2dc',
   marginBottom: 20,
  },
  from: {
    alignSelf: 'flex-start',
    fontSize: 21,
    fontStyle: 'italic',
  },
  to: {
    alignSelf: 'flex-end',
    fontSize: 21,
    fontWeight: 'bold',
    marginTop: 10,
    marginBottom: 60,
  },

  content: {
    alignSelf: 'center',
    fontSize: 21,
    marginTop: 10,
    marginBottom: 5,
  }
});

module.exports = UserMessages;

@@ -75,16 +75,30 @@
   View,%0A
+  ScrollView,%0A
 %7D from '
@@ -178,16 +178,67 @@
 eturn (%0A
+      %3CScrollView style=%7Bstyles.superContainer%7D%3E%0A  
       %3CV
@@ -259,32 +259,34 @@
 les.container%7D%3E%0A
+  
         %3CText st
@@ -318,32 +318,34 @@
 %3C/Text%3E%0A        
+ 
+ 
 %3CText style=%7Bsty
@@ -369,32 +369,34 @@
 om Smith%3C/Text%3E%0A
+  
         %3CText st
@@ -429,32 +429,34 @@
 /04/2016%3C/Text%3E%0A
+  
         %3CText st
@@ -488,32 +488,34 @@
 %3C/Text%3E%0A        
+  
 %3CText style=%7Bsty
@@ -539,32 +539,34 @@
 om Smith%3C/Text%3E%0A
+  
         %3CText st
@@ -607,32 +607,34 @@
 %3C/Text%3E%0A        
+ 
+ 
 %3CText style=%7Bsty
@@ -658,32 +658,34 @@
 r chance%3C/Text%3E%0A
+  
         %3CText st
@@ -725,32 +725,34 @@
 %3C/Text%3E%0A        
+  
 %3CText style=%7Bsty
@@ -785,32 +785,34 @@
 %3C/Text%3E%0A        
+ 
+ 
 %3CText style=%7Bsty
@@ -830,32 +830,34 @@
 We leave%3C/Text%3E%0A
+  
         %3CText st
@@ -889,32 +889,34 @@
 om Smith%3C/Text%3E%0A
+  
         %3CText st
@@ -957,32 +957,34 @@
 %3C/Text%3E%0A        
+  
 %3CText style=%7Bsty
@@ -1024,16 +1024,18 @@
     
+  
 %3C/View%3E%0A
     
@@ -1030,16 +1030,36 @@
 %3C/View%3E%0A
+      %3C/ScrollView%3E%0A
     )%0A  
@@ -1097,16 +1097,86 @@
 reate(%7B%0A
+  superContainer: %7B%0A    flex: 1,%0A    backgroundColor: '#27c2dc',%0A  %7D,%0A
   contai
@@ -1281,16 +1281,17 @@
 #27c2dc'
+,
 %0A  %7D,%0A  

Add scroll functionality to userMessages