text: import React from 'react';
  import {
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    View,
    ActivityIndicator,
    Dimensions
  } from 'react-native';
  import { Button, Block, Text, Input, theme } from 'galio-framework';
  import { materialTheme, products, Images } from '../constants/';
  import { Select, Icon, Header, Product, Switch } from '../components/';
  const { width } = Dimensions.get('screen');
  const thumbMeasure = (width - 48 - 32) / 3;
  
  
  export default class Products extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {
        loading: true,
        dataSource:[],
       };
     }
  
    componentDidMount(){
      fetch("http://18.225.36.133:8000/api/v1/productos")
      .then((response) => response.json())
      .then((responseJson)=> {
        console.log(responseJson.results);
        this.setState({
         loading: false,
         dataSource: responseJson.results
        });
      })
      .catch(error=>console.log(error));
    }
   
    renderInputs = () => {
      return (
  
        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
          <Input
            right
            placeholder="Descubre..."
            placeholderTextColor={materialTheme.COLORS.DEFAULT}
            style={{ borderRadius: 3, borderColor: materialTheme.COLORS.INPUT }}
            iconContent={<Icon size={16} color={theme.COLORS.ICON} name="shopping-bag" family="feather" />}
          />
        </Block>
  
      )
    }
  
  
    renderCards = () => {
  
      const { navigation } = this.props;
      var prod = [];
      for(let i = 0; i <= this.state.dataSource.length; i=i+2){
        
         
          
        
        prod.push(
         <Block flex row>
              <Product product={products[4]} style={{ marginRight: theme.SIZES.BASE }} />
              <Product product={products[4]} />
         </Block>
        )
      }
  
      return (
        <Block flex>
          <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            {prod}
            <Product product={products[4]} full />
          </Block>
        </Block>
  
      )
    }
  
    render() {
  
      if(this.state.loading){
        return( 
          <View style={styles.loader}> 
            <ActivityIndicator size="large" color="#0c9"/>
          </View>
        );
      }
  
      return (
        <Block flex center>
          <ScrollView
            style={styles.components}
            showsVerticalScrollIndicator={false}>
            {this.renderInputs()}
            {this.renderCards()}
          </ScrollView>
        </Block>
      );
    }
  }
  
  const styles = StyleSheet.create({
    components: {
    },
    title: {
      paddingVertical: theme.SIZES.BASE,
      paddingHorizontal: theme.SIZES.BASE * 2,
    },
    group: {
      paddingTop: theme.SIZES.BASE * 3.75,
    },
    shadow: {
      shadowColor: 'black',
      shadowOffset: { width: 0, height: 2 },
      shadowRadius: 4,
      shadowOpacity: 0.2,
      elevation: 2,
    },
    button: {
      marginBottom: theme.SIZES.BASE,
      width: width - (theme.SIZES.BASE * 2),
    },
    optionsText: {
      fontSize: theme.SIZES.BASE * 0.75,
      color: '#4A4A4A',
      fontWeight: "normal",
      fontStyle: "normal",
      letterSpacing: -0.29,
    },
    optionsButton: {
      width: 'auto',
      height: 34,
      paddingHorizontal: theme.SIZES.BASE,
      paddingVertical: 10,
    },
    input: {
      borderBottomWidth: 1,
    },
    inputDefault: {
      borderBottomColor: materialTheme.COLORS.PLACEHOLDER,
    },
    inputTheme: {
      borderBottomColor: materialTheme.COLORS.PRIMARY,
    },
    inputTheme: {
      borderBottomColor: materialTheme.COLORS.PRIMARY,
    },
    inputInfo: {
      borderBottomColor: materialTheme.COLORS.INFO,
    },
    inputSuccess: {
      borderBottomColor: materialTheme.COLORS.SUCCESS,
    },
    inputWarning: {
      borderBottomColor: materialTheme.COLORS.WARNING,
    },
    inputDanger: {
      borderBottomColor: materialTheme.COLORS.ERROR,
    },
    imageBlock: {
      overflow: 'hidden',
      borderRadius: 4,
    },
  
    social: {
      width: theme.SIZES.BASE * 3.5,
      height: theme.SIZES.BASE * 3.5,
      borderRadius: theme.SIZES.BASE * 1.75,
      justifyContent: 'center',
    },
    category: {
      backgroundColor: theme.COLORS.WHITE,
      marginVertical: theme.SIZES.BASE / 2,
      borderWidth: 0,
    },
  
    albumThumb: {
      borderRadius: 4,
      marginVertical: 4,
      alignSelf: 'center',
      width: thumbMeasure,
      height: thumbMeasure
    },
  });
  