CODEWITHSUNDEEP
javascriptandroidreactjsreact-native
user6940345
user6940345

Reputation:

How to apply background color to View without giving any padding?

I have already tried backgroundColor but for no success.

I have the following code and want to apply background color to the main parent View but dont want to specify any padding, how to acheive this?

<View style={{flex:1,alignItems:'center'}}>  
    <Text>
      No new Transactions
    </Text>
    <View style={{backgroundColor:'#fc004f',paddingTop:44,paddingBottom:40,top:56,borderRadius:8,width:window.width-20,borderWidth:2,borderColor:'#dddddd'}}>
        <Text style={{position:'absolute',fontSize:16,top:14,paddingLeft:16,color:'white',fontWeight:'bold'}}>Big Bazaar</Text>
        <Text style={{position:'absolute',fontSize:14,top:48,paddingLeft:16,color:'white',fontWeight:'bold'}}>View Receipt</Text>
    </View>
     <View style={{flex:1,backgroundColor:'#401f80',padding:44,top:56,borderRadius:8,width:window.width-20,borderWidth:2,borderColor:'#dddddd',marginTop:10}}>
       <Text style={{position:'absolute',fontSize:16,top:14,paddingLeft:16,color:'white',fontWeight:'bold'}}>Zomato Inc</Text>
      <Text style={{position:'absolute',fontSize:14,top:48,paddingLeft:16,color:'white',fontWeight:'bold'}}>View Receipt</Text>
    </View>
     <View style={{flex:1,backgroundColor:'#fc004f',padding:44,top:56,borderRadius:8,width:window.width-20,borderWidth:2,borderColor:'#dddddd',marginTop:10}}>
        <Text style={{position:'absolute',fontSize:16,top:14,paddingLeft:16,color:'white',fontWeight:'bold'}}>OLA Inc</Text>
        <Text style={{position:'absolute',fontSize:14,top:48,paddingLeft:16,color:'white',fontWeight:'bold'}}>View Receipt</Text>
    </View>
  </View>

Upvotes: 0

Views: 993

Answers (1)

A-J-A
A-J-A

Reputation: 2474

Remove flex:1 from the children views, and add backgroundColor to the parent view. Hope this helps!

Upvotes: 1

Related Questions