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 ponents.

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?

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 ponents.

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?

• javascript
• css
• reactjs
• react-native
• flexbox

Share Improve this question Follow edited Mar 22, 2019 at 10:44 Georgi Hristozov 4,31922 gold badges1919 silver badges2424 bronze badges asked Mar 22, 2019 at 10:30 SmoggeR_jsSmoggeR_js 3,16044 gold badges2727 silver badges5454 bronze badges 4

• What do you mean, " I have to use div tags that doesn't recognize flex." ? – VilleKoo Commented Mar 22, 2019 at 10:40
• I mean that I make a div with style flex 1 and nothing happens instead of if I would do in react native – SmoggeR_js Commented Mar 22, 2019 at 10:42
• You can still use div { flex: 1 } in your css. It's a shorthand for flex-grow: 1;flex-shrink: 1; flex-basis: 0%; } – VilleKoo Commented Mar 22, 2019 at 10:44
• I do and nothing happens, the div doesn't fills the whole screen. – SmoggeR_js Commented Mar 22, 2019 at 10:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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/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>