how to make react native web full height?

Question

I am using react native web library but I can't make full height on web

Code:

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

class index extends React.Component {

    render() {
        return (
            <View style={styles.container}>

                <TouchableOpacity
                    style={{
                    backgroundColor: 'blue'
                }}>
                    <Text style={{
                        color: 'green'
                    }}>Learning</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
        margin: 0,
        padding: 0,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red'
    }
})

export default index;

The result of chrome browser:

Rajendran Nadar · Answer 1 · 2021-07-20T21:08:21.160

7

React native does not understand viewport units. We can use Platform API provided by react-native.

If you want full height for mobile as well as a web while using react-native-web try this method.

<View style={styles.fullHeight}>
  <Text>Hey there</Text>
</View>

CSS code

const styles = StyleSheet.create({
  fullHeight: {
    height: Platform.OS === 'web' ? '100vh' : '100%'
  }
})

or

const styles = StyleSheet.create({
   fullHeight: {
     ...Platform.select({web: {height: '100vh'}, default: {height: '100%'}})
   }
})

edited Jul 20 '21 at 21:08

answered Oct 22 '19 at 18:58

Rajendran Nadar

4,962
3
30
51

2

This solution is better than the `Dimensions.get("window").height` solution because it works when the browser window is resized. – SamB Nov 25 '20 at 03:13

score 6 · Accepted Answer · answered Dec 26 '17 at 11:18

6

what fix my problem is the position property

position:'absolute' or position:'fixed'

relative not working position:'relative'

answered Dec 26 '17 at 11:18

amorenew

10,760
10
47
69

score 4 · Answer 3 · answered Mar 10 '19 at 09:41

4

flex: 1 and height: "100%" work fine for mobile version of react-native-web but not for web. Dimensions.get("window").height - work good for both versions.

answered Mar 10 '19 at 09:41

bigcheeseh

41
4

score 1 · Answer 4 · answered Dec 18 '20 at 11:33

1

Adding this style on container of my App file works for me Acctully:

const styles = StyleSheet.create({
  root: {
    flex:1,
    ...Platform.select({web: {height: '100vh'}}),
  },
});

App.js look like this:

...
return(<View style={styles.root}>
...

answered Dec 18 '20 at 11:33

Ahmad Khani

850
2
10
15

score 0 · Answer 5 · answered Dec 26 '17 at 10:16

0

Try the following

 container: {
        flex: 1
        width: '100%',
        height: '100%',
        margin: 0,
        padding: 0,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red'
    }

answered Dec 26 '17 at 10:16

Ahsan Ali

4,951
2
17
27

score 0 · Answer 6 · answered Mar 10 '19 at 09:58

0

You can use Viewports Units for that. If you want them on react-native you need to:

npm install react-native-viewport-units --save

https://www.npmjs.com/package/react-native-viewport-units

With that you can do.

var {vw, vh, vmin, vmax} = require('react-native-viewport-units');

<View style={{width:100*vw}}/>

answered Mar 10 '19 at 09:58

Patryk Janik

2,476
2
13
23

I hope this is cross platform – Nikola Lukic Nov 12 '20 at 12:01

score 0 · Answer 7 · answered Sep 10 '20 at 10:20

When using react-native-web, you should wrap a root-level tree with a viewport shim:

    <View
      style={{
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width,
      }}
    >
      ...
    </View>

This will normalize the abstract units across platform and allow all children to correctly respond to measured flex (including correct measurements from the onLayout eventing)

ProTip: you should subscribe your layout sizes to Dimensions.addEventListener('change',...) to capture reorientations.

score 0 · Answer 8 · answered Mar 26 '21 at 12:38

I am using react native web for a web app. It has left permanent sidebar and the content on the right is scrollable.

I have achieved this by adding ScrollView container to each component in Drawer.Screen.

Then I added a View container to the Drawer and added Dimensions.get("window").height as height to it.

Sidebar navigation created by using drawer navigation.

Hope this helps someone, took me a while to set it up correctly.

Adding a screenshot from the actual interface

import {Dimensions, ScrollView, Text, View} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';

// Get window height to make screens scrollable
const windowHeight = Dimensions.get('window').height;

function Feed() {
  return (
    <ScrollView>
      <Text>Feed Screen</Text>
    </ScrollView>
  );
}

function Notifications() {
  return (
    <ScrollView>
      <Text>Notifications Screen</Text>
    </ScrollView>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator initialRouteName="Feed" drawerType="permanent">
      <Drawer.Screen
        name="Feed"
        component={Feed}
        options={{ drawerLabel: 'Home' }}
      />
      <Drawer.Screen
        name="Notifications"
        component={Notifications}
        options={{ drawerLabel: 'Updates' }}
      />
    </Drawer.Navigator>
  );
}
<View style={{height: windowHeight}}>
  <MyDrawer />
</View>

how to make react native web full height?

8 Answers8