text: import React from 'react';
  import { StyleSheet, Dimensions, ScrollView } from 'react-native';
  import { Block, theme } from 'galio-framework';
  
  import { Card } from '../../components/examples';
  import articles from '../../constants/examples/articles';
  
  const { width } = Dimensions.get('screen');
  
  const styles = StyleSheet.create({
    home: {
      width,
    },
    articles: {
      width: width - theme.SIZES.BASE * 2,
      paddingVertical: theme.SIZES.BASE,
    },
  });
  
  class Home extends React.Component {
    renderArticles() {
      return (
        <ScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={styles.articles}>
          <Block flex>
            <Card item={articles[0]} horizontal />
            <Block flex row>
              <Card item={articles[1]} style={{ marginRight: theme.SIZES.BASE }} />
              <Card item={articles[2]} />
            </Block>
            <Card item={articles[3]} horizontal />
            <Card item={articles[4]} full />
          </Block>
        </ScrollView>
      );
    }
  
    render() {
      return (
        <Block flex center style={styles.home}>
          {this.renderArticles()}
        </Block>
      );
    }
  }
  
  export default Home;
  