Next.js: Flex: 1 - react-native-web

[gHashTag]

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

It must be so

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?

[timneutkens]

I'm honestly not sure how this issue relates to Next.js.

[gHashTag]

This does not apply to Next.js?
https://github.com/zeit/next.js/tree/canary/examples/with-react-native-web

[gHashTag]

@dcalhoun

[dcalhoun]

@gHashTag if you create a full test case with Next.js and react-native-web and provide a GitHub URL to the test case, I'd be happy to help debug with you.

[gHashTag]

@dcalhoun Thank you for your attention to my question. My code is here.

[timneutkens]

You didn't provide a clear/concise way to reproduce, nor mentioned the specific example. Hence it looking like a random issue. I'll re-open now that it's clear what you meant.

[timneutkens]

The reason I closed so fast is that this happens multiple times per day and we have 238 other issues to look after. This is the reason we ask for a full reproduction in the issue template. If no clear reproduction is provided we can't really help with the issue anyway.

[dcalhoun]

@gHashTag based on what you've shared, your issues are not related to Next.js or react-native-web. It is a simple misunderstanding of how the Flexbox spec works. I recommend reading up on flexbox guides, like the MDN Basic Concepts of Flexbox. The parent element of your container is not a flex element, so flex: 1 has no impact on the container height.

Unrelated, when using react-native-web, you should not declare non-dynamic styles inline. You should always use StyleSheet.create for performance gains. Here is an example of your test case updated to use flexbox and StyleSheet.create.

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

const styles = StyleSheet.create({
  container: {
    alignItems: 'flex-end',
    backgroundColor: 'gold',
    display: 'flex',
    height: '100%',
    justifyContent: 'center',
  },
  text: {
    marginRight: '15%',
    fontSize: 80,
  },
});

export default props => (
  <View style={styles.container}>
    <Text style={styles.text}>Home</Text>
  </View>
);

@timneutkens feel free to close this issue.

[gHashTag]

@dcalhoun wait please

To verify your approval, I install the project using react-native init by instructions from the official documentation.
A ready-made example can be taken here
One into one copy the styles from the application with the help of react-native init

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

And add them to the application created with the help of Next.js

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default props => (
  <View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Native!
    </Text>
    <Text style={styles.instructions}>
      To get started, edit App.js
    </Text>
    <Text style={styles.instructions}>
      {instructions}
    </Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

In one case, the styles were applied, in the second there is not.
Where is the truth?

[gHashTag]

@dcalhoun Moreover, I collected a webpack with the latest version react-native-web 0.6.1
Source

Styles are worked out correctly

[dcalhoun]

Add height: '100%' to the the top-level container element.

[gHashTag]

@dcalhoun I knew this from the beginning,

But I do not use height: '100%' in the projects react-native, which means I will need to refactor the styles every time, but this is not very convenient.

Did I understand correctly that Next.js does not support the style flex: 1 ?

[dcalhoun]

This is not an issue with Next.js. If you want to use flex: 1 add display: flex; to the parent element of container.

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

[timneutkens]

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

[gHashTag]

@dcalhoun

// _document.js
<html style={{ height: '100%', width: '100%' }}>
    <Head>
         <title>Next.js</title>
     </Head>
      <body style={{ display: 'flex', height: '100%', width: '100%' }}>
            <Main />
            <NextScript />
      </body>
</html>

output:

if I add

// index.js
container: {
   display: flex;
  ...
}

Source
What am I doing wrong?

[dcalhoun]

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%;
  }
`

[gHashTag]

@dcalhoun
Thank you! wound up