ScrollView height gets cut by StatusBar height in standalone app

ScrollView height gets cut by StatusBar height in standalone app when installed in android Nougat or Oreo, but works fine in lower versions (tested in KitKat) and also in development mode in expo client. This is happening for the last 2-3 weeks. Is it because of SDK/XDE upgradation? I’m using exp build:android for building apk.

Environment

OS: macOS Sierra 10.12.1 Node: 10.0.0 Target OS: Android

Steps to Reproduce

I have tried ScrollView inside View and then another View inside ScrollView with 100% height, window height, and flex layout. Also tried ScrollView inside View / View inside ScrollView.

Expected Behavior

Actual Behavior

Reproducible Demo

<View style={{ flex: 1, backgroundColor: 'green' }}>
	<StatusBar hidden={ false } backgroundColor="#ff9933" barStyle="light-content" translucent={ true } />
	<ScrollView showsVerticalScrollIndicator={ false } contentContainerStyle={{ flex: 1 }} style={{ backgroundColor: 'gray', padding: 10 }}>
		<View style={{ flex: 1, backgroundColor: 'lightgray', minHeight: Dimensions.get('window').height }}>
		</View>
	</ScrollView>
</View>

[kafi-rashid]

@nicovanzyl @kmnwee

I fixed it this way:

In App.js I had to set StatusBar property hidden = false, translucent = true inside a View with flex = 1 and imported the component inside it.

<View style={{ flex: 1 }}>
	<StatusBar hidden={ false } backgroundColor="#FFFFFF" barStyle="dark-content" translucent={ true } />
	<MyComponent/>
</View>

In MyComponent:

<View style={{ flex: 1, backgroundColor: 'green' }}>
	<StatusBar hidden={ false } backgroundColor="#ff9933" barStyle="light-content" translucent={ true } />
	<ScrollView showsVerticalScrollIndicator={ false } contentContainerStyle={{ flex: 1 }} style={{ backgroundColor: 'gray', padding: 10 }}>
		<View style={{ flex: 1, backgroundColor: 'lightgray', minHeight: Dimensions.get('window').height }}>
		</View>
	</ScrollView>
</View>

[kmnwee]

Hi Guys,

I was able find a fix/workaround. Here’s what I did: -If you have “androidStatusBar” set in you app.json, remove it. -Use StatusBar component [import {StatusBar} from ‘react-native’] in your view to modify your status bar

Hope this works with you too!

-Ken