// CreativeList component

export default class CreativeList extends Component {
    render(){
        return (
            <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
                <FlatList
                    horizontal
                    keyExtractor={item => item.ID}
                    data={this.props.list}
                    renderItem={({item}) => <CreativeListItem data={item} />}
                />
            </ScrollView>
        );
    }
}

-----------------------------------------------------------------------------------------------------------------

// CreativeListItem Component

export default class CreativeListItem extends Component {
    render(){
        let item = this.props.data;
        if(!item.SubTitle){
            item.SubTitle = 0.4;
        }
        return (
            <Card style={nativeBaseStyle.card}>
                <TouchableOpacity style={styles.cardContainer} onPress={this.openInBrowser}>
                    <View style={styles.cardImageContainer} onPress={() => console.log('icon pressed')} >
                        <Image style={styles.cardImage} source={{uri: item.Icon}} />
                    </View>
                    <View style={styles.cardDescription}>
                        <Text style={[styles.textCardDescription, styles.appName]}>{item.Name}</Text>
                        <Text style={[styles.textCardDescription, styles.appPrice]}>{ item.SubTitle / MEAL_PRICE } <Icon name='md-restaurant' android='md-restaurant' ios='ios-restaurant' style={nativeBaseStyle.mealIcon} /> ({item.SubTitle}$)</Text>
                    </View>
                </TouchableOpacity>
            </Card>
        );
    }
}