Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Flex: 1 - react-native-web

See original GitHub issue

The main style does not work for react-native-web

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'gold',
    justifyContent: 'center'
  },
  text: {
    alignItems: 'center',
    fontSize: 24
  }
})

export default props => (
  <View style={styles.container}>
    <View style={{ position: 'absolute', top: '50%', right: '15%' }}>
      <Text style={{ fontSize: 80, textAlign: 'right' }} >
        Home
      </Text>
    </View>
  </View>

Now so 2018-05-22 18 58 24

It must be so 2018-05-22 19 00 37

System information

OS: macOS
Browser (if applies) all
Version of Next.js: 6.0.3

the solution height: '100%' does not fit

How to be?

Issue Analytics

State:
Created 5 years ago
Comments:17 (17 by maintainers)

Top GitHub Comments

2reactions

dcalhouncommented, May 23, 2018

Instead of adding display: flex to the body, target the <div id="__next" /> element with CSS. The below is updated code from the RNW example.

// _document.js
// Force Next-generated DOM elements to fill their parent's height.
const normalizeNextElements = `
  #__next {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
`

2reactions

timneutkenscommented, May 23, 2018

I’m going to close this as @dcalhoun is right. 👍