title: How to align view in react native in loop?
body: <p>Here is my React Native component code. </p>
  
  <pre><code>import React, { Component } from 'react';
  import {View, Text,StyleSheet} from 'react-native';
  
  export default class AnatomyExample extends Component {
    render() {
      let data = [1,2,3,4,5,6,7,8];
      return (
        &lt;View style={styles.main}&gt;
          {data.map(this.renderView)}
        &lt;/View&gt;
  
  
      );
    }
  
    renderView(d){
      return (
       &lt;View style={styles.child}&gt;
        &lt;Text&gt;{d}&lt;/Text&gt;
         &lt;/View&gt;
        )
    }
  }
  
  
  
  const styles = StyleSheet.create({
    main: {
      borderRadius: 4,
      borderWidth: 1,
      borderColor: '#d6d7da',
    },
    child: {
      borderWidth:1,
      borderColor:'blue',
      width:150,
      height:150,
  
    }
  });
  </code></pre>
  
  <p>I want to make component output look like this image. 
  <a href="https://i.stack.imgur.com/QZu8K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QZu8K.png" alt="enter image description here"></a></p>
  
  <p>How to float View side by side. <code>float:left;</code> would work in html css but not sure how to make it in react native.</p>