Search code examples
react-nativereact-native-flexboxreact-native-web

how to make react native web full height?


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: enter image description here


Solution

  • what fix my problem is the position property

    position:'absolute' or position:'fixed'

    relative not working position:'relative'