React Native component above WebView not rendering properly

I have a component that renders a WebView along with a Text component at the top and bottom of the screen:

return (
        <Container>
            <Text>TEXT TOP</Text>
            <WebView source={{uri: url}} />
            <Text>TEXT BOTTOM</Text>
        </Container>
);

The issue that I am facing is that the "TEXT TOP" does not appear the first time I navigate to the specific component, while the "TEXT BOTTOM" appears just fine. In order to make the top text appear, I need to do one of the following:

• Navigate to another component and come back
• Change the phone's orientation
• Interact with the WebView (scroll or press on an input field)

I have tried with both the WebView component from 'react-native' and also from 'react-native-webview' without managing to change the behaviour.