Expo SDK 33 - A gap only appears at the bottom of bottom tab navigator in the standalone app

maintenancerp · July 18, 2019, 10:16am

Four your information, this issue is knows, see below :

github.com/expo/expo

ScrollView height gets cut by StatusBar height in standalone app

opened 10:55AM - 07 Aug 18 UTC

closed 06:27PM - 10 Oct 19 UTC

kafi-rashid

Android

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 ![act](https://user-images.githubusercontent.com/25544657/43771979-93086d6a-9a62-11e8-81b3-1ae94ca7055b.jpg) ### Actual Behavior ![err](https://user-images.githubusercontent.com/25544657/43771999-9dfcb3f2-9a62-11e8-9cf7-ec5fdf1b99a9.jpg) ### 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> ```

github.com/expo/expo

Statusbar , Android: when backgroundcolor is added in app.json, a margin to every view is added too

opened 02:06AM - 08 Dec 18 UTC

closed 01:03AM - 22 Dec 18 UTC

giacomocerquone

needs more info

### Environment ``` Expo CLI 2.6.1 environment info: System: O…S: Windows 10 Binaries: npm: 6.4.1 - C:\Users\Giacomo\AppData\Roaming\npm\npm.CMD IDEs: Android Studio: Version 3.2.0.0 AI-181.5540.7.32.5056338 ``` My app target is Android and iOS ### Steps to Reproduce I think we should shed some light on the differences when using the combination of the available APIs to handle the android statusbar. I'm opening an issue that might be a documentation issue or a tecnical one. What I want is just to add a precise background color to the android statusbar and I'm trying to do it in my app.json file. The point is that I'm using react navigation too in my project and putting navigators here and there, set automatically the top margin in order to let the status bar not overlap the view. Now the problem is that adding the background color in app.json, seems to double the margin, but nothing is said about this in the doc. Is this a correct behaviour? And if so, how can I JUST change the color of the statusbar without adding more margin? 1. Use react-navigation stack navigator on a component 2. Set the backgroundcolor of the statusbar inside app.json 3. Watch the doubled margin ### Expected Behavior I thougth that just the backgroundColor would be changed. ### Actual Behavior The margin has doubled ### Reproducible Demo I set up this snack with react navigation https://snack.expo.io/@giacomocerquone/statusbar-doubled-margin But I don't know how to edit the app.json on snack, maybe we just can't. UPDATE: Adding just the statusbar component doesn't work, but adding first this in the app.json: ``` "androidStatusBar": { "backgroundColor": "#ffffff", "barStyle": "dark-content" } ``` And then putting the statusbar in a render method of whichever component, the last is applied (and this should be documented) and the margin removed: ``` <StatusBar backgroundColor="#ffffff" barStyle="dark-content" translucent /> ``` Too much confusion. This stuff shouldn't only be documented, but fixed I believe... there are too much api overlapping

Topic		Replies	Views
Expo standalone build screen gets cut off (statusbar height) at the bottom Expo SDK	12	3493	December 6, 2018
Extra padding on tab navigator in Google Play version of app Expo Development Tools	6	578	September 1, 2019
SDK38 upgrade issue Expo SDK	7	946	August 3, 2020
Upgrading to SDK 49 introduced white space to my app Expo SDK updates	1	182	August 15, 2023
App height resizes in expo player, but not in standalone app Expo SDK	1	361	November 4, 2019

Expo SDK 33 - A gap only appears at the bottom of bottom tab navigator in the standalone app

Related Topics