Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

AppRegistry renders a View element that does not respect the react-root div's dimensions #940

Closed
DaKaZ opened this issue May 8, 2018 · 3 comments
Closed

AppRegistry renders a View element that does not respect the react-root div's dimensions #940

DaKaZ opened this issue May 8, 2018 · 3 comments

Comments

@DaKaZ
Copy link

DaKaZ commented May 8, 2018

The problem
AppComponent (part of AppRegistry) wraps the app in a View. This view as a style of flex: 1. However, even if the root div in the HTML is set to height 100%, the react app does not render to the full height of the screen. If you change the AppComponent style to width: '100%', height: '100%' the react app renders as expected.

How to reproduce
Test case: https://codesandbox.io/s/kml4ojq27o

Steps to reproduce:

  1. just run the app. The entire background should be green and Hello World should be centered in the window.

Current Render:
screen shot 2018-05-08 at 3 36 23 pm

Expected behavior
The rendered app should consume the space allotted to the root div.

screen shot 2018-05-08 at 3 39 28 pm

Environment (include versions). Did this work in previous versions?
Yes, this did work on 0.2.2 (we just updated to 0.6.1

  • OS: Ubuntu/MacOS
  • Device: Laptop
  • Browser: Chrome
  • React Native for Web (version): 0.6.1
  • React (version): 16.3.2

Additional context
N/A
@koulmomo
Copy link
Contributor

koulmomo commented May 8, 2018

The behavior changed due to react-native-web no longer setting StyleSheet.absoluteFill on the top level element.

I would recommend manually adding it to your rootContainer and/or wrapping your app with another view that replicates those styles.

Absolute fill solution is the least fragile as then you do not need to make sure height: 100% is properly respected all the way down from <html /> to your root component

@necolas
Copy link
Owner

necolas commented May 9, 2018

You need to add display:flex to your root element: https://codesandbox.io/s/52x1871vjl

@necolas necolas closed this as completed May 9, 2018
@DaKaZ
Copy link
Author

DaKaZ commented May 9, 2018

@necolas thank you! You are a wizard.... I not only greatly appreciate all you do for RNW, but for taking the time to solve this incredibly simple problem for me!!

@cymen cymen mentioned this issue May 15, 2018
Closed
@gHashTag gHashTag mentioned this issue May 16, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@necolas @DaKaZ @koulmomo