title: How can I make my card view littile circular in react native
body: <pre><code>//
  </code></pre>
  
  <p>In below code I am trying to make on ui according to my ux design . But One problem i am facing is not able to make card like same in ux , in ux its someting circular ,but in my code its not coming. It tried with border radius also . Please suggest where I am wrong <a href="https://i.stack.imgur.com/ZJUMT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZJUMT.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/YAqoX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YAqoX.png" alt="this is the design"></a></p>
  
  <pre><code> &lt;View style={{ marginBottom: 10, marginLeft: 5, marginRight: 5, borderRadius: 2, padding: 10 }} &gt;
                        &lt;Card &gt;
                          &lt;CardItem header style={{ flexDirection: 'row', backgroundColor: '#fff', width: '100%', justifyContent: 'space-between', borderBottomColor: '#f1f1f1', borderBottomWidth: 1,borderRadius: 80 }}&gt;
                            &lt;View style={{paddingTop:10 }}&gt;
                                &lt;RegularText text={`${'Wallet Balance'}`} textColor='grey'style={{ fontWeight: 'bold', flexWrap: 'wrap',color:'grey' }} /&gt;
                            &lt;/View&gt;
  
                              &lt;View style = {{ width : wp('10%'),height: wp('10%'),backgroundColor : '#E091C9' ,borderRadius : hp('1%'), margin : 8,flexDirection :'row',justifyContent :'center',alignItems : 'center'}}&gt;
                             &lt;SvgCss xml={WALLET} width={15} height={15} /&gt;
                               &lt;/View&gt;
  
                              &lt;View style={{
                              flexDirection: 'column',
                              height: 25, paddingRight: 10, paddingLeft: 10, paddingTop: 5,paddingBottom:30}}&gt;
                              &lt;SmallText text={'MUR 110.00'} textColor='red' /&gt;
                              &lt;SmallText text={'Add Money'} textColor='blue' /&gt;
                              &lt;/View&gt;
  
                          &lt;/CardItem&gt;
                          &lt;View style = {{flexDirection : 'row',paddingLeft:24,paddingRight:24}}&gt;
                          {info.tecnologies.map(
                            (data, index) =&gt; {
                                return (
                                  &lt;View&gt;
                                    &lt;View style = {{width : wp('14%'),height: wp('14%'),backgroundColor : 'rgb(163, 153, 233)',borderRadius : hp('2%'), margin : 10,flexDirection :'row',justifyContent :'center',alignItems : 'center'}}&gt;
                                  &lt;SvgCss xml={PAY_BILL} width={15} height={15} /&gt;
                                    &lt;/View&gt;
                                    &lt;View style={{paddingLeft:15,paddingBottom:15}}&gt;
                                    &lt;SmallText text={'Pay Bill'} textColor='grey' /&gt;
  
                                    &lt;/View&gt;
                                  &lt;/View&gt;
                                )
                            }
                        )}
                        &lt;/View&gt;
                        &lt;/Card&gt;
                      &lt;/View&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ljMt3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ljMt3.png" alt="left side is ux and right side is what i am doing .."></a></p>