Question

In React Native, flex container and flex item properties are typically applied to the same element

class FlexDirectionBasics extends Component {
  render() {
    return (
      // `flex` is a flex item property,
      // `flexDirection` is a flex container property
      <View style={{flex: 1, flexDirection: 'row'}}>
      ...

How is that?

[^1]: https://facebook.github.io/react-native/docs/flexbox.html

#react #mobile #reactnative #flexbox #layout

Answer

In CSS, the first step in using flexbox is to turn one HTML element into a flex container. This is done by setting that element to display: flex.

It seems that in React Native, every element, including the implicit React root element [^1] (the screen) is already a flex container, so display: flex is not needed. So every element is both a flex item and a flex container.

[^1]: https://reactjs.org/docs/rendering-elements.html#rendering-an-element-into-the-dom
[^2]: https://rationalappdev.com/layout-react-native-components-with-flexbox/#understanding-flexible-containers

Learn

Author

xavi

Reviews
Last
next

Students 0