React-native-windows: UWP: The Layout is not drawn correctly if View contains fixed 'width/height' and 'flexDirection:row' style properties

[piyush965]

Environment

1. react-native -v: 0.55
2. npm ls rnpm-plugin-windows:
3. npm ls react-native-windows: 0.55
4. node -v:
5. npm -v:
6. yarn --version:

Then, specify:

• Target Platform:
  UWP

• Target Platform Version(s):
  UWP 10.0.14393

• Target Device(s):
  Desktop

• Development Operating System:
  Windows

• Visual Studio Version: 2017

• Build Configuration: Debug/Release

Steps to Reproduce

The Layout is not drawn correctly if View contains fixed 'width/height' and 'flexDirection:row' style properties.

Sample code:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class App extends Component<{}> {
  render () {
    return (
      <View style={{ flex: 1, backgroundColor: 'skyblue' }}>
        <View style={{ width: '100%', height: 50, flexDirection: 'row', alignItems: 'center', backgroundColor: 'blue' }}>
          <Text>FIRST</Text>
          <Text>SECOND</Text>
        </View >
      </View >
    )
  }
}

Following steps to reproduce problem:

1. Launch app in normal window mode (Not full screen mode). Refer below screenshot.

1. Now, resize the app to maximize mode. Refer below screenshot.
   Observed - The view layout is not drawn completely on full screen mode. A white patch is observed on the right side.

Expected Behavior

I expect the View layout should drawn correctly in full screen mode. This way it works in WPF.

(Write what you thought would happen.)

Actual Behavior

View layout is not drawn in full screen mode, if the View style property contains fixed height/width and flexDirection: row.

(Write what happened. Add screenshots!)

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[piyush965]

@rozele I debugged this issue, the layout width and height are set correctly but seems like background color is not filled to whole view when app screen size changes for this case.

[creambyemute]

As a workaroudn: If a rerender (through state) is forced it's getting drawn correctly I think

[jmcginty]

This looks like a similar problem: #1675

[rozele]

Might be worthwhile checking out if #2050 fixes these issues.

[rozele]

Closing, if not fixed by #2050, please let me know and we can open a new issue.