Why won't my top level react-native component expand to the full dimensions?

Question

I'm using next.js if that matters and my pages/_app.tsx has:

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

and customTheme is:

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',
    }
}

I see Text, but no red background. What am I missing?

Answer 1

Ok the problem here is the use of position: 'absolute' with height: '100%', delete one of these properties in your style object and it should work. If you want the full screen to have background color change height: '100%' to height: Dimensions.get("window").height