Responsive React-native-web layout

Question

I'm trying to create a dashboard layout from a react-native project. The idea is to keep most of the code similar for Android, iOS and Web only the layout or navigation style will change. But I find making this type of layout in web is easy but to make it responsive without re-rendering is difficult.

I have achieved this by manually calculating the windows heigh and width by following the code

Dimensions.get('window').width Dimensions.get('window').height

and by eventListener keep updating the state so that it re-renders the whole page again and again.

Dimensions.addEventListener("change", this.updateScreen);

Is there a way I can simply use some % value to fill up the screen. Right now if I use % it squeezed to a child View size. I even tried flex:1 with alignSelf:stretch, alignItem:stretch, width:'100%' etc but no luck.

For a while, let's talk about center row (image attached) it contain 3 columns. I want left and right block (Menu & Call to Action) to be 300px each. Now if I'm on 1000px width monitor my Content block should be (1000 - (300+300)) 400px. if monitor is 1200px then Content block will be (1200 - (300+300)) 600px.

Answer 1

I hope this doesn't come too late.

  <View style={{ flex: 1 }}>
    <View style={{ height: 100, backgroundColor: 'red' }} />

    <View style={{ flex: 1, backgroundColor: 'gray', flexDirection: 'row' }}>
      <View style={{ width: 100, backgroundColor: 'green' }} />
      <View style={{ flex: 1, backgroundColor: 'blue' }} />
      <View style={{ width: 100, backgroundColor: 'green' }} />
    </View>

    <View style={{ height: 100, backgroundColor: 'red' }} />
  </View>

This is the result from the above code.

You don't need to do percentage calculations at all; just structure it in 2 layers of flex layout.

For the components that should not stretch, state their width. For the rest, specify the flex value.

If you insist on using 1 layer to handle it all, then we shall discuss again.

Cheers.