html - ReactNative: Text overflow over image -

i m trying result :

so far achieved 1 :

as can see , circle text not correctly displayed.

here code :

<view style={{overflow:'visible'}}>     <image style={{flex:1, width:20, height:20, marginright:20}} source={require('./assets/icon-caddy.png')}>       <view style={{ flex:1, flexdirection:'row', backgroundcolor:'#88b148', width: 15, height:15 , position:'absolute', left: 5, top:-5, backgroundcolor:'#88b148', borderradius:50, alignitems:'center', justifycontent:'center'}}>         <text style={{color:'#fff', fontsize:10 }}>0</text>       </view>     </image>   </view> 

the overflow attribute doesn not seem lot , if remove result remains same.

thanks help.

so here solution code : https://rnplay.org/apps/rpv82a

<view style={{flex:1, height:40, width:40, justifycontent:'center', alignitems:'center'}}>           <image style={{width:40}} source={require('./assets/icon-caddy.png')}/>               <view style={{backgroundcolor:'#88b148', borderradius:50,position:'absolute',flex:1, justifycontent:'center',alignitems:'center', top: 0, left: 50}}>                 <text style={{ color:'#fff', fontsize:8, margin:3 }}>20</text>               </view>       </view>