dabit3/Render boxes of equal size with padding

## Render boxes of equal size with padding
'use strict';
var React = require('react-native');
var {
  StyleSheet,
  Text,
  View,
  Dimensions,
  ScrollView
} = React;

var deviceWidth = Dimensions.get('window').width;

let data = ['one', 'two', 'three', 'four', 'five']

var Default = React.createClass({

      render(){

        let cards = data.map((d, i) => {
         return <View style={[ { width: deviceWidth / 2, height: 100 } ]}>
                   <View style={[ { flex:1, marginLeft:10, marginRight: 10, marginTop:10 }, (i % 2) && { marginLeft:0 } ]}>
                     <View style={[ { backgroundColor: 'white', flex:1, borderRadius: 3, padding:10  }, styles.shadow ]}>
                      <Text>{ d }</Text>
                     </View>
                   </View>
                 </View>
              })

        console.log(cards)

        return (
                  <ScrollView style={{ backgroundColor: 'white', flex:1 }}>
                    <View style={{ flexDirection:'row', flex:1, flexWrap: 'wrap', backgroundColor: 'transparent' }}>
                      { cards }
                    </View>
                   </ScrollView>
                )
            }

});

let styles = StyleSheet.create({
  shadow: {
    shadowColor: "#000000",
    shadowOpacity: 0.4,
    shadowRadius: 2,
    shadowOffset: {
      height: 1,
      width: 0
    }
  }
})

module.exports = Default;