View is not getting rendered without scrolling - react-native

Question

I have a really weird rendering bug in my app.
The Entry screen is supposed to show title, an image and the authors name (a header view). But the view element only gets displayed after scrolling.
<View style={this.state.baseStyles.body}>
<View style={headerStyles.header}>
<View style={headerStyles.headerSide}>
<FastImage
style={headerStyles.headerImage}
source={{uri: imgUrl}}
/>
</View>
<View style={headerStyles.headerBody}>
<Text style={headerStyles.headerTextTitle}>{entry["title"]}</Text>
<Text style={headerStyles.headerTextSubtitle}>{datetime} von {entry["author"]}</Text>
</View>
</View>
<View style={this.state.baseStyles.body}>
<WebView
style={styles.WebViewStyle}
javaScriptEnabled={true}
domStorageEnabled={false}
source={{ html: page}}
ref={(ref) => { this.webview = ref; }}
onNavigationStateChange={(event) => {
this.onWebviewPressLink(event);
}}
/>
</View>
</View>
I have tried to find the cause of the bug by looking and comparing it to older code of the app, but I haven't really changed anything. I have updated RN to 0.57.8 from 0.57.2, I haven't yet tried if I downgrade to 0.57.2 with the same code and see if the problem still occurs.
Is there a way to fix this behaviour?
When opening Entry:
https://imgur.com/AOVTwxJ
After scrolling:
https://imgur.com/6eFHg21
Thanks in advance for any help
//added styles
Header
view:{
flex: 1,
flexDirection:'column',
backgroundColor:theme.background.secondary
},
headerHighlight: {
flex:1,
},
header: {
padding:10,
paddingBottom:3,
flexDirection:'row',
backgroundColor: theme.header.background,
paddingVertical: 4,
paddingHorizontal: 4,
},
headerSide:{
paddingHorizontal:8,
},
headerImage:{
width: 70,
height: 70,
marginVertical: 4,
borderRadius: 3,
},
headerBody:{
flex:1,
flexDirection:'column'
},
headerTextTitle: {
fontSize: 19,
fontWeight: '200',
color: theme.header.text.primary,
marginTop: 8,
marginRight: 5
},
headerTextSubtitle: {
fontSize: 12,
color: theme.header.text.secondary
},
this.state.baseStyles.body:
body: {
flex: 1,
flexDirection:'column',
backgroundColor:theme.background.secondary
},
styles.WebViewStyle:
{
justifyContent: 'center',
alignItems: 'center',
flex:1,
}

Answer 1

I fix it by wrapping a ScrollView around it.
<ScrollView contentContainerStyle={{flex:1}}>
<View style={this.state.baseStyles.body}>
<WebView
style={styles.WebViewStyle}
javaScriptEnabled={true}
domStorageEnabled={false}
source={{ html: page}}
ref={(ref) => { this.webview = ref; }}
onNavigationStateChange={(event) => {
//console.log(event);
//console.log("Event URL"+event.url);
this.onWebviewPressLink(event);
}}
/>
</View>
</ScrollView>
I don't no why this solves it but glade it works now. Would be cool if someone could explain it.
//Little bit prittier
<ScrollView style={this.state.baseStyles.body} contentContainerStyle={{flex:1}}>
<WebView
style={styles.WebViewStyle}
javaScriptEnabled={true}
domStorageEnabled={false}
source={{ html: page}}
ref={(ref) => { this.webview = ref; }}
onNavigationStateChange={(event) => {
//console.log(event);
//console.log("Event URL"+event.url);
this.onWebviewPressLink(event);
}}
/>
</ScrollView>