React Native - why padding does not work?

Question

Why padding never works in React Native? I have 10px padding in the image and the text box below:

const styles = StyleSheet.create({     container: {         marginTop: 75,         alignItems: 'center'     },     image: {         width: 107,         height: 165,         padding: 10,         backgroundColor:'blue'     },     description: {         padding: 20,         margin: 10,         fontSize: 15,         color: '#656565',         backgroundColor:'red'     } }); 

Result:

Any ideas why? Did I miss something?

Answer 1

Use this for padding:

function padding(a, b, c, d) {   return {     paddingTop: a,     paddingRight: b ? b : a,     paddingBottom: c ? c : a,     paddingLeft: d ? d : (b ? b : a)   } } 

In practice

<Text style={{...padding(10, 20, 10, 5), color: "black"}}>Some text</Text> 

Answer 2

Android with React Native tends to not like padding, unless it has a border. A temporary fix would be to change all of your "paddingXXX" to "marginXXX" to get the approximate styling you want.

const styles = StyleSheet.create({ container: {     marginTop: 75,     alignItems: 'center' }, image: {     width: 107,     height: 165,     margin: 10,     backgroundColor:'blue' }, description: {     margin: 30,     fontSize: 15,     color: '#656565',     backgroundColor:'red' } }); 

It's a really bad workaround, but I have yet to see a concise fix to it. As far as I know, there is an issue on the Git repo but hasn't been fixed yet.