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.

https://media.giphy.com/media/hEc4k5pN17GZq/giphy.gif. It will not be that maybe it's because one is a father and the others are not? — jose920405, Dec 13 '18 at 18:55
In order to nest components you open and close the parent one separately. On the other hand, if it doesn't have a child, it can (must) be closed with a self tag after its props. — Milore, Dec 13 '18 at 18:58

Nikhil Kinkar · Accepted Answer · 2018-12-13T19:03:21.710

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

Luke Flournoy · Answer 2 · 2018-12-13T19:01:32.623

0

Because the parent View component has children components while the children View components do not. See this related Stack Overflow question: (React component closing tag)

edited Dec 13 '18 at 19:01

answered Dec 13 '18 at 18:55

Luke Flournoy

3,393
2
16
22

What is the difference between these two View components?

2 Answers2