"View" disapear when "padding" is removed - react-native

Question

I am studying React Native and trying to understand the behavior of the components' style.
I am just creating a simple app and testing the padding style.
Why the boxes disapear when I remove the padding style?
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.box} />
<View style={styles.box} />
<View style={styles.box} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
box: {
padding:20, //remove this line
margin: 4,
backgroundColor: 'steelblue'
}
});

Answer 1

Cause <View /> is like <div> in HTML, it's size is determined by its content, if you remove the padding, then it occupies 0 space.
One way to keep <View /> visible even if it has no content, is to set flex in style like { flex: 1 }

Answer 2

The Box View needs to be either of Fixed dimensions like this:
box: {
//width: 50,
//height: 50,
padding:20,
margin: 4,
backgroundColor: 'steelblue'
}
By padding it is given a fixed size, but if you remove padding it will have no size.
Or you can use Flex dimensions like this:
box: {
flex:1,
padding:20,
margin: 4,
backgroundColor: 'steelblue'
}
In this one you can safely remove padding:20, line.