import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { List, ListItem, Button, Text } from 'react-native-elements';
import Svg, { LinearGradient, Rect, Defs, Stop } from 'react-native-svg';

const FONT_SIZE_DEFAULT = 30;
const FONT_SIZE_SMALL = 20;

const styles = StyleSheet.create({
  header: {
    width: '100%',
    marginTop: '5%',
    textAlign: 'center',
    fontSize: FONT_SIZE_DEFAULT
  },
  container: {
    flexDirection: 'column',
    flex: 1,
    width: '100%',
    height: '100%',
    justifyContent: 'space-between',
    padding: 0
  },
  svg: { 
    position: 'absolute', 
    zIndex: 0, 
    left: 0, 
    top: 0, 
    width: '100%', 
    height: '100%' 
  }
});

export default class FavouritesView extends React.Component {

  renderRow (data, idx) {
    return (
      <ListItem
        roundAvatar
        key={idx}
        title={data.label}
        subtitle={data.formattedPrice}
        avatar={{uri:data.largeImageURL}}
        onPress={() => {
          this.props.onSelect(data, idx);
        }}
      />
    )
  }

  render() {
    
    return (
      <View>
        <Svg style={styles.svg}>
          <Defs> 
            <LinearGradient id="lgrad" x1="0%" y1="100%" x2="100%" y2="0%" > 
              <Stop offset="0" stopColor="rgb(255, 255, 255)" stopOpacity="1" />
              <Stop offset="1" stopColor="rgb(156, 199, 255)" stopOpacity="1" />
            </LinearGradient> 
          </Defs>
          <Rect x="0" y="0" width="100%" height="100%" fill="url(#lgrad)"/>
        </Svg>      
        <View style={styles.container}>
          <List containerStyle={{marginTop: 0 }}>
            {this.props.favourites.map((data, idx) => this.renderRow(data, idx))}
          </List>
        </View>
      </View>
    );
  }

}

@@ -60,16 +60,28 @@
 et, View
+, ScrollView
  %7D from 
@@ -123,22 +123,8 @@
 Item
-, Button, Text
  %7D f
@@ -458,136 +458,100 @@
     
-flexDirection: 'column',%0A    flex: 1,%0A    width: '100%25',%0A    height: '100%25',%0A    justifyContent: 'space-between',%0A    padding: 0
+width: '100%25',%0A    height: '100%25',%0A    padding: 0%0A  %7D,%0A  list: %7B%0A    backgroundColor: '#fff'
 %0A  %7D
@@ -1081,24 +1081,49 @@
 %0A      %3CView
+ style=%7Bstyles.container%7D
 %3E%0A        %3CS
@@ -1562,91 +1562,56 @@
    %3C
-View style=%7Bstyles.container%7D%3E%0A          %3CList containerStyle=%7B%7BmarginTop: 0 %7D
+ScrollView contentContainerStyle=%7Bstyles.list
 %7D%3E%0A
-  
     
@@ -1698,28 +1698,16 @@
     
-  %3C/List%3E%0A        %3C/
+%3C/Scroll
 View

make list scrollable