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

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 https://blog.expo.io/expo-sdk-v33-0-0-is-now-available-52d1c99dfe4c#c0d2

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 !!!

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

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

1 Like

Sounds good!

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.

1 Like

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

Glad you got it sorted. Thanks for the information!

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