React Native - why padding is not working?

Question

Why does padding never work 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

The problem with the addition for android is fixed in version v0.31.0 with the reaction. for more information, you can go to change-natvie release changelog https://github.com/facebook/react-native/releases

Answer 2

Android with React Native tends to dislike filling unless it has a border. A temporary solution would be to change all of your “paddingXXX” to “marginXXX” to get the approximate style 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' } }); 

This is a very bad workaround, but I have yet to see a short fix. As far as I know, there is a problem in the Git repository, but not yet fixed.

Answer 3

Another factor to consider is the use of flexbox everywhere. Flexbox can pick up the bottom padding from what I found, so packaging in another View may be necessary.

Answer 4

Use this to populate:

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

On practice

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

Answer 5

I have a solution to your problem. Try it:

 <Text> <View style={{padding: 20, backgroundColor: 'red'}}> <Text style={{color: 'white'}}>Description</Text> </View> </Text> 

Answer 6

 <Text> {' ${description} '} </Text> 

Adding a place before and after, as above, helped me in most cases. Very useful when you have nested text tags.

Answer 7

Use this to populate:

 <View style={styles.textPadding}> <Text>balablabla</Text> </View> 

 textPadding: { color: '#fff', fontSize: 25, fontWeight: 'bold', backgroundColor: "#FFA679", paddingVertical: 20, paddingHorizontal: 20, textAlign: "center" },