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

maintenancerp · July 16, 2019, 8:04am

Hi Community !

I need your help !
I upgraded my app to Expo SDK v33 and now I have an issue with react-navigation (or something else). I right now have a gap / white space (height : 40px) at the bottom of bottom tab navigator. This behavior only exists on my standalone app when I launch a new build for iOS or Android. (see below)

Left : behavior expected (simulator and phone via Expo app)
Right : behavior on the standalone app (android version)

I don’t understand why the behavior is not the same between the simulator and the standalone application.

I followed the insctructions of this page Expo SDK v33.0.0 is now available | by Eric Samelson | Exposition

Please find below my package.json

"dependencies": {
        "@expo/vector-icons": "^10.0.3",
        "@redux-offline/redux-offline": "^2.5.1",
        "airbnb-prop-types": "^2.13.2",
        "axios": "0.18.0",
        "bson-objectid": "^1.2.4",
        "crypto-js": "^3.1.9-1",
        "expo": "^33.0.0",
        "expo-analytics": "1.0.8",
        "expo-asset": "^5.0.1",
        "expo-av": "^5.0.2",
        "expo-constants": "^5.0.1",
        "expo-file-system": "^5.0.1",
        "expo-font": "^5.0.1",
        "expo-linear-gradient": "^5.0.1",
        "expo-localization": "^5.0.1",
        "expo-permissions": "^5.0.1",
        "formik": "^1.5.4",
        "lodash": "^4.17.11",
        "moment": "^2.24.0",
        "postcss-plugin": "^1.0.0",
        "prop-types": "^15.7.2",
        "react": "16.8.3",
        "react-document-title": "^2.0.2",
        "react-dom": "npm:@hot-loader/react-dom@^16.8.6",
        "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
        "react-native-elements": "^1.1.0",
        "react-native-formik": "^1.7.5",
        "react-native-keyboard-aware-scroll-view": "^0.8.0",
        "react-native-linear-gradient": "^2.5.4",
        "react-native-modal": "^10.0.0",
        "react-native-navigation": "^2.18.2",
        "react-native-page-control": "^1.1.1",
        "react-native-paper": "^2.15.2",
        "react-native-render-html": "^4.1.2",
        "react-native-snap-carousel": "^3.7.5",
        "react-native-video": "^4.4.1",
        "react-navigation": "^3.11.0",
        "react-redux": "^6.0.0",
        "react-router-dom": "^5.0.0",
        "reduce-reducers": "^1.0.1",
        "redux": "^4.0.1",
        "redux-saga": "^1.0.2",
        "shorthash": "0.0.2",
        "yup": "^0.27.0"
    },
    "devDependencies": {
        "@babel/core": "^7.4.3",
        "@babel/plugin-proposal-class-properties": "^7.4.0",
        "@babel/plugin-proposal-decorators": "^7.4.0",
        "@babel/plugin-proposal-json-strings": "^7.2.0",
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "@babel/plugin-syntax-import-meta": "^7.2.0",
        "@babel/polyfill": "^7.4.3",
        "@babel/preset-env": "^7.4.3",
        "@babel/preset-react": "^7.0.0",
        "@babel/register": "^7.4.0",
        "autobind-decorator": "^2.4.0",
        "babel-core": "^6.26.3",
        "babel-eslint": "^10.0.1",
        "babel-jest": "^24.7.1",
        "babel-loader": "^8.0.5",
        "babel-plugin-react-native-classname-to-style": "^1.2.2",
        "babel-plugin-react-native-platform-specific-extensions": "^1.1.1",
        "babel-plugin-transform-remove-console": "^6.9.4",
        "babel-preset-expo": "^5.2.0",
        "babel-runtime": "^6.26.0",
        "body-parser": "^1.18.3",
        "chai": "^4.2.0",
        "chai-enzyme": "^1.0.0-beta.1",
        "chai-jest-diff": "^1.0.2",
        "chai-jest-snapshot": "^2.0.0",
        "chalk": "^2.4.2",
        "clean-webpack-plugin": "^2.0.1",
        "copy-webpack-plugin": "^5.0.2",
        "core-js": "^3.0.1",
        "cross-env": "^5.2.0",
        "dirty-chai": "^2.0.0",
        "enzyme": "^3.9.0",
        "enzyme-adapter-react-16": "^1.12.1",
        "enzyme-to-json": "^3.3.5",
        "error-overlay-webpack-plugin": "^0.2.0",
        "eslint": "^5.16.0",
        "eslint-config-prettier": "^4.1.0",
        "eslint-config-standard": "^12.0.0",
        "eslint-loader": "^2.1.2",
        "eslint-plugin-import": "^2.17.1",
        "eslint-plugin-jsx-a11y": "^6.2.1",
        "eslint-plugin-node": "^8.0.1",
        "eslint-plugin-prettier": "^3.0.1",
        "eslint-plugin-promise": "^4.1.1",
        "eslint-plugin-react": "^7.12.4",
        "eslint-plugin-standard": "^4.0.0",
        "file-loader": "^3.0.1",
        "friendly-errors-webpack-plugin": "^1.7.0",
        "hard-source-webpack-plugin": "^0.13.1",
        "import-sort-cli": "^6.0.0",
        "import-sort-parser-babylon": "^6.0.0",
        "import-sort-style-delicious": "^1.0.2",
        "jest": "^24.7.1",
        "jest-watch-toggle-config": "^1.0.2",
        "jest-watch-typeahead": "^0.3.0",
        "metro-react-native-babel-preset": "^0.54.1",
        "mini-css-extract-plugin": "^0.6.0",
        "morgan": "^1.9.0",
        "node-notifier": "^5.4.0",
        "npm-run-all": "^4.1.5",
        "offline-plugin": "^5.0.6",
        "postcss": "^7.0.14",
        "postcss-css-variables": "^0.12.0",
        "postcss-load-config": "^2.0.0",
        "prettier": "^1.17.0",
        "react-hot-loader": "^4.8.4",
        "react-native-postcss-transformer": "^1.2.4",
        "react-native-stylus-transformer": "1.2.0",
        "react-native-web": "^0.11.2",
        "react-test-renderer": "^16.8.6",
        "reactotron-react-native": "^3.2.2",
        "rimraf": "^2.6.3",
        "sinon": "^7.3.1",
        "sinon-chai": "^3.3.0",
        "style-loader": "^0.23.1",
        "stylus": "^0.54.5",
        "terser-webpack-plugin": "^1.2.3",
        "webpack": "^4.30.0",
        "webpack-cli": "^3.3.0"
    },

Thank you !!!

adamjnav · July 16, 2019, 2:55pm

Hey @maintenancerp,

Can you try creating a minimal, reproducible example of this (essentially a new project with just react-navigation installed and a bare-bones tab navigator)? That way we can be sure it’s something to do with the library, rather than some issue in your project’s code.

Cheers,
Adam

maintenancerp · July 17, 2019, 7:39am

Thanks @adamjnav !
I’m going to create a new project with juste react-navigation and I’ll get back to you

adamjnav · July 17, 2019, 1:13pm

Sounds good!

maintenancerp · July 18, 2019, 9:53am

Hi,

I found a fix for my issue. I removed these lines in app.json file :

        "androidStatusBar": {
            "backgroundColor": "#ffffff",
            "barStyle": "dark-content"
        },

The status bar is responsible for bottom white space. React-navigation works fine.

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

adamjnav · July 22, 2019, 1:45pm

Glad you got it sorted. Thanks for the information!

system · August 11, 2019, 1:45pm

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Expo standalone build screen gets cut off (statusbar height) at the bottom Expo SDK	12	3496	December 6, 2018
Extra padding on tab navigator in Google Play version of app Expo Development Tools	6	579	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