Почему мой реагирующий компонент верхнего уровня не расширяется до полного размера?

Question

Я использую next.js, если это важно, и мой pages/_app.tsx имеет:

function MyApp({ Component, pageProps }: AppProps) {

    return (
        <PaperProvider theme={customTheme}>

            <View style={{ flex: 1, top: 0, left: 0, height: '100%', width: '100%', zIndex: 10, position: 'absolute', backgroundColor: 'red' }}>
                <Text> Here</Text>
            </View>
        </PaperProvider>
    )
}

export default MyApp

, а customTheme это:

import { DefaultTheme } from 'react-native-paper';

export const customTheme = {
    ...DefaultTheme,
    dark: false,
    colors: {
        ...DefaultTheme.colors,
        primary: '#247BA0',
        accent: '#70C1B3',
        error: '#FF1654',
        disabled: '#F3FFBD',
        placeholder: '#D3EDBE',
    }
}

Я вижу Text, но без красного фона. Что мне не хватает?

Answer 1

Хорошо, проблема здесь в использовании position: 'absolute' с height: '100%', удалите одно из этих свойств в вашем объекте стиля, и оно должно работать. Если вы хотите, чтобы во весь экран изменился цвет фона с height: '100%' на height: Dimensions.get("window").height