What's the equivalent of React Native { flex: 1 } for React JS?

Question

I have been programming a lot in React Native and I'm trying React js (only web) and I don't know to make a simple View that get all screen to start play with all components.

Let me explain:

In React Native I handle the View dimensions with flex, something like this:

<View style={{ flex: 1 }}>
    <View style={{ flex: 0.5, backgroundColor: 'blue' }}>
      <Text>I'm a blue 50% screen View!</Text>
    </View>
    <View style={{ flex: 0.5, backgroundColor: 'yellow' }}>
      <Text>I'm a yellow 50% screen View!</Text>        
    </View>
</View>

But in React JS I have to use div tags that doesn't recognize flex. I mean, I cannot do this:

<div style={{ flex: 1 }}>
    <div style={{ flex: 0.5, backgroundColor: 'blue' }}>
      <p>I'm a blue 50% screen View!</p>
    </div>
    <div style={{ flex: 0.5, backgroundColor: 'yellow' }}>
      <p>I'm a yellow 50% screen View!</p>        
    </div>
</div>

How I have to use that styles in React js for the divs to get the percentages results?

Answer 1

React Native uses its own flexbox implementation - https://facebook.github.io/react-native/docs/flexbox

In React you are using CSS flexbox - https://developer.mozilla.org/en-US/docs/Glossary/Flexbox

Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.

In css, you also need to declare parent container as

.flex-container {
  display: flex;
}

and that is probably what you are missing.

pure CSS version of your flex would probably look like this (styles as "string" version):

<div style="display: flex; flex-direction: column; height: 100vh;">
    <div style="flex: 1; background-color: blue;">
      <p>I'm a blue 50% screen View!</p>
    </div>
    <div style="flex: 1; background-color: yellow;">
      <p>I'm a yellow 50% screen View!</p>        
    </div>
</div>