title: In react native how to arrange image button
body: <p>I'm new to react native.  </p>
  
  <p>I need to arrange 8 image button in 4 rows and 2 columns.I tried with flexDirection, but it's not work(confuse).<br>
  Actually i need to arrange my 8 image like below image in react native.(I need only 4 -rows,2 columns)  </p>
  
  <p><strong>Please help me..</strong></p>
  
  <p><a href="https://i.stack.imgur.com/R1vdo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R1vdo.jpg" alt="enter image description here"></a>
  my code</p>
  
  <p>`
  container:{
              backgroundColor: '#ccffcc',</p>
  
  <pre><code>        flex:1,
          flexDirection: ('row'),
          //paddingTop: 40,
          //alignItems :'center',
          padding:10
  
        },
        button1:{
           flex:1,
          // width : 100,
          // height: 100,
          flexDirection:'row',
          backgroundColor : '#ff9933',
          //alignSelf:'flex-start',
          marginTop: 70,
          margin: 20,
          //justifyContent:'center'
        },
        button2:{
  
          //flex:1,
          //flexDirection:'column',
          alignSelf:'center',
          //height :50,
          //backgroundColor : '#ff9933',
          //alignSelf:'flex-start',
          margin: 20,
          marginTop:-30,
          //justifyContent:'center'
        },
        button3:{
          //flex:1,
          flexDirection: 'column',
          // width : 100,
          // height: 100,
          backgroundColor : '#ff9933',
          alignSelf:'flex-start',
        //  marginTop:100,
          margin: 20,
  
          justifyContent:'center'
        },
        button4:{
          //flex:1,
        //  flexDirection: 'row',
          //height :50,
          //backgroundColor : '#ff9933',
          alignSelf:'flex-start',
          margin: 20,
        //  marginTop:30,
          justifyContent:'center'
        },
        button5:{
          flex:1,
          flexDirection:'column',
      // width : 100,
          // height: 100,
          backgroundColor : '#ff9933',
          alignSelf:'flex-end',
          //marginTop:50,
          margin: 20,
  
          justifyContent:'center'
        },
        button6:{
          flexDirection:'column',
          flex:1,
          //height :50,
          //backgroundColor : '#ff9933',
          alignSelf:'flex-end',
          margin: 20,
        //  marginTop:30,
          justifyContent:'center'
        },
        button7:{
          flexDirection:'column',
          flex:1,
         // width : 100,
          // height: 100,
          backgroundColor : '#ff9933',
          alignSelf:'flex-end',
        //  marginTop:100,
          margin: 20,
  
          justifyContent:'center'
        },
        button8:{
          flexDirection:'column',
          flex:1,    //height :50,
          //backgroundColor : '#ff9933',
          alignSelf:'flex-end',
          margin: 20,
        //  marginTop:30,
          justifyContent:'center'
        },`
  </code></pre>