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:

Answer 1

what fix my problem is the position property

position:'absolute' or position:'fixed'

relative not working position:'relative'

Answer 2

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%'}})
   }
})

Answer 3

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.