What is the difference between these two View components?

Question

I am looking at react-360 and react-native code and found the following examples concerning the View component.

class ViewColoredBoxesWithText extends Component {
  render() {
    return (
      <View style={{flexDirection: 'row', height: 100, padding: 20}}>
        <View style={{backgroundColor: 'blue', flex: 0.3}} />
        <View style={{backgroundColor: 'red', flex: 0.5}} />
        <Text>Hello World!</Text>
      </View>
    );
  }
}

Why are the children View components self closing whereas the parent View component is not.

Answer 1

As for the parent <View> you cannot use self closing because it has to wrap children components between the opening and closing tags.

In case of child <View> you are not wrapping any children within the tag, so you are using open with the choice to use self-closing or separate closing tag. This is the JSX feature same applies for all the tags such as <div>, <p> or other custom elements.

you can get to know about it in more depth JSX in Depth